Fix SplitView sample layout issue when pane is on the right side (#2056)

<!--- Provide a general summary of your changes in the Title above -->

## Description
<!--- Describe your changes in detail -->

This PR updates the `SplitView` sample to switch layouts dynamically
depending on the pane's placement (left or right).

## Motivation and Context
<!--- Why is this change required? What problem does it solve? -->
<!--- If it fixes an open issue, please link to the issue here. -->

Fixes #322.

## How Has This Been Tested?
<!--- Please describe in detail how you tested your changes. -->
<!--- Include details of your testing environment, and the tests you ran
to -->
<!--- see how your change affects other areas of the code, etc. -->
Manually tested.

## Screenshots (if appropriate):

## Types of changes
<!--- What types of changes does your code introduce? Put an `x` in all
the boxes that apply: -->
- [x] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to change)

Author: AndrewKeepCoding

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" 
+                    MaxWidth="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
@@ -198,6 +227,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>

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,25 @@ private void PanePlacement_Toggled(object sender, RoutedEventArgs e)
         {
             splitView.PanePlacement = SplitViewPanePlacement.Left;
         }
+
+        UpdateNavLinkItemLayout();
+    }
+
+    private void UpdateNavLinkItemLayout()
+    {
+        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)