Skip to content

Commit

Permalink
Rename DisableAnimations to UseTransitions (#554)
Browse files Browse the repository at this point in the history 
* feat: switching to useTransitions

* fix: Preventing unnecessary calls to gotostate

* fix: Separate extended splash animation duration from loadingview duration

* feat: Adding UI for testing transition support

* fix: Switch to using transitions

* fix: Changing extended splash template to use transitions

* chore: Making light weight stylable

* chore: Fix xaml alignment

* chore: Adding IsHitTestVisible to false on loading content

* feat: Changing Opacity to Visiblity in Loaded state and setting content of loading/splash presenters to null

* chore: better naming of variable
  • Loading branch information
@nickrandolph
nickrandolph committed Apr 27, 2023
1 parent 0932d01 commit 034b98d
Show file tree
Hide file tree
Showing 5 changed files with 122 additions and 53 deletions.
2 changes: 1 addition & 1 deletion doc/controls/LoadingView.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ Source|ILoadable|Gets and sets the source `ILoadable` associated with this contr
LoadingContent|object|Gets or sets the content to be displayed during loading/waiting.
LoadingContentTemplate|DataTemplate|Gets or sets the template to be used to display the LoadingContent during loading/waiting.
LoadingContentTemplateSelector|DataTemplateSelector|Gets or sets the template selector to be used to display the LoadingContent during loading/waiting.
DisableAnimantions|bool|Gets and sets whether animations will run when transitioning between states.
UseTransitions|bool|Gets and sets whether transitions will run when going between states.

## ILoadable
Describes if this instance is currently in a busy state and notifies subscribers that said state when has changed.
Expand Down
15 changes: 13 additions & 2 deletions ...es/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Content/Controls/LoadingViewSample.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,10 @@
IsDesignAgnostic="True">
<sample:SamplePageLayout.DesignAgnosticTemplate>
<DataTemplate>
<utu:LoadingView DataContext="{Binding Data}"
LoadingContent="Loading....">
<StackPanel>
<utu:LoadingView DataContext="{Binding Data}"
LoadingContent="Loading...."
x:Name="LoadingView">
<utu:LoadingView.Source>
<utu:CompositeLoadableSource>
<utu:LoadableSource Source="{Binding LoadContent0Command}" />
Expand Down Expand Up @@ -42,6 +44,15 @@
</DataTemplate>
</utu:LoadingView.LoadingContentTemplate>
</utu:LoadingView>
<ToggleSwitch IsOn="{Binding UseTransitions, ElementName=LoadingView, Mode=TwoWay}">
<ToggleSwitch.OnContent>
<TextBlock Text="Transitions enabled" />
</ToggleSwitch.OnContent>
<ToggleSwitch.OffContent>
<TextBlock Text="Transitions disabled" />
</ToggleSwitch.OffContent>
</ToggleSwitch>
</StackPanel>
</DataTemplate>
</sample:SamplePageLayout.DesignAgnosticTemplate>
</sample:SamplePageLayout>
Expand Down
64 changes: 46 additions & 18 deletions src/Uno.Toolkit.UI/Controls/ExtendedSplashScreen/ExtendedSplashScreen.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,17 @@
xmlns:utu="using:Uno.Toolkit.UI"
mc:Ignorable="d">

<x:String x:Key="DefaultLoadingViewAnimationDuration">00:00:00.083</x:String>

<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Dark">
<x:String x:Key="DefaultExtendedSplashScreenAnimationDuration">00:00:00.083</x:String>
</ResourceDictionary>
<ResourceDictionary x:Key="Light">
<x:String x:Key="DefaultExtendedSplashScreenAnimationDuration">00:00:00.083</x:String>
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>



<Style x:Key="DefaultExtendedSplashScreen"
TargetType="utu:ExtendedSplashScreen">
Expand All @@ -25,25 +35,42 @@
<Grid x:Name="RootPanel">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="LoadingStates">
<VisualStateGroup.Transitions>
<VisualTransition From="Loading"
To="Loaded">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="Opacity">
<LinearDoubleKeyFrame KeyTime="{ThemeResource DefaultExtendedSplashScreenAnimationDuration}"
Value="1" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="SplashScreenPresenter"
Storyboard.TargetProperty="Opacity">
<LinearDoubleKeyFrame KeyTime="{ThemeResource DefaultExtendedSplashScreenAnimationDuration}"
Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="LoadingContentPresenter"
Storyboard.TargetProperty="Opacity">
<LinearDoubleKeyFrame KeyTime="{ThemeResource DefaultExtendedSplashScreenAnimationDuration}"
Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Loading" />
<VisualState x:Name="Loaded">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="Opacity">
<LinearDoubleKeyFrame KeyTime="{StaticResource DefaultLoadingViewAnimationDuration}"
Value="1" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="SplashScreenPresenter"
Storyboard.TargetProperty="Opacity">
<LinearDoubleKeyFrame KeyTime="{StaticResource DefaultLoadingViewAnimationDuration}"
Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="LoadingContentPresenter"
Storyboard.TargetProperty="Opacity">
<LinearDoubleKeyFrame KeyTime="{StaticResource DefaultLoadingViewAnimationDuration}"
Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<VisualState.Setters>
<Setter Target="ContentPresenter.Opacity"
Value="1" />
<Setter Target="SplashScreenPresenter.Content"
Value="{x:Null}" />
<Setter Target="LoadingContentPresenter.Content"
Value="{x:Null}" />
<Setter Target="SplashScreenPresenter.Visibility"
Value="Collapsed" />
<Setter Target="LoadingContentPresenter.Visibility"
Value="Collapsed" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
Expand All @@ -64,6 +91,7 @@
VerticalContentAlignment="Stretch" />
<ContentControl x:Name="LoadingContentPresenter"
Content="{TemplateBinding LoadingContent}"
IsHitTestVisible="False"
ContentTemplate="{TemplateBinding LoadingContentTemplate}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
HorizontalContentAlignment="Stretch"
Expand Down
28 changes: 16 additions & 12 deletions src/Uno.Toolkit.UI/Controls/LoadingView/LoadingView.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,21 +26,21 @@ private class VisualStateNames
public const string Loaded = nameof(Loaded);
}

#region DependencyProperty: DisableAnimations
#region DependencyProperty: UseTransitions

public static DependencyProperty DisableAnimationsProperty { get; } = DependencyProperty.Register(
nameof(DisableAnimations),
public static DependencyProperty UseTransitionsProperty { get; } = DependencyProperty.Register(
nameof(UseTransitions),
typeof(bool),
typeof(LoadingView),
new PropertyMetadata(false));
new PropertyMetadata(true));

/// <summary>
/// Gets and sets the whether animations will play when transitioning to Loaded state.
/// Gets and sets the whether transitions will play when going between states.
/// </summary>
public bool DisableAnimations
public bool UseTransitions
{
get => (bool)GetValue(DisableAnimationsProperty);
set => SetValue(DisableAnimationsProperty, value);
get => (bool)GetValue(UseTransitionsProperty);
set => SetValue(UseTransitionsProperty, value);
}

#endregion
Expand Down Expand Up @@ -120,6 +120,7 @@ public DataTemplateSelector LoadingContentTemplateSelector

private readonly SerialDisposable _subscription = new();
private bool _isReady;
private string _currentState = string.Empty;

public LoadingView()
{
Expand All @@ -141,16 +142,19 @@ private void OnSourceChanged(DependencyPropertyChangedEventArgs e)

_subscription.Disposable = Source?.BindIsExecuting(UpdateVisualState);
}

private void UpdateVisualState()
{
if (!_isReady) return;

var loadingState = Source?.IsExecuting ?? true
var targetState = Source?.IsExecuting ?? true
? VisualStateNames.Loading
: VisualStateNames.Loaded;

VisualStateManager.GoToState(this, loadingState, IsLoaded && !DisableAnimations);
if (targetState == _currentState)
{
return;
}
_currentState = targetState;
VisualStateManager.GoToState(this, targetState, IsLoaded && UseTransitions);
}
}
}
66 changes: 46 additions & 20 deletions src/Uno.Toolkit.UI/Controls/LoadingView/LoadingView.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,32 +4,58 @@
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:utu="using:Uno.Toolkit.UI"
mc:Ignorable="d">
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Dark">
<x:String x:Key="DefaultLoadingViewAnimationDuration">00:00:00.083</x:String>
</ResourceDictionary>
<ResourceDictionary x:Key="Light">
<x:String x:Key="DefaultLoadingViewAnimationDuration">00:00:00.083</x:String>
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

<x:String x:Key="DefaultLoadingViewAnimationDuration">00:00:00.083</x:String>
<Style x:Key="DefaultLoadingView"
TargetType="utu:LoadingView">

<Style x:Key="DefaultLoadingView" TargetType="utu:LoadingView">

<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
<Setter Property="HorizontalAlignment"
Value="Stretch" />
<Setter Property="HorizontalContentAlignment"
Value="Stretch" />
<Setter Property="VerticalAlignment"
Value="Stretch" />
<Setter Property="VerticalContentAlignment"
Value="Stretch" />

<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="utu:LoadingView">
<Grid x:Name="RootPanel">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="LoadingStates">
<VisualStateGroup.Transitions>
<VisualTransition From="Loading"
To="Loaded">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="Opacity">
<LinearDoubleKeyFrame KeyTime="{ThemeResource DefaultLoadingViewAnimationDuration}"
Value="1" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="LoadingContentPresenter"
Storyboard.TargetProperty="Opacity">
<LinearDoubleKeyFrame KeyTime="{ThemeResource DefaultLoadingViewAnimationDuration}"
Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Loading" />
<VisualState x:Name="Loaded">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Opacity">
<LinearDoubleKeyFrame KeyTime="{StaticResource DefaultLoadingViewAnimationDuration}" Value="1" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="LoadingContentPresenter" Storyboard.TargetProperty="Opacity">
<LinearDoubleKeyFrame KeyTime="{StaticResource DefaultLoadingViewAnimationDuration}" Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<VisualState.Setters>
<Setter Target="ContentPresenter.Opacity"
Value="1" />
<Setter Target="LoadingContentPresenter.Opacity"
Value="0" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
Expand All @@ -43,9 +69,9 @@
VerticalContentAlignment="Stretch" />
<ContentControl x:Name="LoadingContentPresenter"
Content="{TemplateBinding LoadingContent}"
ContentTemplate="{TemplateBinding LoadingContentTemplate}"
ContentTemplate="{TemplateBinding LoadingContentTemplate}"
ContentTemplateSelector="{TemplateBinding LoadingContentTemplateSelector}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
HorizontalContentAlignment="Stretch"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
VerticalContentAlignment="Stretch" />
Expand All @@ -54,7 +80,7 @@
</Setter.Value>
</Setter>
</Style>
<Style TargetType="utu:LoadingView"
BasedOn="{StaticResource DefaultLoadingView}" />

<Style TargetType="utu:LoadingView"
BasedOn="{StaticResource DefaultLoadingView}" />
</ResourceDictionary>

0 comments on commit 034b98d

Please sign in to comment.