Skip to content

Commit

Permalink
UI: 优化 SettingsExpander 的动画
Browse files Browse the repository at this point in the history
  • Loading branch information
@Blinue
Blinue committed Dec 12, 2023
1 parent 14b54bb commit e6afe2a
Show file tree
Hide file tree
Showing 2 changed files with 17 additions and 64 deletions.
6 changes: 3 additions & 3 deletions src/Magpie.App/ScalingConfigurationPage.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,9 +42,6 @@
x:Load="{x:Bind HasFloatParams, Mode=OneTime}"
ItemsSource="{x:Bind FloatParams, Mode=OneTime}"
SelectionMode="None">
<ListView.ItemContainerTransitions>
<TransitionCollection />
</ListView.ItemContainerTransitions>
<ListView.Resources>
<Style TargetType="ListViewItem">
<Setter Property="Margin" Value="0" />
Expand All @@ -54,6 +51,9 @@
<Setter Property="IsTabStop" Value="False" />
</Style>
</ListView.Resources>
<ListView.ItemContainerTransitions>
<TransitionCollection />
</ListView.ItemContainerTransitions>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Spacing="8" />
Expand Down
75 changes: 14 additions & 61 deletions src/Magpie.App/SettingsExpander.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,9 @@
<Setter Property="IsTabStop" Value="False" />
</Style>
</ListView.Resources>
<ListView.ItemContainerTransitions>
<TransitionCollection />
</ListView.ItemContainerTransitions>
</ListView>
<ContentPresenter Grid.Row="2"
Content="{TemplateBinding ItemsFooter}" />
Expand Down Expand Up @@ -188,47 +191,6 @@
</Border>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ExpandStates">
<VisualState x:Name="ExpandUp">
<VisualState.Setters>
<Setter Target="ExpanderHeader.CornerRadius" Value="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomCornerRadiusFilterConverter}}" />
</VisualState.Setters>
<VisualState.Storyboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent"
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)">
<DiscreteDoubleKeyFrame KeyTime="0"
Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ContentHeight}" />
<SplineDoubleKeyFrame KeySpline="0.0, 0.0, 0.0, 1.0"
KeyTime="0:0:0.333"
Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState.Storyboard>
</VisualState>
<VisualState x:Name="CollapseDown">
<VisualState.Storyboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0.2"
Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent"
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)">
<DiscreteDoubleKeyFrame KeyTime="0"
Value="0" />
<SplineDoubleKeyFrame KeySpline="1.0, 1.0, 0.0, 1.0"
KeyTime="0:0:0.167"
Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ContentHeight}" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState.Storyboard>
</VisualState>
<VisualState x:Name="ExpandDown">
<VisualState.Setters>
<Setter Target="ExpanderHeader.CornerRadius" Value="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TopCornerRadiusFilterConverter}}" />
Expand Down Expand Up @@ -256,9 +218,14 @@
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0.167"
<DiscreteObjectKeyFrame KeyTime="0:0:0.048"
Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Storyboard.TargetName="ExpanderContent"
Storyboard.TargetProperty="Opacity"
From="1"
To="0"
Duration="0:0:0.048" />
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent"
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)">
<DiscreteDoubleKeyFrame KeyTime="0"
Expand All @@ -271,20 +238,6 @@
</VisualState.Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ExpandDirectionStates">
<VisualState x:Name="Down" />
<VisualState x:Name="Up">
<VisualState.Setters>
<Setter Target="ExpanderHeader.Style" Value="{StaticResource ExpanderHeaderUpStyle}" />
<Setter Target="ExpanderContent.BorderThickness" Value="{StaticResource ExpanderContentUpBorderThickness}" />
<Setter Target="ExpanderContent.CornerRadius" Value="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TopCornerRadiusFilterConverter}}" />
<Setter Target="ExpanderHeader.(Grid.Row)" Value="1" />
<Setter Target="ExpanderContentClip.(Grid.Row)" Value="0" />
<Setter Target="Row0.Height" Value="*" />
<Setter Target="Row1.Height" Value="Auto" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
Expand Down Expand Up @@ -346,7 +299,7 @@
Height="16"
HorizontalAlignment="Center"
VerticalAlignment="Center"
muxc:AnimatedIcon.State="NormalOff"
muxc:AnimatedIcon.State="PointerOverOff"
Foreground="{ThemeResource ExpanderChevronForeground}"
RenderTransformOrigin="0.5, 0.5">
<animatedvisuals:AnimatedChevronUpDownSmallVisualSource />
Expand Down Expand Up @@ -436,7 +389,7 @@
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<VisualState.Setters>
<Setter Target="ExpandCollapseChevron.(muxc:AnimatedIcon.State)" Value="PressedOff" />
<Setter Target="ExpandCollapseChevron.(muxc:AnimatedIcon.State)" Value="PointerOverOff" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Disabled">
Expand Down Expand Up @@ -482,7 +435,7 @@
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<VisualState.Setters>
<Setter Target="ExpandCollapseChevron.(muxc:AnimatedIcon.State)" Value="NormalOn" />
<Setter Target="ExpandCollapseChevron.(muxc:AnimatedIcon.State)" Value="PointerOverOn" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="CheckedPointerOver">
Expand Down Expand Up @@ -536,7 +489,7 @@
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<VisualState.Setters>
<Setter Target="ExpandCollapseChevron.(muxc:AnimatedIcon.State)" Value="PressedOn" />
<Setter Target="ExpandCollapseChevron.(muxc:AnimatedIcon.State)" Value="PointerOverOn" />
</VisualState.Setters>
</VisualState>

Expand All @@ -559,7 +512,7 @@
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<VisualState.Setters>
<Setter Target="ExpandCollapseChevron.(muxc:AnimatedIcon.State)" Value="NormalOn" />
<Setter Target="ExpandCollapseChevron.(muxc:AnimatedIcon.State)" Value="PointerOverOn" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Indeterminate" />
Expand Down

0 comments on commit e6afe2a

Please sign in to comment.