From dae052037568bb2282affe04546cbc501c196d23 Mon Sep 17 00:00:00 2001
From: Niels Laute <niels.laute@live.nl>
Date: Wed, 11 Jan 2023 17:45:06 +0100
Subject: [PATCH] Adding animations (#23208)

---
 src/settings-ui/Settings.UI/App.xaml                |  5 +++++
 .../Controls/SettingsGroup/SettingsGroup.xaml       | 13 ++++---------
 .../SettingsPageControl/SettingsPageControl.xaml    |  2 +-
 .../Settings.UI/Views/AlwaysOnTopPage.xaml          |  2 +-
 src/settings-ui/Settings.UI/Views/AwakePage.xaml    |  2 +-
 .../Settings.UI/Views/ColorPickerPage.xaml          |  2 +-
 .../Settings.UI/Views/FancyZonesPage.xaml           |  2 +-
 .../Settings.UI/Views/FileLocksmithPage.xaml        |  2 +-
 src/settings-ui/Settings.UI/Views/GeneralPage.xaml  |  2 +-
 src/settings-ui/Settings.UI/Views/HostsPage.xaml    |  2 +-
 .../Settings.UI/Views/ImageResizerPage.xaml         |  2 +-
 .../Settings.UI/Views/KeyboardManagerPage.xaml      |  2 +-
 .../Settings.UI/Views/MeasureToolPage.xaml          |  2 +-
 .../Settings.UI/Views/MouseUtilsPage.xaml           |  2 +-
 .../Settings.UI/Views/PowerAccentPage.xaml          |  2 +-
 .../Settings.UI/Views/PowerLauncherPage.xaml        |  2 +-
 src/settings-ui/Settings.UI/Views/PowerOcrPage.xaml |  5 ++---
 .../Settings.UI/Views/PowerPreviewPage.xaml         |  2 +-
 .../Settings.UI/Views/PowerRenamePage.xaml          |  3 +--
 .../Settings.UI/Views/ShortcutGuidePage.xaml        |  2 +-
 .../Settings.UI/Views/VideoConference.xaml          |  2 +-
 21 files changed, 29 insertions(+), 31 deletions(-)

diff --git a/src/settings-ui/Settings.UI/App.xaml b/src/settings-ui/Settings.UI/App.xaml
index 78ae97dba8..3858e4f7d2 100644
--- 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>
diff --git a/src/settings-ui/Settings.UI/Controls/SettingsGroup/SettingsGroup.xaml b/src/settings-ui/Settings.UI/Controls/SettingsGroup/SettingsGroup.xaml
index be4c302813..d3462c6655 100644
--- 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" />
diff --git a/src/settings-ui/Settings.UI/Controls/SettingsPageControl/SettingsPageControl.xaml b/src/settings-ui/Settings.UI/Controls/SettingsPageControl/SettingsPageControl.xaml
index c04dc9fc97..549e92c44d 100644
--- 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">
 
diff --git a/src/settings-ui/Settings.UI/Views/AlwaysOnTopPage.xaml b/src/settings-ui/Settings.UI/Views/AlwaysOnTopPage.xaml
index c856bdbe0b..ee26f9fb94 100644
--- 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}"
diff --git a/src/settings-ui/Settings.UI/Views/AwakePage.xaml b/src/settings-ui/Settings.UI/Views/AwakePage.xaml
index c104d08e37..a084485e2c 100644
--- 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}"
diff --git a/src/settings-ui/Settings.UI/Views/ColorPickerPage.xaml b/src/settings-ui/Settings.UI/Views/ColorPickerPage.xaml
index 7e39d09dfb..52da0fc95a 100644
--- 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}"
diff --git a/src/settings-ui/Settings.UI/Views/FancyZonesPage.xaml b/src/settings-ui/Settings.UI/Views/FancyZonesPage.xaml
index 82eaf120b2..7c0d451bb8 100644
--- 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}"
diff --git a/src/settings-ui/Settings.UI/Views/FileLocksmithPage.xaml b/src/settings-ui/Settings.UI/Views/FileLocksmithPage.xaml
index 9a341edd86..efc8845d16 100644
--- 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}"
diff --git a/src/settings-ui/Settings.UI/Views/GeneralPage.xaml b/src/settings-ui/Settings.UI/Views/GeneralPage.xaml
index 8a3dcb7eb0..fdb0bcaefd 100644
--- 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">
diff --git a/src/settings-ui/Settings.UI/Views/HostsPage.xaml b/src/settings-ui/Settings.UI/Views/HostsPage.xaml
index 354ea752dc..88476a47d2 100644
--- 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}"
diff --git a/src/settings-ui/Settings.UI/Views/ImageResizerPage.xaml b/src/settings-ui/Settings.UI/Views/ImageResizerPage.xaml
index 7b53a4f65a..01ab223005 100644
--- 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}"
diff --git a/src/settings-ui/Settings.UI/Views/KeyboardManagerPage.xaml b/src/settings-ui/Settings.UI/Views/KeyboardManagerPage.xaml
index c6a97e667c..1b6a42bc5c 100644
--- 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}"
diff --git a/src/settings-ui/Settings.UI/Views/MeasureToolPage.xaml b/src/settings-ui/Settings.UI/Views/MeasureToolPage.xaml
index 96856f0ee0..f4315200d5 100644
--- 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}"
diff --git a/src/settings-ui/Settings.UI/Views/MouseUtilsPage.xaml b/src/settings-ui/Settings.UI/Views/MouseUtilsPage.xaml
index d1599eb14b..5acdf49a4d 100644
--- 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"
diff --git a/src/settings-ui/Settings.UI/Views/PowerAccentPage.xaml b/src/settings-ui/Settings.UI/Views/PowerAccentPage.xaml
index 00bed3803f..c9b640ac30 100644
--- 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}"
diff --git a/src/settings-ui/Settings.UI/Views/PowerLauncherPage.xaml b/src/settings-ui/Settings.UI/Views/PowerLauncherPage.xaml
index 18c23d0169..c2e0686187 100644
--- 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}"
diff --git a/src/settings-ui/Settings.UI/Views/PowerOcrPage.xaml b/src/settings-ui/Settings.UI/Views/PowerOcrPage.xaml
index e2e0925fca..f116b58891 100644
--- 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}"
diff --git a/src/settings-ui/Settings.UI/Views/PowerPreviewPage.xaml b/src/settings-ui/Settings.UI/Views/PowerPreviewPage.xaml
index d0c9232648..3df5647bfa 100644
--- 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"
diff --git a/src/settings-ui/Settings.UI/Views/PowerRenamePage.xaml b/src/settings-ui/Settings.UI/Views/PowerRenamePage.xaml
index 4462b7e464..6d3d9639ee 100644
--- 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"
diff --git a/src/settings-ui/Settings.UI/Views/ShortcutGuidePage.xaml b/src/settings-ui/Settings.UI/Views/ShortcutGuidePage.xaml
index a8411cda3e..7b74c6badf 100644
--- 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}"
diff --git a/src/settings-ui/Settings.UI/Views/VideoConference.xaml b/src/settings-ui/Settings.UI/Views/VideoConference.xaml
index 63ca138408..ade28abe6a 100644
--- 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"