Skip to content

Commit

Permalink
fix(calendar): Avoid flicker when changing DisplayMode
Browse files Browse the repository at this point in the history
  • Loading branch information
@dr1rrb
dr1rrb committed Jun 4, 2021
1 parent aea1019 commit 9179695
Show file tree
Hide file tree
Showing 4 changed files with 69 additions and 34 deletions.
32 changes: 22 additions & 10 deletions src/Uno.UI.FluentTheme/Resources/PriorityDefault/CalendarView_themeresources.xaml
View file
Expand Up @@ -260,7 +260,12 @@
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="YearViewScrollViewer" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<!--Begin: Uno only - We changed the default value to avoid flicker, make sure to set it to 1 even if transitions are disabled -->
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="YearViewScrollViewer" Storyboard.TargetProperty="Opacity">
<DiscreteDoubleKeyFrame KeyTime="0" Value="1" />
</DoubleAnimationUsingKeyFrames>
<!--End: Uno only-->
</Storyboard>
</VisualState>
<VisualState x:Name="Decade">
<!--Begin: Uno only-->
Expand All @@ -278,14 +283,16 @@
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DecadeViewScrollViewer" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<!--Begin: Uno only - We changed the default value to avoid flicker, make sure to set it to 1 even if transitions are disabled -->
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="DecadeViewScrollViewer" Storyboard.TargetProperty="Opacity">
<DiscreteDoubleKeyFrame KeyTime="0" Value="1" />
</DoubleAnimationUsingKeyFrames>
<!--End: Uno only-->
</Storyboard>
</VisualState>
<VisualStateGroup.Transitions>
<VisualTransition From="Month" To="Year">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="YearViewScrollViewer" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="MonthView" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="0:0:0.233" Value="0" KeySpline="0.1,0.9,0.2,1" />
</DoubleAnimationUsingKeyFrames>
Expand All @@ -294,6 +301,10 @@
<DiscreteDoubleKeyFrame KeyTime="0:0:0.233" Value="0" />
<SplineDoubleKeyFrame KeyTime="0:0:0.733" Value="1" KeySpline="0.1,0.9,0.2,1" />
</DoubleAnimationUsingKeyFrames>
<!--Uno only: Make sure to set visibility only AFTER opacity -->
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="YearViewScrollViewer" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="MonthViewTransform" Storyboard.TargetProperty="ScaleX">
<SplineDoubleKeyFrame KeyTime="0:0:0.233" Value="0.84" KeySpline="0.1,0.9,0.2,1" />
</DoubleAnimationUsingKeyFrames>
Expand Down Expand Up @@ -368,9 +379,6 @@
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="YearViewScrollViewer" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DecadeViewScrollViewer" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="YearViewScrollViewer" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="0:0:0.233" Value="0" KeySpline="0.1,0.9,0.2,1" />
</DoubleAnimationUsingKeyFrames>
Expand All @@ -379,6 +387,10 @@
<DiscreteDoubleKeyFrame KeyTime="0:0:0.233" Value="0" />
<SplineDoubleKeyFrame KeyTime="0:0:0.733" Value="1" KeySpline="0.1,0.9,0.2,1" />
</DoubleAnimationUsingKeyFrames>
<!--Uno only: Make sure to set visibility only AFTER opacity -->
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DecadeViewScrollViewer" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="YearViewTransform" Storyboard.TargetProperty="ScaleX">
<SplineDoubleKeyFrame KeyTime="0:0:0.233" Value="0.84" KeySpline="0.1,0.9,0.2,1" />
</DoubleAnimationUsingKeyFrames>
Expand Down Expand Up @@ -508,13 +520,13 @@
<CalendarPanel x:Name="MonthViewPanel" />
</ScrollViewer>
</Grid>
<ScrollViewer x:Name="YearViewScrollViewer" UseLayoutRounding="False" Visibility="Collapsed" IsFocusEngagementEnabled="True" Style="{StaticResource ScrollViewerStyle}">
<ScrollViewer x:Name="YearViewScrollViewer" UseLayoutRounding="False" Opacity="0" Visibility="Collapsed" IsFocusEngagementEnabled="True" Style="{StaticResource ScrollViewerStyle}">
<ScrollViewer.RenderTransform>
<ScaleTransform x:Name="YearViewTransform" CenterX="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.CenterX}" CenterY="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.CenterY}" />
</ScrollViewer.RenderTransform>
<CalendarPanel x:Name="YearViewPanel" />
</ScrollViewer>
<ScrollViewer x:Name="DecadeViewScrollViewer" UseLayoutRounding="False" IsFocusEngagementEnabled="True" Visibility="Collapsed" Style="{StaticResource ScrollViewerStyle}">
<ScrollViewer x:Name="DecadeViewScrollViewer" UseLayoutRounding="False" IsFocusEngagementEnabled="True" Opacity="0" Visibility="Collapsed" Style="{StaticResource ScrollViewerStyle}">
<ScrollViewer.RenderTransform>
<ScaleTransform x:Name="DecadeViewTransform" CenterX="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.CenterX}" CenterY="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.CenterY}" />
</ScrollViewer.RenderTransform>
Expand Down
32 changes: 22 additions & 10 deletions src/Uno.UI.FluentTheme/themeresources.xaml
View file
Expand Up @@ -9681,6 +9681,11 @@
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="YearViewScrollViewer" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<!--Begin: Uno only - We changed the default value to avoid flicker, make sure to set it to 1 even if transitions are disabled -->
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="YearViewScrollViewer" Storyboard.TargetProperty="Opacity">
<DiscreteDoubleKeyFrame KeyTime="0" Value="1" />
</DoubleAnimationUsingKeyFrames>
<!--End: Uno only-->
</Storyboard>
</VisualState>
<VisualState x:Name="Decade">
Expand All @@ -9699,14 +9704,16 @@
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DecadeViewScrollViewer" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<!--Begin: Uno only - We changed the default value to avoid flicker, make sure to set it to 1 even if transitions are disabled -->
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="DecadeViewScrollViewer" Storyboard.TargetProperty="Opacity">
<DiscreteDoubleKeyFrame KeyTime="0" Value="1" />
</DoubleAnimationUsingKeyFrames>
<!--End: Uno only-->
</Storyboard>
</VisualState>
<VisualStateGroup.Transitions>
<VisualTransition From="Month" To="Year">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="YearViewScrollViewer" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="MonthView" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="0:0:0.233" Value="0" KeySpline="0.1,0.9,0.2,1" />
</DoubleAnimationUsingKeyFrames>
Expand All @@ -9715,6 +9722,10 @@
<DiscreteDoubleKeyFrame KeyTime="0:0:0.233" Value="0" />
<SplineDoubleKeyFrame KeyTime="0:0:0.733" Value="1" KeySpline="0.1,0.9,0.2,1" />
</DoubleAnimationUsingKeyFrames>
<!--Uno only: Make sure to set visibility only AFTER opacity -->
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="YearViewScrollViewer" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="MonthViewTransform" Storyboard.TargetProperty="ScaleX">
<SplineDoubleKeyFrame KeyTime="0:0:0.233" Value="0.84" KeySpline="0.1,0.9,0.2,1" />
</DoubleAnimationUsingKeyFrames>
Expand Down Expand Up @@ -9789,9 +9800,6 @@
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="YearViewScrollViewer" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DecadeViewScrollViewer" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="YearViewScrollViewer" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="0:0:0.233" Value="0" KeySpline="0.1,0.9,0.2,1" />
</DoubleAnimationUsingKeyFrames>
Expand All @@ -9800,6 +9808,10 @@
<DiscreteDoubleKeyFrame KeyTime="0:0:0.233" Value="0" />
<SplineDoubleKeyFrame KeyTime="0:0:0.733" Value="1" KeySpline="0.1,0.9,0.2,1" />
</DoubleAnimationUsingKeyFrames>
<!--Uno only: Make sure to set visibility only AFTER opacity -->
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DecadeViewScrollViewer" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="YearViewTransform" Storyboard.TargetProperty="ScaleX">
<SplineDoubleKeyFrame KeyTime="0:0:0.233" Value="0.84" KeySpline="0.1,0.9,0.2,1" />
</DoubleAnimationUsingKeyFrames>
Expand Down Expand Up @@ -9929,13 +9941,13 @@
<CalendarPanel x:Name="MonthViewPanel" />
</ScrollViewer>
</Grid>
<ScrollViewer x:Name="YearViewScrollViewer" UseLayoutRounding="False" Visibility="Collapsed" IsFocusEngagementEnabled="True" Style="{StaticResource ScrollViewerStyle}">
<ScrollViewer x:Name="YearViewScrollViewer" UseLayoutRounding="False" Opacity="0" Visibility="Collapsed" IsFocusEngagementEnabled="True" Style="{StaticResource ScrollViewerStyle}">
<ScrollViewer.RenderTransform>
<ScaleTransform x:Name="YearViewTransform" CenterX="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.CenterX}" CenterY="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.CenterY}" />
</ScrollViewer.RenderTransform>
<CalendarPanel x:Name="YearViewPanel" />
</ScrollViewer>
<ScrollViewer x:Name="DecadeViewScrollViewer" UseLayoutRounding="False" IsFocusEngagementEnabled="True" Visibility="Collapsed" Style="{StaticResource ScrollViewerStyle}">
<ScrollViewer x:Name="DecadeViewScrollViewer" UseLayoutRounding="False" IsFocusEngagementEnabled="True" Opacity="0" Visibility="Collapsed" Style="{StaticResource ScrollViewerStyle}">
<ScrollViewer.RenderTransform>
<ScaleTransform x:Name="DecadeViewTransform" CenterX="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.CenterX}" CenterY="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.CenterY}" />
</ScrollViewer.RenderTransform>
Expand Down Expand Up @@ -20683,8 +20695,8 @@
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Path x:Name="LeftRadiusRender" x:Load="False" Grid.Column="0" Visibility="Collapsed" VerticalAlignment="Bottom" Height="{Binding Source={ThemeResource OverlayCornerRadius}, Path=BottomLeft}" Margin="{Binding Source={ThemeResource OverlayCornerRadius},&#xA; Converter={StaticResource TabViewLeftInsetCornerConverter}}" Stretch="Uniform" Fill="{ThemeResource TabViewItemHeaderBackgroundSelected}" Data="M4 0 L4 4 L0 4 A4,4 90 0 0 4 0 Z" />
<Path x:Name="RightRadiusRender" x:Load="False" Grid.Column="2" Visibility="Collapsed" VerticalAlignment="Bottom" Height="{Binding Source={ThemeResource OverlayCornerRadius}, Path=BottomRight}" Margin="{Binding Source={ThemeResource OverlayCornerRadius},&#xA; Converter={StaticResource TabViewRightInsetCornerConverter}}" Stretch="Uniform" Fill="{ThemeResource TabViewItemHeaderBackgroundSelected}" Data="M0 0 L0 4 L4 4 A4 4 90 0 1 0 0 Z" />
<Path x:Name="LeftRadiusRender" x:Load="False" Grid.Column="0" Visibility="Collapsed" VerticalAlignment="Bottom" Height="{Binding Source={ThemeResource OverlayCornerRadius}, Path=BottomLeft}" Margin="{Binding Source={ThemeResource OverlayCornerRadius},&#xD;&#xA; Converter={StaticResource TabViewLeftInsetCornerConverter}}" Stretch="Uniform" Fill="{ThemeResource TabViewItemHeaderBackgroundSelected}" Data="M4 0 L4 4 L0 4 A4,4 90 0 0 4 0 Z" />
<Path x:Name="RightRadiusRender" x:Load="False" Grid.Column="2" Visibility="Collapsed" VerticalAlignment="Bottom" Height="{Binding Source={ThemeResource OverlayCornerRadius}, Path=BottomRight}" Margin="{Binding Source={ThemeResource OverlayCornerRadius},&#xD;&#xA; Converter={StaticResource TabViewRightInsetCornerConverter}}" Stretch="Uniform" Fill="{ThemeResource TabViewItemHeaderBackgroundSelected}" Data="M0 0 L0 4 L4 4 A4 4 90 0 1 0 0 Z" />
<Border x:Name="TabSeparator" HorizontalAlignment="Right" Width="1" Grid.Column="1" BorderBrush="{ThemeResource TabViewItemSeparator}" BorderThickness="1" Margin="{ThemeResource TabViewItemSeparatorMargin}" />
<Grid x:Name="TabContainer" Grid.Column="1" Background="{ThemeResource TabViewItemHeaderBackground}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Control.IsTemplateFocusTarget="True" Padding="{ThemeResource TabViewItemHeaderPadding}" CornerRadius="{Binding Source={ThemeResource OverlayCornerRadius}, Converter={StaticResource TopCornerRadiusFilterConverter}}" FocusVisualMargin="{TemplateBinding FocusVisualMargin}">
<Grid.ColumnDefinitions>
Expand Down

0 comments on commit 9179695

Please sign in to comment.