Adding animations (#23208)

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>

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
+                                <Style BasedOn="{StaticResource CaptionTextBlockStyle}" TargetType="TextBlock">
-                                    BasedOn="{StaticResource CaptionTextBlockStyle}"
-                                    TargetType="TextBlock">
                                     <Style.Setters>
                                         <Setter Property="TextWrapping" Value="WrapWholeWords" />
                                     </Style.Setters>
                                 </Style>
-                                <Style
+                                <Style BasedOn="{StaticResource TextButtonStyle}" TargetType="HyperlinkButton">
-                                    BasedOn="{StaticResource TextButtonStyle}"
-                                    TargetType="HyperlinkButton">
                                     <Style.Setters>
                                         <Setter Property="Padding" Value="0,0,0,0" />
                                     </Style.Setters>
                                 </Style>
                             </ContentPresenter.Resources>
                         </ContentPresenter>
-                        <ItemsPresenter
+                        <ItemsPresenter Grid.Row="2" Margin="0,8,0,0" />
-                            Grid.Row="2"
-                            Margin="0,8,0,0" />
                         <VisualStateManager.VisualStateGroups>
                             <VisualStateGroup x:Name="CommonStates">
                                 <VisualState x:Name="Normal" />

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">
 

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}"

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}"

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}"

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}"

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}"

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">

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}"

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}"

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}"

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}"

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"

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}"

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}"

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
+            <StackPanel ChildrenTransitions="{StaticResource SettingsCardsAnimations}"
-                Orientation="Vertical"
+                Orientation="Vertical" Spacing="2">
-                Spacing="2">
                 <labs:SettingsCard
                     x:Uid="TextExtractor_EnableToggleControl_HeaderText"
                     HeaderIcon="{ui:BitmapIcon Source=/Assets/FluentIcons/FluentIconsPowerOcr.png}"

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"

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"
+                x:Name="PowerRenameView" ChildrenTransitions="{StaticResource SettingsCardsAnimations}"
-                HorizontalAlignment="Stretch"
                 Orientation="Vertical">
                 <labs:SettingsCard
                     x:Uid="PowerRename_Toggle_Enable"

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}"

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"