Add RepositionThemeTransition to sample pages for smoother layout updates

WinUIGallery/Controls/SamplePage.xaml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Page
+    x:Class="WinUIGallery.Controls.SamplePage"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d"/>
+

WinUIGallery/Controls/SamplePage.xaml.cs

@@ -0,0 +1,45 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Media.Animation;
+
+
+namespace WinUIGallery.Controls;
+
+public partial class SamplePage : Page
+{
+    public SamplePage()
+    {
+        InitializeComponent();
+        Loaded += SamplePage_Loaded;
+    }
+
+    private void SamplePage_Loaded(object sender, RoutedEventArgs e)
+    {
+        if (Content is Panel panel)
+        {
+            if (panel.ChildrenTransitions == null)
+            {
+                panel.ChildrenTransitions = new TransitionCollection();
+            }
+
+            // Add RepositionThemeTransition only once
+            bool hasReposition = false;
+            foreach (var t in panel.ChildrenTransitions)
+            {
+                if (t is RepositionThemeTransition)
+                {
+                    hasReposition = true;
+                    break;
+                }
+            }
+
+            if (!hasReposition)
+            {
+                panel.ChildrenTransitions.Add(new RepositionThemeTransition());
+            }
+        }
+    }
+}

WinUIGallery/Samples/ControlPages/Accessibility/AccessibilityKeyboardPage.xaml

@@ -31,6 +31,10 @@
     </Page.Resources>
 
     <StackPanel Spacing="12">
+        <StackPanel.ChildrenTransitions>
+            <RepositionThemeTransition />
+        </StackPanel.ChildrenTransitions>
+
         <RichTextBlock>
             <Paragraph>
                 Accessibility is about building experiences that make your Windows application usable by people of

WinUIGallery/Samples/ControlPages/Accessibility/AccessibilityScreenReaderPage.xaml

@@ -32,6 +32,10 @@
     </Page.Resources>
 
     <StackPanel Spacing="12">
+        <StackPanel.ChildrenTransitions>
+            <RepositionThemeTransition />
+        </StackPanel.ChildrenTransitions>
+
         <RichTextBlock>
             <Paragraph>
                 Accessibility is about building experiences that make your Windows application usable by people of

WinUIGallery/Samples/ControlPages/AcrylicPage.xaml

@@ -36,6 +36,10 @@
         </ResourceDictionary>
     </Page.Resources>
     <StackPanel>
+        <StackPanel.ChildrenTransitions>
+            <RepositionThemeTransition />
+        </StackPanel.ChildrenTransitions>
+
         <RichTextBlock>
             <Paragraph>
                 Acrylic Brush might fall back to SolidColorbrush in certain scenarios.

WinUIGallery/Samples/ControlPages/AnimatedIconPage.xaml

@@ -9,6 +9,10 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     mc:Ignorable="d">
     <StackPanel>
+        <StackPanel.ChildrenTransitions>
+            <RepositionThemeTransition />
+        </StackPanel.ChildrenTransitions>
+
         <controls:ControlExample
             x:Name="AnimatedIconExample1"
             CSharpSource="Icons/AnimatedIconSample1_cs.txt"

WinUIGallery/Samples/ControlPages/AppBarButtonPage.xaml

@@ -18,6 +18,10 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     mc:Ignorable="d">
     <StackPanel>
+        <StackPanel.ChildrenTransitions>
+            <RepositionThemeTransition />
+        </StackPanel.ChildrenTransitions>
+
         <controls:ControlExample x:Name="Example1" HeaderText="An AppBarButton with a symbol icon.">
             <StackPanel Orientation="Horizontal">
                 <!--  App bar button with symbol icon.  -->

WinUIGallery/Samples/ControlPages/AppBarToggleButtonPage.xaml

@@ -18,6 +18,10 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     mc:Ignorable="d">
     <StackPanel>
+        <StackPanel.ChildrenTransitions>
+            <RepositionThemeTransition />
+        </StackPanel.ChildrenTransitions>
+
         <controls:ControlExample x:Name="Example1" HeaderText="An AppBarToggleButton with a symbol icon.">
             <controls:ControlExample.Example>
                 <StackPanel Orientation="Horizontal">

WinUIGallery/Samples/ControlPages/AppNotificationPage.xaml

@@ -9,6 +9,10 @@
       mc:Ignorable="d">
 
     <StackPanel>
+        <StackPanel.ChildrenTransitions>
+            <RepositionThemeTransition />
+        </StackPanel.ChildrenTransitions>
+
         <StackPanel Spacing="8"
                     Margin="0,16,0,0">
             <InfoBar IsOpen="True"

WinUIGallery/Samples/ControlPages/AppWindowPage.xaml

@@ -9,6 +9,10 @@
     mc:Ignorable="d">
 
     <StackPanel>
+        <StackPanel.ChildrenTransitions>
+            <RepositionThemeTransition />
+        </StackPanel.ChildrenTransitions>
+
         <TextBlock
             Margin="0,16,0,-16"
             Style="{ThemeResource SubtitleTextBlockStyle}"

WinUIGallery/Samples/ControlPages/AutoSuggestBoxPage.xaml

@@ -8,6 +8,10 @@
     x:Name="pageRoot"
     mc:Ignorable="d">
     <StackPanel>
+        <StackPanel.ChildrenTransitions>
+            <RepositionThemeTransition />
+        </StackPanel.ChildrenTransitions>
+
         <controls:ControlExample x:Name="Example1" HeaderText="A basic autosuggest box.">
             <StackPanel Orientation="Horizontal">
                 <AutoSuggestBox

WinUIGallery/Samples/ControlPages/BadgeNotificationManagerPage.xaml

@@ -10,6 +10,10 @@
     mc:Ignorable="d">
 
     <StackPanel>
+        <StackPanel.ChildrenTransitions>
+            <RepositionThemeTransition />
+        </StackPanel.ChildrenTransitions>
+
         <InfoBar Margin="0,10,0,0" IsOpen="True" IsClosable="False" Severity="Warning" Title="BadgeNotificationManager is not available in unpackaged mode." Message="This API requires the app to be running in packaged mode (MSIX)."/>
         <controls:ControlExample HeaderText="Setting badge notifications with count">
             <StackPanel Spacing="8">

WinUIGallery/Samples/ControlPages/BreadcrumbBarPage.xaml

@@ -19,6 +19,10 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     mc:Ignorable="d">
     <StackPanel>
+        <StackPanel.ChildrenTransitions>
+            <RepositionThemeTransition />
+        </StackPanel.ChildrenTransitions>
+
         <controls:ControlExample x:Name="Example1" HeaderText="A BreadcrumbBar control">
             <controls:ControlExample.Example>
                 <BreadcrumbBar x:Name="BreadcrumbBar1" ItemsSource="{x:Bind FoldersString}"/>

WinUIGallery/Samples/ControlPages/ButtonPage.xaml

@@ -18,6 +18,10 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     mc:Ignorable="d">
     <StackPanel>
+        <StackPanel.ChildrenTransitions>
+            <RepositionThemeTransition />
+        </StackPanel.ChildrenTransitions>
+
         <controls:ControlExample x:Name="Example1" HeaderText="A simple Button with text content.">
             <controls:ControlExample.Example>
                 <Button

WinUIGallery/Samples/ControlPages/CheckBoxPage.xaml

@@ -18,6 +18,10 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     mc:Ignorable="d">
     <StackPanel>
+        <StackPanel.ChildrenTransitions>
+            <RepositionThemeTransition />
+        </StackPanel.ChildrenTransitions>
+
         <controls:ControlExample x:Name="Example1" HeaderText="A 2-state CheckBox.">
             <controls:ControlExample.Example>
                 <StackPanel Orientation="Horizontal">

WinUIGallery/Samples/ControlPages/ClipboardPage.xaml

@@ -19,6 +19,10 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     mc:Ignorable="d">
     <StackPanel>
+        <StackPanel.ChildrenTransitions>
+            <RepositionThemeTransition />
+        </StackPanel.ChildrenTransitions>
+
         <!--  COPY TO CLIPBOARD  -->
         <controls:ControlExample x:Name="Example1" HeaderText="Copy text to the Clipboard">
 

WinUIGallery/Samples/ControlPages/ComboBoxPage.xaml

@@ -19,6 +19,10 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     mc:Ignorable="d">
     <StackPanel>
+        <StackPanel.ChildrenTransitions>
+            <RepositionThemeTransition />
+        </StackPanel.ChildrenTransitions>
+
         <controls:ControlExample HeaderText="A ComboBox with items defined inline and its width set.">
             <controls:ControlExample.Example>
                 <StackPanel>

WinUIGallery/Samples/ControlPages/ConnectedAnimationPage.xaml

@@ -8,7 +8,10 @@
     x:Name="pageRoot"
     mc:Ignorable="d">
     <StackPanel>
-
+        <StackPanel.ChildrenTransitions>
+            <RepositionThemeTransition />
+        </StackPanel.ChildrenTransitions>
+
         <controls:ControlExample
             CSharpSource="Motion/ConnectedAnimation/ConnectedAnimationSample1_cs.txt"
             HeaderText="A connected animation between a list page and a detail page"

WinUIGallery/Samples/ControlPages/ContentDialogPage.xaml

@@ -7,6 +7,10 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     mc:Ignorable="d">
     <StackPanel>
+        <StackPanel.ChildrenTransitions>
+            <RepositionThemeTransition />
+        </StackPanel.ChildrenTransitions>
+
         <controls:ControlExample
             x:Name="Example1"
             CSharpSource="ContentDialog/ContentDialogSample1_cs.txt"

WinUIGallery/Samples/ControlPages/DatePickerPage.xaml

@@ -18,6 +18,10 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     mc:Ignorable="d">
     <StackPanel>
+        <StackPanel.ChildrenTransitions>
+            <RepositionThemeTransition />
+        </StackPanel.ChildrenTransitions>
+
         <controls:ControlExample x:Name="Example1" HeaderText="A simple DatePicker with a header.">
             <controls:ControlExample.Example>
                 <DatePicker Header="Pick a date" />

WinUIGallery/Samples/ControlPages/DropDownButtonPage.xaml

@@ -8,6 +8,10 @@
     mc:Ignorable="d">
 
     <StackPanel>
+        <StackPanel.ChildrenTransitions>
+            <RepositionThemeTransition />
+        </StackPanel.ChildrenTransitions>
+
         <controls:ControlExample HeaderText="Simple DropDownButton" XamlSource="Buttons/DropDown/DropDownButton_Simple.txt">
             <StackPanel x:Name="Control1" Orientation="Horizontal">
                 <DropDownButton Content="Email">

WinUIGallery/Samples/ControlPages/EasingFunctionPage.xaml

@@ -10,6 +10,10 @@
     mc:Ignorable="d">
 
     <StackPanel>
+        <StackPanel.ChildrenTransitions>
+            <RepositionThemeTransition />
+        </StackPanel.ChildrenTransitions>
+
         <RichTextBlock Style="{ThemeResource BodyRichTextBlockStyle}">
             <Paragraph>- Use the Standard easing function for animating general property changes.</Paragraph>
             <Paragraph>- Use the Accelerate easing function to animate objects that are exiting the scene.</Paragraph>

WinUIGallery/Samples/ControlPages/ExpanderPage.xaml

@@ -19,6 +19,10 @@
     mc:Ignorable="d">
 
     <StackPanel>
+        <StackPanel.ChildrenTransitions>
+            <RepositionThemeTransition />
+        </StackPanel.ChildrenTransitions>
+
         <controls:ControlExample x:Name="Example1" HeaderText="An Expander with text in the header and content areas">
             <controls:ControlExample.Example>
                 <Expander

WinUIGallery/Samples/ControlPages/FlipViewPage.xaml

@@ -17,6 +17,10 @@
     xmlns:models="using:WinUIGallery.Models"
     xmlns:pages="using:WinUIGallery.Pages">
     <StackPanel>
+        <StackPanel.ChildrenTransitions>
+            <RepositionThemeTransition />
+        </StackPanel.ChildrenTransitions>
+
         <controls:ControlExample
             x:Name="Example1"
             ExampleHeight="Auto"

WinUIGallery/Samples/ControlPages/FlyoutPage.xaml

@@ -25,6 +25,10 @@
         </Flyout>
     </Page.Resources>
     <StackPanel>
+        <StackPanel.ChildrenTransitions>
+            <RepositionThemeTransition />
+        </StackPanel.ChildrenTransitions>
+
         <controls:ControlExample HeaderText="A button with a flyout">
             <controls:ControlExample.Example>
                 <Button x:Name="Control1" Content="Empty cart">

WinUIGallery/Samples/ControlPages/Fundamentals/BindingPage.xaml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8" ?>
-<Page
+<controls:SamplePage
     x:Class="WinUIGallery.ControlPages.BindingPage"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
@@ -27,7 +27,8 @@
                     <Run Text="and" />
                     <Run FontFamily="Consolas" Text="Binding" />
                     <Run Text="by visiting" />
-                     <Hyperlink NavigateUri="https://learn.microsoft.com/windows/apps/develop/data-binding/data-binding-in-depth#xbind-and-binding-feature-comparison">Microsoft Learn</Hyperlink>.</Paragraph>
+                    <Hyperlink NavigateUri="https://learn.microsoft.com/windows/apps/develop/data-binding/data-binding-in-depth#xbind-and-binding-feature-comparison">Microsoft Learn</Hyperlink> .
+                </Paragraph>
             </RichTextBlock>
         </StackPanel>
 
@@ -208,4 +209,4 @@ public YourPage()
             </controls:ControlExample.CSharp>
         </controls:ControlExample>
     </StackPanel>
-</Page>
+</controls:SamplePage>

WinUIGallery/Samples/ControlPages/Fundamentals/BindingPage.xaml.cs

@@ -1,13 +1,13 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
 
-using Microsoft.UI.Xaml.Controls;
 using System;
 using System.ComponentModel;
+using WinUIGallery.Controls;
 
 namespace WinUIGallery.ControlPages;
 
-public sealed partial class BindingPage : Page
+public sealed partial class BindingPage : SamplePage
 {
     public string GreetingMessage { get; set; } = "Hello, WinUI 3!";
 

WinUIGallery/Samples/ControlPages/Fundamentals/CustomUserControlsPage.xaml

@@ -10,6 +10,10 @@
     mc:Ignorable="d">
 
     <StackPanel>
+        <StackPanel.ChildrenTransitions>
+            <RepositionThemeTransition />
+        </StackPanel.ChildrenTransitions>
+
         <TextBlock Text="Custom (templated) control" Style="{ThemeResource SubtitleTextBlockStyle}" Margin="0,8" />
         <StackPanel Spacing="8">
             <RichTextBlock>

WinUIGallery/Samples/ControlPages/Fundamentals/TemplatesPage.xaml

@@ -19,6 +19,10 @@
     </Page.Resources>
 
     <StackPanel>
+        <StackPanel.ChildrenTransitions>
+            <RepositionThemeTransition />
+        </StackPanel.ChildrenTransitions>
+
         <StackPanel Margin="0,12,0,0" Spacing="12">
             <RichTextBlock>
                 <Paragraph FontWeight="SemiBold">Placement of Templates</Paragraph>

WinUIGallery/Samples/ControlPages/Fundamentals/XamlResourcesPage.xaml

@@ -15,6 +15,10 @@
     </Page.Resources>
 
     <StackPanel>
+        <StackPanel.ChildrenTransitions>
+            <RepositionThemeTransition />
+        </StackPanel.ChildrenTransitions>
+
         <TextBlock
             Margin="0,12,0,4"
             Style="{ThemeResource SubtitleTextBlockStyle}"

WinUIGallery/Samples/ControlPages/Fundamentals/XamlStylesPage.xaml

@@ -9,6 +9,10 @@
     mc:Ignorable="d">
 
     <StackPanel>
+        <StackPanel.ChildrenTransitions>
+            <RepositionThemeTransition />
+        </StackPanel.ChildrenTransitions>
+
         <StackPanel Margin="0,12,0,0" Spacing="12">
             <RichTextBlock>
                 <Paragraph>The definition of styles is similiar to other resources: app-level, page-level, control-level.</Paragraph>