From 691d74db2b828da1839d68ef768bc01ec240dcba Mon Sep 17 00:00:00 2001
From: Yimeng Wu <me@kinnara.cn>
Date: Wed, 6 Dec 2023 22:52:24 +0000
Subject: [PATCH] Port microsoft/microsoft-ui-xaml#4659 (#639)

---
 .../NavigationView/NavigationView.cs          |  15 ++
 .../NavigationView/NavigationView.xaml        | 246 ++++++++++--------
 ModernWpf.Controls/SplitView/SplitView.cs     |   3 +-
 ModernWpf.Controls/SplitView/SplitView.xaml   |  41 +--
 ModernWpf/Controls/ControlEx.cs               |  22 ++
 ModernWpf/ControlsResources.xaml              |   6 +
 .../Common/NavigationViewPage.xaml            |   6 +-
 7 files changed, 208 insertions(+), 131 deletions(-)
 create mode 100644 ModernWpf/Controls/ControlEx.cs

diff --git a/ModernWpf.Controls/NavigationView/NavigationView.cs b/ModernWpf.Controls/NavigationView/NavigationView.cs
index eb31b595..9048146e 100644
--- a/ModernWpf.Controls/NavigationView/NavigationView.cs
+++ b/ModernWpf.Controls/NavigationView/NavigationView.cs
@@ -1790,6 +1790,8 @@ void OnSplitViewPaneClosing(DependencyObject sender, SplitViewPaneClosingEventAr
                             VisualStateManager.GoToState(this, "ListSizeCompact", true /*useTransitions*/);
                             UpdatePaneToggleSize();
                         }
+
+                        VisualStateManager.GoToState(this, "PaneNotOverlaying", true /*useTransitions*/);
                     }
                 }
             }
@@ -1806,6 +1808,14 @@ void OnSplitViewPaneOpening(DependencyObject sender, object obj)
             {
                 // See UpdateIsClosedCompact 'RS3+ animation timing enhancement' for explanation:
                 VisualStateManager.GoToState(this, "ListSizeFull", true /*useTransitions*/);
+
+                if (m_rootSplitView is { } splitView)
+                {
+                    if (splitView.DisplayMode == SplitViewDisplayMode.CompactOverlay || splitView.DisplayMode == SplitViewDisplayMode.Overlay)
+                    {
+                        VisualStateManager.GoToState(this, "PaneOverlaying", true /*useTransitions*/);
+                    }
+                }
             }
 
             PaneOpening?.Invoke(this, null);
@@ -4636,6 +4646,11 @@ void UpdateBackAndCloseButtonsVisibility()
 
             if (m_paneContentGrid is { } paneContentGridAsUIE)
             {
+                if (paneContentGridAsUIE is Border paneContentGridAsBorder)
+                {
+                    paneContentGridAsUIE = paneContentGridAsBorder.Child;
+                }
+
                 if (paneContentGridAsUIE is Grid paneContentGrid)
                 {
                     var rowDefs = paneContentGrid.RowDefinitions;
diff --git a/ModernWpf.Controls/NavigationView/NavigationView.xaml b/ModernWpf.Controls/NavigationView/NavigationView.xaml
index 3ffe531d..328838c2 100644
--- a/ModernWpf.Controls/NavigationView/NavigationView.xaml
+++ b/ModernWpf.Controls/NavigationView/NavigationView.xaml
@@ -920,6 +920,14 @@
                                 <VisualState x:Name="ListSizeCompact"/>
                             </VisualStateGroup>
 
+                            <VisualStateGroup x:Name="PaneOverlayGroup">
+                                <ui:VisualStateGroupListener.Listener>
+                                    <ui:VisualStateGroupListener x:Name="PaneOverlayGroupListener" />
+                                </ui:VisualStateGroupListener.Listener>
+                                <VisualState x:Name="PaneOverlaying" />
+                                <VisualState x:Name="PaneNotOverlaying" />
+                            </VisualStateGroup>
+
                             <VisualStateGroup x:Name="TitleBarVisibilityGroup">
                                 <VisualState x:Name="TitleBarVisible" />
                                 <VisualState x:Name="TitleBarCollapsed">
@@ -1026,7 +1034,7 @@
                                         VerticalAlignment="Center"
                                         Style="{DynamicResource NavigationViewItemHeaderTextStyle}"/>
                                 </Button>
-                                
+
                                 <Grid
                                     x:Name="PaneTitleHolder"
                                     Visibility="Collapsed">
@@ -1190,142 +1198,147 @@
                             <local:SplitView
                                 x:Name="RootSplitView"
                                 Background="{TemplateBinding Background}"
+                                BorderBrush="{DynamicResource NavigationViewItemSeparatorForeground}"
+                                BorderThickness="0"
                                 CompactPaneLength="{TemplateBinding CompactPaneLength}"
                                 DisplayMode="Inline"
                                 IsPaneOpen="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsPaneOpen, Mode=TwoWay}"
                                 IsTabStop="False"
                                 OpenPaneLength="{TemplateBinding OpenPaneLength}"
                                 PaneBackground="{DynamicResource NavigationViewDefaultPaneBackground}"
-
-                                Grid.Row="1">
+                                Grid.Row="1"
+                                CornerRadius="{DynamicResource OverlayCornerRadius}">
 
                                 <local:SplitView.Pane>
-                                    <Grid
-                                        x:Name="PaneContentGrid"
-                                        HorizontalAlignment="Left"
-                                        Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.LeftPaneVisibility}">
-                                        <Grid.RowDefinitions>
-                                            <RowDefinition Height="Auto"/>
-                                            <RowDefinition Height="0"/>
-                                            <!-- above button margin + back button space -->
-                                            <RowDefinition x:Name="PaneContentGridToggleButtonRow" Height="Auto" MinHeight="{DynamicResource NavigationViewPaneHeaderRowMinHeight}"/>
-                                            <RowDefinition Height="Auto"/>
-                                            <RowDefinition Height="Auto"/>
-                                            <RowDefinition Height="8"/>
-                                            <!-- above list margin -->
-                                            <RowDefinition x:Name="ItemsContainerRow" Height="*"/>
-                                        </Grid.RowDefinitions>
-
-                                        <Grid x:Name="ContentPaneTopPadding"
-                                              Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.TopPadding}"/>
-
-                                        <Grid Grid.Row="2">
+                                    <Border x:Name="PaneContentGrid"
+                                            BorderBrush="{DynamicResource NavigationViewItemSeparatorForeground}"
+                                            BorderThickness="0,0,1,0"
+                                            HorizontalAlignment="Left"
+                                            Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.LeftPaneVisibility}">
+                                        <Grid>
                                             <Grid.RowDefinitions>
-                                                <RowDefinition x:Name="PaneHeaderContentBorderRow"/>
+                                                <RowDefinition Height="Auto"/>
+                                                <RowDefinition Height="0"/>
+                                                <!-- above button margin + back button space -->
+                                                <RowDefinition x:Name="PaneContentGridToggleButtonRow" Height="Auto" MinHeight="{DynamicResource NavigationViewPaneHeaderRowMinHeight}"/>
+                                                <RowDefinition Height="Auto"/>
+                                                <RowDefinition Height="Auto"/>
+                                                <RowDefinition Height="8"/>
+                                                <!-- above list margin -->
+                                                <RowDefinition x:Name="ItemsContainerRow" Height="*"/>
                                             </Grid.RowDefinitions>
 
-                                            <Grid.ColumnDefinitions>
-                                                <ColumnDefinition x:Name="PaneHeaderCloseButtonColumn"/>
-                                                <ColumnDefinition x:Name="PaneHeaderToggleButtonColumn"/>
-                                                <ColumnDefinition Width="*"/>
-                                            </Grid.ColumnDefinitions>
+                                            <Grid x:Name="ContentPaneTopPadding"
+                                                  Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.TopPadding}"/>
+
+                                            <Grid Grid.Row="2">
+                                                <Grid.RowDefinitions>
+                                                    <RowDefinition x:Name="PaneHeaderContentBorderRow"/>
+                                                </Grid.RowDefinitions>
+
+                                                <Grid.ColumnDefinitions>
+                                                    <ColumnDefinition x:Name="PaneHeaderCloseButtonColumn"/>
+                                                    <ColumnDefinition x:Name="PaneHeaderToggleButtonColumn"/>
+                                                    <ColumnDefinition Width="*"/>
+                                                </Grid.ColumnDefinitions>
+
+                                                <ContentControl
+                                                    x:Name="PaneHeaderContentBorder"
+                                                    Style="{StaticResource DefaultContentControlStyle}"
+                                                    IsTabStop="False"
+                                                    VerticalContentAlignment="Stretch"
+                                                    HorizontalContentAlignment="Stretch"
+                                                    Grid.Column="2" />
+                                            </Grid>
+
+                                            <Grid
+                                                x:Name="AutoSuggestArea"
+                                                Grid.Row="3"
+                                                Height="{DynamicResource NavigationViewTopPaneHeight}"
+                                                VerticalAlignment="Center">
+
+                                                <ContentControl
+                                                    x:Name="PaneAutoSuggestBoxPresenter"
+                                                    Style="{StaticResource DefaultContentControlStyle}"
+                                                    Margin="{DynamicResource NavigationViewAutoSuggestBoxMargin}"
+                                                    IsTabStop="False"
+                                                    HorizontalContentAlignment="Stretch"
+                                                    VerticalContentAlignment="Center"/>
+
+                                                <Button
+                                                    x:Name="PaneAutoSuggestButton"
+                                                    Visibility="Collapsed"
+                                                    Style="{DynamicResource NavigationViewPaneSearchButtonStyle}"
+                                                    Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.SmallerPaneToggleButtonWidth}">
+                                                    <Button.Resources>
+                                                        <ui:StaticResource x:Key="ButtonBackgroundPointerOver" ResourceKey="NavigationViewItemBackgroundPointerOver" />
+                                                        <ui:StaticResource x:Key="ButtonBackgroundPressed" ResourceKey="NavigationViewItemBackgroundPressed" />
+                                                        <ui:StaticResource x:Key="ButtonBackgroundDisabled" ResourceKey="NavigationViewItemBackgroundDisabled" />
+                                                        <ui:StaticResource x:Key="ButtonForegroundPointerOver" ResourceKey="NavigationViewItemForegroundPointerOver" />
+                                                        <ui:StaticResource x:Key="ButtonForegroundPressed" ResourceKey="NavigationViewItemForegroundPressed" />
+                                                        <ui:StaticResource x:Key="ButtonForegroundDisabled" ResourceKey="NavigationViewItemForegroundDisabled" />
+                                                        <ui:StaticResource x:Key="ButtonBorderBrushPointerOver" ResourceKey="NavigationViewItemBorderBrushPointerOver" />
+                                                        <ui:StaticResource x:Key="ButtonBorderBrushPressed" ResourceKey="NavigationViewItemBorderBrushPressed" />
+                                                        <ui:StaticResource x:Key="ButtonBorderBrushDisabled" ResourceKey="NavigationViewItemBorderBrushDisabled" />
+                                                    </Button.Resources>
+                                                </Button>
+                                            </Grid>
 
                                             <ContentControl
-                                                x:Name="PaneHeaderContentBorder"
+                                                x:Name="PaneCustomContentBorder"
                                                 Style="{StaticResource DefaultContentControlStyle}"
                                                 IsTabStop="False"
                                                 VerticalContentAlignment="Stretch"
                                                 HorizontalContentAlignment="Stretch"
-                                                Grid.Column="2" />
-                                        </Grid>
-
-                                        <Grid
-                                            x:Name="AutoSuggestArea"
-                                            Grid.Row="3"
-                                            Height="{DynamicResource NavigationViewTopPaneHeight}"
-                                            VerticalAlignment="Center">
-
-                                            <ContentControl
-                                                x:Name="PaneAutoSuggestBoxPresenter"
-                                                Style="{StaticResource DefaultContentControlStyle}"
-                                                Margin="{DynamicResource NavigationViewAutoSuggestBoxMargin}"
-                                                IsTabStop="False"
-                                                HorizontalContentAlignment="Stretch"
-                                                VerticalContentAlignment="Center"/>
-
-                                            <Button
-                                                x:Name="PaneAutoSuggestButton"
-                                                Visibility="Collapsed"
-                                                Style="{DynamicResource NavigationViewPaneSearchButtonStyle}"
-                                                Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.SmallerPaneToggleButtonWidth}">
-                                                <Button.Resources>
-                                                    <ui:StaticResource x:Key="ButtonBackgroundPointerOver" ResourceKey="NavigationViewItemBackgroundPointerOver" />
-                                                    <ui:StaticResource x:Key="ButtonBackgroundPressed" ResourceKey="NavigationViewItemBackgroundPressed" />
-                                                    <ui:StaticResource x:Key="ButtonBackgroundDisabled" ResourceKey="NavigationViewItemBackgroundDisabled" />
-                                                    <ui:StaticResource x:Key="ButtonForegroundPointerOver" ResourceKey="NavigationViewItemForegroundPointerOver" />
-                                                    <ui:StaticResource x:Key="ButtonForegroundPressed" ResourceKey="NavigationViewItemForegroundPressed" />
-                                                    <ui:StaticResource x:Key="ButtonForegroundDisabled" ResourceKey="NavigationViewItemForegroundDisabled" />
-                                                    <ui:StaticResource x:Key="ButtonBorderBrushPointerOver" ResourceKey="NavigationViewItemBorderBrushPointerOver" />
-                                                    <ui:StaticResource x:Key="ButtonBorderBrushPressed" ResourceKey="NavigationViewItemBorderBrushPressed" />
-                                                    <ui:StaticResource x:Key="ButtonBorderBrushDisabled" ResourceKey="NavigationViewItemBorderBrushDisabled" />
-                                                </Button.Resources>
-                                            </Button>
-                                        </Grid>
+                                                Grid.Row="4" />
 
-                                        <ContentControl
-                                            x:Name="PaneCustomContentBorder"
-                                            Style="{StaticResource DefaultContentControlStyle}"
-                                            IsTabStop="False"
-                                            VerticalContentAlignment="Stretch"
-                                            HorizontalContentAlignment="Stretch"
-                                            Grid.Row="4" />
-
-                                        <!-- "Non header" content -->
-                                        <Grid x:Name="ItemsContainerGrid" Grid.Row="6" Margin="0,0,0,8">
-                                            <Grid.RowDefinitions>
+                                            <!-- "Non header" content -->
+                                            <Grid x:Name="ItemsContainerGrid" Grid.Row="6" Margin="0,0,0,8">
+                                                <Grid.RowDefinitions>
                                                 <RowDefinition Height="Auto" MinHeight="{DynamicResource NavigationViewItemOnLeftMinHeight}"/> <!-- MenuItems -->
                                                 <RowDefinition Height="*" MinHeight="21"/> <!-- Fill spacing -->
                                                 <RowDefinition Height="Auto" /> <!-- PaneFooter -->
                                                 <RowDefinition Height="Auto" MinHeight="{DynamicResource NavigationViewItemOnLeftMinHeight}"/> <!-- FooterItems -->
-                                            </Grid.RowDefinitions>
+                                                </Grid.RowDefinitions>
+
+                                                <!-- MenuItems -->
+                                                <local:ItemsRepeaterScrollHost
+                                                    HorizontalAlignment="Stretch"
+                                                    VerticalAlignment="Stretch">
+                                                    <ScrollViewer x:Name="MenuItemsScrollViewer"
+                                                                  KeyboardNavigation.TabNavigation="Local"
+                                                                  VerticalScrollBarVisibility="Auto">
+                                                        <!-- Left nav ItemsRepeater -->
+                                                        <local:ItemsRepeater
+                                                            x:Name="MenuItemsHost"
+                                                            AutomationProperties.Name="{TemplateBinding AutomationProperties.Name}"/>
+                                                    </ScrollViewer>
+                                                </local:ItemsRepeaterScrollHost>
 
-                                            <!-- MenuItems -->
-                                            <local:ItemsRepeaterScrollHost
-                                                HorizontalAlignment="Stretch"
-                                                VerticalAlignment="Stretch">
-                                                <ScrollViewer x:Name="MenuItemsScrollViewer"
-                                                              KeyboardNavigation.TabNavigation="Local"
-                                                              VerticalScrollBarVisibility="Auto">
-                                                    <!-- Left nav ItemsRepeater -->
-                                                    <local:ItemsRepeater
-                                                        x:Name="MenuItemsHost"
-                                                        AutomationProperties.Name="{TemplateBinding AutomationProperties.Name}"/>
-                                                </ScrollViewer>
-                                            </local:ItemsRepeaterScrollHost>
-
-                                            <local:NavigationViewItemSeparator x:Name="VisualItemsSeparator"
-                                                                               Grid.Row="1" VerticalAlignment="Center"
-                                                                               Visibility="Collapsed" HorizontalAlignment="Stretch"/>
-
-                                            <!-- PaneFooter -->
-                                            <ContentControl x:Name="FooterContentBorder"
-                                                            Style="{StaticResource DefaultContentControlStyle}"
-                                                            IsTabStop="False"
-                                                            VerticalContentAlignment="Stretch"
-                                                            HorizontalContentAlignment="Stretch"
-                                                            Grid.Row="2" />
-
-                                            <!-- FooterItems -->
-                                            <local:ItemsRepeaterScrollHost Grid.Row="3">
-                                                <ScrollViewer x:Name="FooterItemsScrollViewer">
-                                                    <!-- contract7Present:VerticalAnchorRatio="1" -->
-                                                    <local:ItemsRepeater
-                                                        x:Name="FooterMenuItemsHost" VerticalAlignment="Bottom"/>
-                                                </ScrollViewer>
-                                            </local:ItemsRepeaterScrollHost>
-                                        </Grid>
+                                                <local:NavigationViewItemSeparator x:Name="VisualItemsSeparator"
+                                                                                   Grid.Row="1" VerticalAlignment="Center"
+                                                                                   Visibility="Collapsed" HorizontalAlignment="Stretch"/>
+
+                                                <!-- PaneFooter -->
+                                                <ContentControl x:Name="FooterContentBorder"
+                                                                Style="{StaticResource DefaultContentControlStyle}"
+                                                                IsTabStop="False"
+                                                                VerticalContentAlignment="Stretch"
+                                                                HorizontalContentAlignment="Stretch"
+                                                                Grid.Row="2" />
+
+                                                <!-- FooterItems -->
+                                                <local:ItemsRepeaterScrollHost Grid.Row="3">
+                                                    <ScrollViewer x:Name="FooterItemsScrollViewer">
+                                                        <!-- contract7Present:VerticalAnchorRatio="1" -->
+                                                        <local:ItemsRepeater
+                                                            x:Name="FooterMenuItemsHost" VerticalAlignment="Bottom"/>
+                                                    </ScrollViewer>
+                                                </local:ItemsRepeaterScrollHost>
+                                            </Grid>
 
-                                    </Grid>
+                                        </Grid>
+                                    </Border>
                                 </local:SplitView.Pane>
 
                                 <local:SplitView.Content>
@@ -1389,6 +1402,13 @@
                             <Setter TargetName="FooterContentBorder" Property="HorizontalAlignment" Value="Left" />
                         </Trigger>
 
+                        <Trigger SourceName="PaneOverlayGroupListener" Property="CurrentStateName" Value="PaneNotOverlaying">
+                            <Setter TargetName="RootSplitView" Property="CornerRadius" Value="0" />
+                            <Setter TargetName="RootSplitView" Property="BorderThickness" Value="0" />
+                            <Setter TargetName="PaneContentGrid" Property="BorderThickness" Value="0,0,1,0" />
+                            <Setter TargetName="RootSplitView" Property="PaneBackground" Value="{DynamicResource NavigationViewExpandedPaneBackground}" />
+                        </Trigger>
+
                         <Trigger SourceName="OverflowLabelGroupListener" Property="CurrentStateName" Value="OverflowButtonNoLabel">
                             <Setter TargetName="TopNavOverflowButton" Property="Style" Value="{DynamicResource NavigationViewOverflowButtonNoLabelStyleWhenPaneOnTop}" />
                         </Trigger>
diff --git a/ModernWpf.Controls/SplitView/SplitView.cs b/ModernWpf.Controls/SplitView/SplitView.cs
index e226e2b4..2220fbb2 100644
--- a/ModernWpf.Controls/SplitView/SplitView.cs
+++ b/ModernWpf.Controls/SplitView/SplitView.cs
@@ -1,6 +1,5 @@
 using System.Diagnostics;
 using System.Windows;
-using System.Windows.Controls;
 using System.Windows.Input;
 using System.Windows.Markup;
 using System.Windows.Media;
@@ -10,7 +9,7 @@
 namespace ModernWpf.Controls
 {
     [ContentProperty(nameof(Content))]
-    public partial class SplitView : Control
+    public partial class SplitView : ControlEx
     {
         static SplitView()
         {
diff --git a/ModernWpf.Controls/SplitView/SplitView.xaml b/ModernWpf.Controls/SplitView/SplitView.xaml
index 67fc39ec..85d4a862 100644
--- a/ModernWpf.Controls/SplitView/SplitView.xaml
+++ b/ModernWpf.Controls/SplitView/SplitView.xaml
@@ -11,11 +11,14 @@
     <GridLength x:Key="ZeroGridLength">0</GridLength>
 
     <Style TargetType="local:SplitView">
+        <Setter Property="BorderBrush" Value="{DynamicResource SystemControlForegroundTransparentBrush}" />
+        <Setter Property="BorderThickness" Value="{DynamicResource SplitViewLeftBorderThemeThickness}" />
         <Setter Property="HorizontalContentAlignment" Value="Stretch" />
         <Setter Property="VerticalContentAlignment" Value="Stretch" />
         <Setter Property="OpenPaneLength" Value="{DynamicResource SplitViewOpenPaneThemeLength}" />
         <Setter Property="CompactPaneLength" Value="{DynamicResource SplitViewCompactPaneThemeLength}" />
         <Setter Property="PaneBackground" Value="{DynamicResource SystemControlPageBackgroundChromeLowBrush}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource SplitViewPaneRootCornerRadius}" />
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="local:SplitView">
@@ -593,36 +596,45 @@
                             <ColumnDefinition x:Name="ColumnDefinition1" Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.OpenPaneGridLength, FallbackValue={StaticResource ZeroGridLength}}" />
                             <ColumnDefinition x:Name="ColumnDefinition2" Width="*" />
                         </Grid.ColumnDefinitions>
-                        <!-- Pane Content Area -->  
-                        <Grid
+
+                        <!-- Pane Content Area -->
+                        <Border
                             x:Name="PaneRoot"
                             Grid.ColumnSpan="2"
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            BorderThickness="{TemplateBinding BorderThickness}"
                             HorizontalAlignment="Left"
                             Visibility="Collapsed"
                             Background="{TemplateBinding PaneBackground}"
                             Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.OpenPaneLength}"
                             Canvas.ZIndex="1"
+                            CornerRadius="{TemplateBinding CornerRadius}"
                             KeyboardNavigation.TabNavigation="Local"
                             KeyboardNavigation.TabIndex="0">
-                            <Grid.Clip>
+                            <Border.Clip>
                                 <RectangleGeometry x:Name="PaneClipRectangle">
                                     <RectangleGeometry.Transform>
                                         <TranslateTransform x:Name="PaneClipRectangleTransform" />
                                     </RectangleGeometry.Transform>
                                 </RectangleGeometry>
-                            </Grid.Clip>
-                            <Grid.RenderTransform>
+                            </Border.Clip>
+                            
+                            <Border.RenderTransform>
                                 <TranslateTransform x:Name="PaneTransform" />
-                            </Grid.RenderTransform>
-                            <Border ui:BorderHelper.Child="{TemplateBinding Pane}" />
-                            <Rectangle
-                                x:Name="HCPaneBorder"
-                                Visibility="Collapsed"
-                                Fill="{DynamicResource SystemControlForegroundTransparentBrush}"
-                                Width="1"
-                                HorizontalAlignment="Right" />
+                            </Border.RenderTransform>
 
-                        </Grid>
+                            <Grid>
+                                <Border ui:BorderHelper.Child="{TemplateBinding Pane}" />
+                                
+                                <Rectangle
+                                    x:Name="HCPaneBorder"
+                                    Visibility="Collapsed"
+                                    Fill="{DynamicResource SystemControlForegroundTransparentBrush}"
+                                    Width="1"
+                                    HorizontalAlignment="Right" />
+                            </Grid>
+                        </Border>
+                        
                         <!-- Content Area -->
                         <Grid
                             x:Name="ContentRoot"
@@ -635,7 +647,6 @@
                                 x:Name="LightDismissLayer"
                                 Fill="Transparent"
                                 Visibility="Collapsed" />
-
                         </Grid>
 
                     </Grid>
diff --git a/ModernWpf/Controls/ControlEx.cs b/ModernWpf/Controls/ControlEx.cs
new file mode 100644
index 00000000..cf8ffafd
--- /dev/null
+++ b/ModernWpf/Controls/ControlEx.cs
@@ -0,0 +1,22 @@
+using System.Windows;
+using System.Windows.Controls;
+using ModernWpf.Controls.Primitives;
+
+namespace ModernWpf.Controls
+{
+    public class ControlEx : Control
+    {
+        #region CornerRadius
+
+        public static readonly DependencyProperty CornerRadiusProperty =
+            ControlHelper.CornerRadiusProperty.AddOwner(typeof(ControlEx));
+
+        public CornerRadius CornerRadius
+        {
+            get => (CornerRadius)GetValue(CornerRadiusProperty);
+            set => SetValue(CornerRadiusProperty, value);
+        }
+
+        #endregion
+    }
+}
diff --git a/ModernWpf/ControlsResources.xaml b/ModernWpf/ControlsResources.xaml
index 4bb3b699..10091aec 100644
--- a/ModernWpf/ControlsResources.xaml
+++ b/ModernWpf/ControlsResources.xaml
@@ -81,6 +81,12 @@
     <Thickness x:Key="MenuFlyoutItemThemePadding">11,8,11,9</Thickness>
     <Thickness x:Key="MenuFlyoutItemThemePaddingNarrow">11,4,11,5</Thickness>
 
+    <sys:Double x:Key="SplitViewOpenPaneThemeLength">320</sys:Double>
+    <sys:Double x:Key="SplitViewCompactPaneThemeLength">48</sys:Double>
+    <Thickness x:Key="SplitViewLeftBorderThemeThickness">0,0,1,0</Thickness>
+    <Thickness x:Key="SplitViewRightBorderThemeThickness">1,0,0,0</Thickness>
+    <CornerRadius x:Key="SplitViewPaneRootCornerRadius">0</CornerRadius>
+
     <ControlTemplate x:Key="TextControlValidationErrorTemplate">
         <Grid SnapsToDevicePixels="True">
             <AdornedElementPlaceholder />
diff --git a/test/NavigationView_TestUI/Common/NavigationViewPage.xaml b/test/NavigationView_TestUI/Common/NavigationViewPage.xaml
index fe9a1539..6ca60ccc 100644
--- a/test/NavigationView_TestUI/Common/NavigationViewPage.xaml
+++ b/test/NavigationView_TestUI/Common/NavigationViewPage.xaml
@@ -318,7 +318,11 @@ Nullam egestas, orci sed molestie aliquet, diam ex euismod risus, ac dapibus qua
                     <Button x:Name="PaneFooterButton" AutomationProperties.Name="PaneFooterButton" Content="PaneFooter Button" Margin="8"/>
                     <muxcontrols:NavigationViewItem x:Name="PaneFooterNavigationViewItem"
                                                     AutomationProperties.Name="PaneFooterNavigationViewItem"
-                                                    Content="NVI" />
+                                                    Content="NVI">
+                        <muxcontrols:NavigationViewItem.Icon>
+                            <muxcontrols:SymbolIcon Symbol="Accept" />
+                        </muxcontrols:NavigationViewItem.Icon>
+                    </muxcontrols:NavigationViewItem>
                 </StackPanel>
             </muxcontrols:NavigationView.PaneFooter>
         </muxcontrols:NavigationView>