From c8cc858dab109bff56a041d27c6ea9202956dcfe Mon Sep 17 00:00:00 2001
From: Andrew KeepCoding <andrewkeepcoding@gmail.com>
Date: Tue, 23 Sep 2025 08:08:33 +0900
Subject: [PATCH 1/3] Fix SplitView sample layout issue when pane is on the
 right side

---
 .../Samples/ControlPages/SplitViewPage.xaml   | 63 ++++++++++++++++---
 .../ControlPages/SplitViewPage.xaml.cs        | 37 +++++++++++
 2 files changed, 90 insertions(+), 10 deletions(-)

diff --git a/WinUIGallery/Samples/ControlPages/SplitViewPage.xaml b/WinUIGallery/Samples/ControlPages/SplitViewPage.xaml
index f428f1f6f..f40f6fc79 100644
--- a/WinUIGallery/Samples/ControlPages/SplitViewPage.xaml
+++ b/WinUIGallery/Samples/ControlPages/SplitViewPage.xaml
@@ -5,17 +5,45 @@
     xmlns:controlPages="using:WinUIGallery.ControlPages"
     xmlns:controls="using:WinUIGallery.Controls">
     <Page.Resources>
-        <DataTemplate x:Key="NavLinkItemTemplate" x:DataType="controlPages:NavLink">
-            <StackPanel
+        <DataTemplate
+            x:Key="LeftIconNavLinkItemTemplate"
+            x:DataType="controlPages:NavLink">
+            <Grid
                 Margin="2,0,0,0"
-                AutomationProperties.Name="{x:Bind Label}"
-                Orientation="Horizontal">
-                <SymbolIcon Symbol="{x:Bind Symbol}" />
+                AutomationProperties.Name="{x:Bind Label}">
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition Width="Auto" />
+                    <ColumnDefinition Width="*" />
+                </Grid.ColumnDefinitions>
+                <SymbolIcon
+                    Grid.Column="0"
+                    Symbol="{x:Bind Symbol}" />
                 <TextBlock
+                    Grid.Column="1"
                     Margin="24,0,0,0"
                     VerticalAlignment="Center"
                     Text="{x:Bind Label}" />
-            </StackPanel>
+            </Grid>
+        </DataTemplate>
+        <DataTemplate
+            x:Key="RightIconNavLinkItemTemplate"
+            x:DataType="controlPages:NavLink">
+            <Grid
+                Margin="0,0,2,0"
+                AutomationProperties.Name="{x:Bind Label}">
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition Width="*" />
+                    <ColumnDefinition Width="Auto" />
+                </Grid.ColumnDefinitions>
+                <TextBlock
+                    Grid.Column="0"
+                    Margin="0,0,24,0"
+                    VerticalAlignment="Center"
+                    Text="{x:Bind Label}" />
+                <SymbolIcon
+                    Grid.Column="1"
+                    Symbol="{x:Bind Symbol}" />
+            </Grid>
         </DataTemplate>
     </Page.Resources>
 
@@ -28,7 +56,7 @@
                     CompactPaneLength="{x:Bind compactPaneLengthSlider.Value, Mode=OneWay}"
                     DisplayMode="CompactOverlay"
                     IsPaneOpen="{x:Bind togglePaneButton.IsChecked, Mode=TwoWay, Converter={StaticResource nullableBooleanToBooleanConverter}}"
-                    Width="400" 
+                    Width="400"
                     IsTabStop="False"
                     OpenPaneLength="{x:Bind openPaneLengthSlider.Value, Mode=OneWay}"
                     PaneBackground="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}">
@@ -51,7 +79,6 @@
                                 VerticalAlignment="Stretch"
                                 IsItemClickEnabled="True"
                                 ItemClick="NavLinksList_ItemClick"
-                                ItemTemplate="{StaticResource NavLinkItemTemplate}"
                                 ItemsSource="{x:Bind NavLinks}"
                                 SelectionMode="Single" />
                         </Grid>
@@ -79,6 +106,8 @@
                     <ToggleButton
                         x:Name="togglePaneButton"
                         Content="IsPaneOpen"
+                        Checked="togglePaneButton_CheckedChanged"
+                        Unchecked="togglePaneButton_CheckedChanged"
                         IsChecked="True" />
 
                     <ToggleSwitch
@@ -127,7 +156,8 @@
                         Minimum="128"
                         SnapsTo="StepValues"
                         StepFrequency="8"
-                        Value="256" />
+                        Value="256"
+                        ValueChanged="openPaneLengthSlider_ValueChanged"/>
 
                     <Slider
                         x:Name="compactPaneLengthSlider"
@@ -138,7 +168,8 @@
                         Minimum="24"
                         SnapsTo="StepValues"
                         StepFrequency="8"
-                        Value="48" />
+                        Value="48"
+                        ValueChanged="compactPaneLengthSlider_ValueChanged"/>
                 </StackPanel>
             </controls:ControlExample.Options>
 
@@ -198,6 +229,18 @@
                     </VisualState.Setters>
                 </VisualState>
             </VisualStateGroup>
+            <VisualStateGroup x:Name="NavLinkItemLayoutStates">
+                <VisualState x:Name="LeftIconLayout">
+                    <VisualState.Setters>
+                        <Setter Target="NavLinksList.ItemTemplate" Value="{StaticResource LeftIconNavLinkItemTemplate}" />
+                    </VisualState.Setters>
+                </VisualState>
+                <VisualState x:Name="RightIconLayout">
+                    <VisualState.Setters>
+                        <Setter Target="NavLinksList.ItemTemplate" Value="{StaticResource RightIconNavLinkItemTemplate}" />
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
         </VisualStateManager.VisualStateGroups>
     </StackPanel>
 </Page>
diff --git a/WinUIGallery/Samples/ControlPages/SplitViewPage.xaml.cs b/WinUIGallery/Samples/ControlPages/SplitViewPage.xaml.cs
index e160e195f..95ed47770 100644
--- a/WinUIGallery/Samples/ControlPages/SplitViewPage.xaml.cs
+++ b/WinUIGallery/Samples/ControlPages/SplitViewPage.xaml.cs
@@ -27,6 +27,12 @@ public ObservableCollection<NavLink> NavLinks
     public SplitViewPage()
     {
         this.InitializeComponent();
+        this.Loaded += SplitViewPage_Loaded;
+    }
+
+    private void SplitViewPage_Loaded(object sender, RoutedEventArgs e)
+    {
+        UpdateNavLinkItemLayout();
     }
 
     private void NavLinksList_ItemClick(object sender, ItemClickEventArgs e)
@@ -45,6 +51,27 @@ private void PanePlacement_Toggled(object sender, RoutedEventArgs e)
         {
             splitView.PanePlacement = SplitViewPanePlacement.Left;
         }
+
+        UpdateNavLinkItemLayout();
+    }
+
+    private void UpdateNavLinkItemLayout()
+    {
+        //var displayMode = (SplitViewDisplayMode)Enum.Parse(typeof(SplitViewDisplayMode), (displayModeCombobox.SelectedItem as ComboBoxItem).Content.ToString());
+
+        if (splitView.PanePlacement == SplitViewPanePlacement.Right)
+        {
+            VisualStateManager.GoToState(this, "RightIconLayout", false);
+        }
+        else
+        {
+            VisualStateManager.GoToState(this, "LeftIconLayout", false);
+        }
+    }
+
+    private void togglePaneButton_CheckedChanged(object sender, RoutedEventArgs e)
+    {
+        UpdateNavLinkItemLayout();
     }
 
     private void displayModeCombobox_SelectionChanged(object sender, SelectionChangedEventArgs e)
@@ -58,6 +85,16 @@ private void paneBackgroundCombobox_SelectionChanged(object sender, SelectionCha
 
         VisualStateManager.GoToState(this, colorString, false);
     }
+
+    private void openPaneLengthSlider_ValueChanged(object sender, Microsoft.UI.Xaml.Controls.Primitives.RangeBaseValueChangedEventArgs e)
+    {
+        UpdateNavLinkItemLayout();
+    }
+
+    private void compactPaneLengthSlider_ValueChanged(object sender, Microsoft.UI.Xaml.Controls.Primitives.RangeBaseValueChangedEventArgs e)
+    {
+        UpdateNavLinkItemLayout();
+    }
 }
 
 public class NavLink

From 54059251b0ff8a2eb6597a1ccbbde186119399ad Mon Sep 17 00:00:00 2001
From: Andrew KeepCoding <andrewkeepcoding@gmail.com>
Date: Fri, 26 Sep 2025 10:38:23 +0900
Subject: [PATCH 2/3] Set the MaxWidth to the SplitView sample

---
 WinUIGallery/Samples/ControlPages/SplitViewPage.xaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/WinUIGallery/Samples/ControlPages/SplitViewPage.xaml b/WinUIGallery/Samples/ControlPages/SplitViewPage.xaml
index f40f6fc79..2b0adeb5c 100644
--- a/WinUIGallery/Samples/ControlPages/SplitViewPage.xaml
+++ b/WinUIGallery/Samples/ControlPages/SplitViewPage.xaml
@@ -56,7 +56,7 @@
                     CompactPaneLength="{x:Bind compactPaneLengthSlider.Value, Mode=OneWay}"
                     DisplayMode="CompactOverlay"
                     IsPaneOpen="{x:Bind togglePaneButton.IsChecked, Mode=TwoWay, Converter={StaticResource nullableBooleanToBooleanConverter}}"
-                    Width="400"
+                    MaxWidth="400"
                     IsTabStop="False"
                     OpenPaneLength="{x:Bind openPaneLengthSlider.Value, Mode=OneWay}"
                     PaneBackground="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}">

From c3f3f316e36cc46bcf6379766189a303b3a63390 Mon Sep 17 00:00:00 2001
From: Andrew KeepCoding <andrewkeepcoding@gmail.com>
Date: Mon, 29 Sep 2025 10:19:57 +0900
Subject: [PATCH 3/3] Remove unnecessary code

---
 WinUIGallery/Samples/ControlPages/SplitViewPage.xaml |  6 ++----
 .../Samples/ControlPages/SplitViewPage.xaml.cs       | 12 ------------
 2 files changed, 2 insertions(+), 16 deletions(-)

diff --git a/WinUIGallery/Samples/ControlPages/SplitViewPage.xaml b/WinUIGallery/Samples/ControlPages/SplitViewPage.xaml
index 2b0adeb5c..b27dc87e7 100644
--- a/WinUIGallery/Samples/ControlPages/SplitViewPage.xaml
+++ b/WinUIGallery/Samples/ControlPages/SplitViewPage.xaml
@@ -156,8 +156,7 @@
                         Minimum="128"
                         SnapsTo="StepValues"
                         StepFrequency="8"
-                        Value="256"
-                        ValueChanged="openPaneLengthSlider_ValueChanged"/>
+                        Value="256" />
 
                     <Slider
                         x:Name="compactPaneLengthSlider"
@@ -168,8 +167,7 @@
                         Minimum="24"
                         SnapsTo="StepValues"
                         StepFrequency="8"
-                        Value="48"
-                        ValueChanged="compactPaneLengthSlider_ValueChanged"/>
+                        Value="48" />
                 </StackPanel>
             </controls:ControlExample.Options>
 
diff --git a/WinUIGallery/Samples/ControlPages/SplitViewPage.xaml.cs b/WinUIGallery/Samples/ControlPages/SplitViewPage.xaml.cs
index 95ed47770..5dd0c42ba 100644
--- a/WinUIGallery/Samples/ControlPages/SplitViewPage.xaml.cs
+++ b/WinUIGallery/Samples/ControlPages/SplitViewPage.xaml.cs
@@ -57,8 +57,6 @@ private void PanePlacement_Toggled(object sender, RoutedEventArgs e)
 
     private void UpdateNavLinkItemLayout()
     {
-        //var displayMode = (SplitViewDisplayMode)Enum.Parse(typeof(SplitViewDisplayMode), (displayModeCombobox.SelectedItem as ComboBoxItem).Content.ToString());
-
         if (splitView.PanePlacement == SplitViewPanePlacement.Right)
         {
             VisualStateManager.GoToState(this, "RightIconLayout", false);
@@ -85,16 +83,6 @@ private void paneBackgroundCombobox_SelectionChanged(object sender, SelectionCha
 
         VisualStateManager.GoToState(this, colorString, false);
     }
-
-    private void openPaneLengthSlider_ValueChanged(object sender, Microsoft.UI.Xaml.Controls.Primitives.RangeBaseValueChangedEventArgs e)
-    {
-        UpdateNavLinkItemLayout();
-    }
-
-    private void compactPaneLengthSlider_ValueChanged(object sender, Microsoft.UI.Xaml.Controls.Primitives.RangeBaseValueChangedEventArgs e)
-    {
-        UpdateNavLinkItemLayout();
-    }
 }
 
 public class NavLink