Adding animations (#23208)

2025-01-19 06:53:26 +08:00 · 2023-01-11 17:45:06 +01:00 · 2023-01-11 17:45:06 +01:00 · dae0520375
commit dae0520375
parent eb2968de6e
21 changed files with 29 additions and 31 deletions
--- a/src/settings-ui/Settings.UI/App.xaml
+++ b/src/settings-ui/Settings.UI/App.xaml
@ -57,6 +57,11 @@
                BasedOn="{StaticResource DefaultCheckBoxStyle}"
                TargetType="controls:CheckBoxWithDescriptionControl" />
            <!--  Other app resources here  -->
+
+            <TransitionCollection x:Key="SettingsCardsAnimations">
+                <EntranceThemeTransition FromVerticalOffset="50"/> <!-- Animates cards when loaded-->
+                <RepositionThemeTransition  IsStaggeringEnabled="False" /><!-- Smoothly animates individual cards upon whenever Expanders are expanded/collapsed -->
+            </TransitionCollection>
        </ResourceDictionary>
    </Application.Resources>
 </Application>
--- a/src/settings-ui/Settings.UI/Controls/SettingsGroup/SettingsGroup.xaml
+++ b/src/settings-ui/Settings.UI/Controls/SettingsGroup/SettingsGroup.xaml
@ -8,6 +8,7 @@
            <Setter.Value>
                <ItemsPanelTemplate>
                    <StackPanel
+                        ChildrenTransitions="{StaticResource SettingsCardsAnimations}"
                        Orientation="Vertical"
                        Spacing="2" />
                </ItemsPanelTemplate>
@ -41,25 +42,19 @@
                            Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                            TextWrapping="WrapWholeWords">
                            <ContentPresenter.Resources>
-                                <Style
-                                    BasedOn="{StaticResource CaptionTextBlockStyle}"
-                                    TargetType="TextBlock">
+                                <Style BasedOn="{StaticResource CaptionTextBlockStyle}" TargetType="TextBlock">
                                    <Style.Setters>
                                        <Setter Property="TextWrapping" Value="WrapWholeWords" />
                                    </Style.Setters>
                                </Style>
-                                <Style
-                                    BasedOn="{StaticResource TextButtonStyle}"
-                                    TargetType="HyperlinkButton">
+                                <Style BasedOn="{StaticResource TextButtonStyle}" TargetType="HyperlinkButton">
                                    <Style.Setters>
                                        <Setter Property="Padding" Value="0,0,0,0" />
                                    </Style.Setters>
                                </Style>
                            </ContentPresenter.Resources>
                        </ContentPresenter>
-                        <ItemsPresenter
-                            Grid.Row="2"
-                            Margin="0,8,0,0" />
+                        <ItemsPresenter Grid.Row="2" Margin="0,8,0,0" />
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />
--- a/src/settings-ui/Settings.UI/Controls/SettingsPageControl/SettingsPageControl.xaml
+++ b/src/settings-ui/Settings.UI/Controls/SettingsPageControl/SettingsPageControl.xaml
@ -38,7 +38,7 @@
            Text="{x:Bind ModuleTitle}" />

        <ScrollViewer Grid.Row="1">
-            <Grid
+            <Grid ChildrenTransitions="{StaticResource SettingsCardsAnimations}"
                Padding="0,0,20,48"
                RowSpacing="24">

--- a/src/settings-ui/Settings.UI/Views/AlwaysOnTopPage.xaml
+++ b/src/settings-ui/Settings.UI/Views/AlwaysOnTopPage.xaml
@ -15,7 +15,7 @@
        IsTabStop="False"
        ModuleImageSource="ms-appx:///Assets/Modules/AlwaysOnTop.png">
        <controls:SettingsPageControl.ModuleContent>
-            <StackPanel Orientation="Vertical">
+            <StackPanel Orientation="Vertical" ChildrenTransitions="{StaticResource SettingsCardsAnimations}">
                <labs:SettingsCard
                    x:Uid="AlwaysOnTop_EnableToggleControl_HeaderText"
                    HeaderIcon="{ui:BitmapIcon Source=/Assets/FluentIcons/FluentIconsAlwaysOnTop.png}"
--- a/src/settings-ui/Settings.UI/Views/AwakePage.xaml
+++ b/src/settings-ui/Settings.UI/Views/AwakePage.xaml
@ -20,7 +20,7 @@
        IsTabStop="False"
        ModuleImageSource="ms-appx:///Assets/Modules/Awake.png">
        <controls:SettingsPageControl.ModuleContent>
-            <StackPanel Orientation="Vertical">
+            <StackPanel Orientation="Vertical" ChildrenTransitions="{StaticResource SettingsCardsAnimations}">
                <labs:SettingsCard
                    x:Uid="Awake_EnableAwake"
                    HeaderIcon="{ui:BitmapIcon Source=/Assets/FluentIcons/FluentIconsAwake.png}"
--- a/src/settings-ui/Settings.UI/Views/ColorPickerPage.xaml
+++ b/src/settings-ui/Settings.UI/Views/ColorPickerPage.xaml
@ -22,7 +22,7 @@
    <controls:SettingsPageControl x:Uid="ColorPicker" ModuleImageSource="ms-appx:///Assets/Modules/ColorPicker.png">
        <controls:SettingsPageControl.ModuleContent>

-            <StackPanel x:Name="ColorPickerView" Orientation="Vertical">
+            <StackPanel x:Name="ColorPickerView" Orientation="Vertical" ChildrenTransitions="{StaticResource SettingsCardsAnimations}">
                <labs:SettingsCard
                    x:Uid="ColorPicker_EnableColorPicker"
                    HeaderIcon="{ui:BitmapIcon Source=/Assets/FluentIcons/FluentIconsColorPicker.png}"
--- a/src/settings-ui/Settings.UI/Views/FancyZonesPage.xaml
+++ b/src/settings-ui/Settings.UI/Views/FancyZonesPage.xaml
@ -14,7 +14,7 @@
        x:Uid="FancyZones"
        ModuleImageSource="ms-appx:///Assets/Modules/FancyZones.png">
        <controls:SettingsPageControl.ModuleContent>
-            <StackPanel Orientation="Vertical">
+            <StackPanel Orientation="Vertical" ChildrenTransitions="{StaticResource SettingsCardsAnimations}">
                <labs:SettingsCard
                    x:Uid="FancyZones_EnableToggleControl_HeaderText"
                    HeaderIcon="{ui:BitmapIcon Source=/Assets/FluentIcons/FluentIconsFancyZones.png}"
--- a/src/settings-ui/Settings.UI/Views/FileLocksmithPage.xaml
+++ b/src/settings-ui/Settings.UI/Views/FileLocksmithPage.xaml
@ -15,7 +15,7 @@
        x:Uid="FileLocksmith"
        ModuleImageSource="ms-appx:///Assets/Modules/FileLocksmith.png">
        <controls:SettingsPageControl.ModuleContent>
-            <StackPanel Orientation="Vertical">
+            <StackPanel Orientation="Vertical" ChildrenTransitions="{StaticResource SettingsCardsAnimations}">
                <labs:SettingsCard
                    x:Uid="FileLocksmith_Enable_FileLocksmith"
                    HeaderIcon="{ui:BitmapIcon Source=/Assets/FluentIcons/FluentIconsFileLocksmith.png}"
--- a/src/settings-ui/Settings.UI/Views/GeneralPage.xaml
+++ b/src/settings-ui/Settings.UI/Views/GeneralPage.xaml
@ -20,7 +20,7 @@
        x:Uid="General"
        ModuleImageSource="ms-appx:///Assets/Modules/PT.png">
        <controls:SettingsPageControl.ModuleContent>
-            <StackPanel Orientation="Vertical">
+            <StackPanel Orientation="Vertical" ChildrenTransitions="{StaticResource SettingsCardsAnimations}">
                <controls:SettingsGroup
                    x:Uid="General_Version"
                    Margin="0,-32,0,0">
--- a/src/settings-ui/Settings.UI/Views/HostsPage.xaml
+++ b/src/settings-ui/Settings.UI/Views/HostsPage.xaml
@ -13,7 +13,7 @@
        x:Uid="Hosts"
        ModuleImageSource="ms-appx:///Assets/Modules/AlwaysOnTop.png">
        <controls:SettingsPageControl.ModuleContent>
-            <StackPanel Orientation="Vertical">
+            <StackPanel Orientation="Vertical" ChildrenTransitions="{StaticResource SettingsCardsAnimations}">
                <labs:SettingsCard
                    x:Uid="Hosts_EnableToggleControl_HeaderText"
                    HeaderIcon="{ui:BitmapIcon Source=/Assets/FluentIcons/FluentIconsHosts.png}"
--- a/src/settings-ui/Settings.UI/Views/ImageResizerPage.xaml
+++ b/src/settings-ui/Settings.UI/Views/ImageResizerPage.xaml
@ -25,7 +25,7 @@
        x:Uid="ImageResizer"
        ModuleImageSource="ms-appx:///Assets/Modules/ImageResizer.png">
        <controls:SettingsPageControl.ModuleContent>
-            <StackPanel>
+            <StackPanel ChildrenTransitions="{StaticResource SettingsCardsAnimations}">
                <labs:SettingsCard
                    x:Uid="ImageResizer_EnableToggle"
                    HeaderIcon="{ui:BitmapIcon Source=/Assets/FluentIcons/FluentIconsImageResizer.png}"
--- a/src/settings-ui/Settings.UI/Views/KeyboardManagerPage.xaml
+++ b/src/settings-ui/Settings.UI/Views/KeyboardManagerPage.xaml
@ -60,7 +60,7 @@
        x:Uid="KeyboardManager"
        ModuleImageSource="ms-appx:///Assets/Modules/KBM.png">
        <controls:SettingsPageControl.ModuleContent>
-            <StackPanel Orientation="Vertical">
+            <StackPanel Orientation="Vertical" ChildrenTransitions="{StaticResource SettingsCardsAnimations}">
                <labs:SettingsCard
                    x:Uid="KeyboardManager_EnableToggle"
                    HeaderIcon="{ui:BitmapIcon Source=/Assets/FluentIcons/FluentIconsKeyboardManager.png}"
--- a/src/settings-ui/Settings.UI/Views/MeasureToolPage.xaml
+++ b/src/settings-ui/Settings.UI/Views/MeasureToolPage.xaml
@ -14,7 +14,7 @@
        x:Uid="MeasureTool"
        ModuleImageSource="ms-appx:///Assets/Modules/ScreenRuler.png">
        <controls:SettingsPageControl.ModuleContent>
-            <StackPanel Orientation="Vertical">
+            <StackPanel Orientation="Vertical" ChildrenTransitions="{StaticResource SettingsCardsAnimations}">
                <labs:SettingsCard
                    x:Uid="MeasureTool_EnableMeasureTool"
                    HeaderIcon="{ui:BitmapIcon Source=/Assets/FluentIcons/FluentIconsScreenRuler.png}"
--- a/src/settings-ui/Settings.UI/Views/MouseUtilsPage.xaml
+++ b/src/settings-ui/Settings.UI/Views/MouseUtilsPage.xaml
@ -17,7 +17,7 @@
        x:Uid="MouseUtils"
        ModuleImageSource="ms-appx:///Assets/Modules/MouseUtils.png">
        <controls:SettingsPageControl.ModuleContent>
-            <StackPanel Orientation="Vertical">
+            <StackPanel Orientation="Vertical" ChildrenTransitions="{StaticResource SettingsCardsAnimations}">
                <controls:SettingsGroup x:Uid="MouseUtils_FindMyMouse">
                    <labs:SettingsCard
                        x:Uid="MouseUtils_Enable_FindMyMouse"
--- a/src/settings-ui/Settings.UI/Views/PowerAccentPage.xaml
+++ b/src/settings-ui/Settings.UI/Views/PowerAccentPage.xaml
@ -15,7 +15,7 @@
        IsTabStop="False"
        ModuleImageSource="ms-appx:///Assets/Modules/PowerAccent.png">
        <controls:SettingsPageControl.ModuleContent>
-            <StackPanel Orientation="Vertical">
+            <StackPanel Orientation="Vertical" ChildrenTransitions="{StaticResource SettingsCardsAnimations}">
                <labs:SettingsCard
                    x:Uid="QuickAccent_EnableQuickAccent"
                    HeaderIcon="{ui:BitmapIcon Source=/Assets/FluentIcons/FluentIconsPowerAccent.png}"
--- a/src/settings-ui/Settings.UI/Views/PowerLauncherPage.xaml
+++ b/src/settings-ui/Settings.UI/Views/PowerLauncherPage.xaml
@ -18,7 +18,7 @@
        ModuleImageSource="ms-appx:///Assets/Modules/PowerLauncher.png">
        <controls:SettingsPageControl.ModuleContent>

-            <StackPanel Orientation="Vertical">
+            <StackPanel Orientation="Vertical" ChildrenTransitions="{StaticResource SettingsCardsAnimations}">
                <labs:SettingsCard
                    x:Uid="PowerLauncher_EnablePowerLauncher"
                    HeaderIcon="{ui:BitmapIcon Source=/Assets/FluentIcons/FluentIconsPowerToysRun.png}"
--- a/src/settings-ui/Settings.UI/Views/PowerOcrPage.xaml
+++ b/src/settings-ui/Settings.UI/Views/PowerOcrPage.xaml
@ -14,9 +14,8 @@
        x:Uid="TextExtractor"
        ModuleImageSource="ms-appx:///Assets/Modules/PowerOCR.png">
        <controls:SettingsPageControl.ModuleContent>
-            <StackPanel
-                Orientation="Vertical"
-                Spacing="2">
+            <StackPanel ChildrenTransitions="{StaticResource SettingsCardsAnimations}"
+                Orientation="Vertical" Spacing="2">
                <labs:SettingsCard
                    x:Uid="TextExtractor_EnableToggleControl_HeaderText"
                    HeaderIcon="{ui:BitmapIcon Source=/Assets/FluentIcons/FluentIconsPowerOcr.png}"
--- a/src/settings-ui/Settings.UI/Views/PowerPreviewPage.xaml
+++ b/src/settings-ui/Settings.UI/Views/PowerPreviewPage.xaml
@ -14,7 +14,7 @@
        x:Uid="FileExplorerPreview"
        ModuleImageSource="ms-appx:///Assets/Modules/PowerPreview.png">
        <controls:SettingsPageControl.ModuleContent>
-            <StackPanel Orientation="Vertical">
+            <StackPanel Orientation="Vertical" ChildrenTransitions="{StaticResource SettingsCardsAnimations}">
                <controls:SettingsGroup x:Uid="FileExplorerPreview_PreviewPane">
                    <InfoBar
                        x:Uid="FileExplorerPreview_PreviewHandlerOutlookIncompatibility"
--- a/src/settings-ui/Settings.UI/Views/PowerRenamePage.xaml
+++ b/src/settings-ui/Settings.UI/Views/PowerRenamePage.xaml
@ -15,8 +15,7 @@
        ModuleImageSource="ms-appx:///Assets/Modules/PowerRename.png">
        <controls:SettingsPageControl.ModuleContent>
            <StackPanel
-                x:Name="PowerRenameView"
-                HorizontalAlignment="Stretch"
+                x:Name="PowerRenameView" ChildrenTransitions="{StaticResource SettingsCardsAnimations}"
                Orientation="Vertical">
                <labs:SettingsCard
                    x:Uid="PowerRename_Toggle_Enable"
--- a/src/settings-ui/Settings.UI/Views/ShortcutGuidePage.xaml
+++ b/src/settings-ui/Settings.UI/Views/ShortcutGuidePage.xaml
@ -14,7 +14,7 @@
        x:Uid="ShortcutGuide"
        ModuleImageSource="ms-appx:///Assets/Modules/ShortcutGuide.png">
        <controls:SettingsPageControl.ModuleContent>
-            <StackPanel Orientation="Vertical">
+            <StackPanel Orientation="Vertical" ChildrenTransitions="{StaticResource SettingsCardsAnimations}">
                <labs:SettingsCard
                    x:Uid="ShortcutGuide_Enable"
                    HeaderIcon="{ui:BitmapIcon Source=/Assets/FluentIcons/FluentIconsShortcutGuide.png}"
--- a/src/settings-ui/Settings.UI/Views/VideoConference.xaml
+++ b/src/settings-ui/Settings.UI/Views/VideoConference.xaml
@ -22,7 +22,7 @@
        ModuleImageSource="ms-appx:///Assets/Modules/VideoConference.png">
        <controls:SettingsPageControl.ModuleContent>

-            <StackPanel Orientation="Vertical">
+            <StackPanel Orientation="Vertical" ChildrenTransitions="{StaticResource SettingsCardsAnimations}">
                <InfoBar
                    x:Uid="VideoConference_DeprecationWarning"
                    IsClosable="False"