From 86e8325ce4ec7ce82eb91c3e27d88311a1452bbf Mon Sep 17 00:00:00 2001
From: Yimeng Wu <me@kinnara.cn>
Date: Fri, 15 Dec 2023 23:58:36 +0000
Subject: [PATCH] Port microsoft/microsoft-ui-xaml#4779

---
 .../NavigationView/NavigationView.cs          |  65 ++---
 .../NavigationView/NavigationView.xaml        | 236 ++++++++++--------
 .../NavigationView/NavigationViewItemBase.cs  |   2 +-
 .../NavigationViewItemHeader.cs               |   5 +
 ModernWpf/Styles/NavigationBackButton.xaml    |   6 +-
 ModernWpf/Styles/NavigationView.xaml          |  55 ++--
 ModernWpf/ThemeResources/Dark.xaml            |   9 +-
 ModernWpf/ThemeResources/HighContrast.xaml    |   1 +
 ModernWpf/ThemeResources/Light.xaml           |   9 +-
 .../NavigationViewTopNavOnlyPage.xaml.cs      |   2 +-
 10 files changed, 214 insertions(+), 176 deletions(-)

diff --git a/ModernWpf.Controls/NavigationView/NavigationView.cs b/ModernWpf.Controls/NavigationView/NavigationView.cs
index b8a78f942..6d279bcfa 100644
--- a/ModernWpf.Controls/NavigationView/NavigationView.cs
+++ b/ModernWpf.Controls/NavigationView/NavigationView.cs
@@ -102,7 +102,7 @@ public partial class NavigationView : ContentControl, IControlProtected
         const int c_toggleButtonHeightWhenShouldPreserveNavigationViewRS3Behavior = 56;
         const int c_backButtonRowDefinition = 1;
         const float c_paneElevationTranslationZ = 32;
-        const int c_paneItemsSeparatorHeight = 21;
+        const int c_paneItemsSeparatorHeight = 9;
 
         const int c_mainMenuBlockIndex = 0;
         const int c_footerMenuBlockIndex = 1;
@@ -756,6 +756,7 @@ public override void OnApplyTemplate()
             UpdateVisualState();
             UpdatePaneTitleMargins();
             UpdatePaneLayout();
+            UpdatePaneOverlayGroup();
         }
 
         void UpdateRepeaterItemsSource(bool forceSelectionModelUpdate)
@@ -1572,7 +1573,7 @@ double ItemsContainerMargin()
                         }
                         var availableHeight = paneContentRow.ActualHeight - itemsContainerMargin;
 
-                        // The -21 below is to account for the separator height that we need to subtract.
+                        // The c_paneItemsSeparatorHeight is to account for the 9px separator height that we need to subtract.
                         if (PaneFooter is { })
                         {
                             availableHeight -= c_paneItemsSeparatorHeight;
@@ -1811,8 +1812,6 @@ void OnSplitViewPaneClosing(DependencyObject sender, SplitViewPaneClosingEventAr
                             VisualStateManager.GoToState(this, "ListSizeCompact", true /*useTransitions*/);
                             UpdatePaneToggleSize();
                         }
-
-                        VisualStateManager.GoToState(this, "PaneNotOverlaying", true /*useTransitions*/);
                     }
                 }
             }
@@ -1829,14 +1828,6 @@ 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);
@@ -2008,20 +1999,25 @@ void UpdatePaneTitleFrameworkElementParents()
             {
                 var isPaneToggleButtonVisible = IsPaneToggleButtonVisible;
                 var isTopNavigationView = IsTopNavigationView();
+                var paneTitleSize = PaneTitle?.Length ?? 0;
+
+                m_isLeftPaneTitleEmpty = (isPaneToggleButtonVisible ||
+                    isTopNavigationView ||
+                    paneTitleSize == 0 ||
+                    (PaneDisplayMode == NavigationViewPaneDisplayMode.LeftMinimal && !IsPaneOpen));
 
-                paneTitleHolderFrameworkElement.Visibility =
-                    (isPaneToggleButtonVisible ||
-                        isTopNavigationView ||
-                        PaneTitle.Length == 0 ||
-                        (PaneDisplayMode == NavigationViewPaneDisplayMode.LeftMinimal && !IsPaneOpen)) ?
-                    Visibility.Collapsed : Visibility.Visible;
+                paneTitleHolderFrameworkElement.Visibility = m_isLeftPaneTitleEmpty ? Visibility.Collapsed : Visibility.Visible;
 
                 if (m_paneTitleFrameworkElement is { } paneTitleFrameworkElement)
                 {
+                    var paneTitleTopPane = m_paneTitleOnTopPane;
+
                     var first = SetPaneTitleFrameworkElementParent(m_paneToggleButton, paneTitleFrameworkElement, isTopNavigationView || !isPaneToggleButtonVisible);
                     var second = SetPaneTitleFrameworkElementParent(m_paneTitlePresenter, paneTitleFrameworkElement, isTopNavigationView || isPaneToggleButtonVisible);
-                    var third = SetPaneTitleFrameworkElementParent(m_paneTitleOnTopPane, paneTitleFrameworkElement, !isTopNavigationView || isPaneToggleButtonVisible);
+                    var third = SetPaneTitleFrameworkElementParent(paneTitleTopPane, paneTitleFrameworkElement, !isTopNavigationView || isPaneToggleButtonVisible);
                     (first ?? second ?? third)?.Invoke();
+
+                    paneTitleTopPane.Visibility = third is { } && paneTitleSize != 0 ? Visibility.Visible : Visibility.Collapsed;
                 }
             }
         }
@@ -3559,7 +3555,7 @@ void UpdateVisualStateForOverflowButton()
         void UpdateLeftNavigationOnlyVisualState(bool useTransitions)
         {
             bool isToggleButtonVisible = IsPaneToggleButtonVisible;
-            VisualStateManager.GoToState(this, isToggleButtonVisible ? "TogglePaneButtonVisible" : "TogglePaneButtonCollapsed", false /*useTransitions*/);
+            VisualStateManager.GoToState(this, isToggleButtonVisible || !m_isLeftPaneTitleEmpty ? "TogglePaneButtonVisible" : "TogglePaneButtonCollapsed", false /*useTransitions*/);
         }
 
         void InvalidateTopNavPrimaryLayout()
@@ -4296,6 +4292,8 @@ void OnIsPaneOpenChanged()
             UpdatePaneTabFocusNavigation();
             UpdateSettingsItemToolTip();
             UpdatePaneTitleFrameworkElementParents();
+            UpdatePaneOverlayGroup();
+            UpdatePaneButtonsWidths();
 
             if (SharedHelpers.IsThemeShadowAvailable())
             {
@@ -4313,7 +4311,6 @@ void OnIsPaneOpenChanged()
                     }
                 }
             }
-            UpdatePaneButtonsWidths();
         }
 
         void UpdatePaneToggleButtonVisibility()
@@ -4655,15 +4652,6 @@ void UpdateBackAndCloseButtonsVisibility()
                 paneHeaderCloseButtonColumn.Width = GridLengthHelper.FromValueAndType(paneHeaderPaddingForCloseButton, GridUnitType.Pixel);
             }
 
-            if (m_paneTitleHolderFrameworkElement is { } paneTitleHolderFrameworkElement)
-            {
-                if (paneHeaderContentBorderRowMinHeight == 0.00 && paneTitleHolderFrameworkElement.Visibility == Visibility.Visible)
-                {
-                    // Handling the case where the PaneTottleButton is collapsed and the PaneTitle's height needs to push the rest of the NavigationView's UI down.
-                    paneHeaderContentBorderRowMinHeight = paneTitleHolderFrameworkElement.ActualHeight;
-                }
-            }
-
             if (m_paneHeaderContentBorderRow is { } paneHeaderContentBorderRow)
             {
                 paneHeaderContentBorderRow.MinHeight = paneHeaderContentBorderRowMinHeight;
@@ -5027,6 +5015,21 @@ void UpdatePaneShadow()
             */
         }
 
+        void UpdatePaneOverlayGroup()
+        {
+            if (m_rootSplitView is { } splitView)
+            {
+                if (IsPaneOpen && (splitView.DisplayMode == SplitViewDisplayMode.CompactOverlay || splitView.DisplayMode == SplitViewDisplayMode.Overlay))
+                {
+                    VisualStateManager.GoToState(this, "PaneOverlaying", true /*useTransitions*/);
+                }
+                else
+                {
+                    VisualStateManager.GoToState(this, "PaneNotOverlaying", true /*useTransitions*/);
+                }
+            }
+        }
+
         T GetContainerForData<T>(object data) where T : class
         {
             if (data == null)
@@ -5870,6 +5873,8 @@ protected override void OnDpiChanged(DpiScale oldDpi, DpiScale newDpi)
 
         bool m_TabKeyPrecedesFocusChange = false;
 
+        bool m_isLeftPaneTitleEmpty = false;
+
         GettingFocusHelper m_leftNavRepeaterGettingFocusHelper;
         GettingFocusHelper m_topNavRepeaterGettingFocusHelper;
         GettingFocusHelper m_leftNavFooterMenuRepeaterGettingFocusHelper;
diff --git a/ModernWpf.Controls/NavigationView/NavigationView.xaml b/ModernWpf.Controls/NavigationView/NavigationView.xaml
index 62ca2a5f1..30d157b85 100644
--- a/ModernWpf.Controls/NavigationView/NavigationView.xaml
+++ b/ModernWpf.Controls/NavigationView/NavigationView.xaml
@@ -161,7 +161,7 @@
                             MinHeight="{DynamicResource NavigationViewItemOnLeftMinHeight}"
                             Background="{TemplateBinding Background}"
                             CornerRadius="{TemplateBinding CornerRadius}"
-                            Margin="4,2,4,2"
+                            Margin="{DynamicResource NavigationViewItemButtonMargin}"
                             ui:FocusVisualHelper.IsTemplateFocusTarget="True">
                         <Border.Resources>
                             <Storyboard x:Key="ExpandCollapseRotateExpandedStoryboard">
@@ -207,7 +207,7 @@
                                             <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Collapsed}" />
                                         </ObjectAnimationUsingKeyFrames>
                                         <DoubleAnimationUsingKeyFrames Storyboard.TargetName="IconColumn" Storyboard.TargetProperty="Width">
-                                            <DiscreteDoubleKeyFrame KeyTime="0" Value="16" />
+                                            <DiscreteDoubleKeyFrame KeyTime="0" Value="8" />
                                         </DoubleAnimationUsingKeyFrames>
                                     </Storyboard>
                                 </VisualState>
@@ -279,7 +279,8 @@
                                              Margin="{DynamicResource NavigationViewItemOnLeftIconBoxMargin}">
                                         <ContentPresenter
                                             x:Name="Icon"
-                                            Content="{TemplateBinding Icon}" />
+                                            Content="{TemplateBinding Icon}"
+                                            TextElement.Foreground="{TemplateBinding Foreground}" />
                                     </Viewbox>
                                 </Border>
 
@@ -290,6 +291,7 @@
                                     Margin="{DynamicResource NavigationViewItemContentPresenterMargin}"
                                     ContentTemplate="{TemplateBinding ContentTemplate}"
                                     Content="{TemplateBinding Content}"
+                                    TextElement.Foreground="{TemplateBinding Foreground}"
                                     HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                     VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                     ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"/>
@@ -373,12 +375,17 @@
         <Setter Property="UseSystemFocusVisuals" Value="True" />
         <Setter Property="FocusVisualStyle" Value="{DynamicResource {x:Static SystemParameters.FocusVisualStyleKey}}" />
         <Setter Property="HorizontalContentAlignment" Value="Stretch" />
+        <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="local:NavigationViewItem">
-                    <Grid
-                        x:Name="LayoutRoot"
-                        Background="{TemplateBinding Background}">
+                    <Border x:Name="LayoutRoot"
+                            Background="{TemplateBinding Background}"
+                            CornerRadius="{TemplateBinding CornerRadius}"
+                            Margin="{DynamicResource NavigationViewItemButtonMargin}"
+                            Height="{DynamicResource TopNavigationViewSettingsButtonHeight}"
+                            Width="{DynamicResource TopNavigationViewSettingsButtonHeight}"
+                            ui:FocusVisualHelper.IsTemplateFocusTarget="True">
                         <VisualStateManager.VisualStateGroups>
                             <VisualStateGroup x:Name="PointerStates">
                                 <ui:VisualStateGroupListener.Listener>
@@ -400,34 +407,35 @@
                                 </VisualState>
                             </VisualStateGroup>
                         </VisualStateManager.VisualStateGroups>
-                        <Rectangle
-                            x:Name="PointerRectangle"
-                            Fill="Transparent" />
-                        <Grid x:Name="ContentGrid">
-                            <Grid.ColumnDefinitions>
-                                <ColumnDefinition Width="Auto" />
-                                <ColumnDefinition Width="*" />
-                            </Grid.ColumnDefinitions>
-                            <Grid.RowDefinitions>
-                                <RowDefinition x:Name="IconRow" Height="Auto" />
-                                <RowDefinition Height="*" />
-                            </Grid.RowDefinitions>
-                            <Viewbox
-                                x:Name="IconBox"
-                                Grid.Row="1"
-                                Grid.Column="1"
-                                Height="16"
-                                Width ="40"
-                                Margin="0"
-                                VerticalAlignment="Center"
-                                HorizontalAlignment="Center">
-                                <ContentPresenter
-                                    x:Name="Icon"
-                                    Content="{TemplateBinding Icon}"
-                                    TextElement.Foreground="{TemplateBinding Foreground}" />
-                            </Viewbox>
+                        <Grid>
+                            <Rectangle
+                                x:Name="PointerRectangle"
+                                Fill="Transparent" />
+                            <Grid x:Name="ContentGrid">
+                                <Grid.ColumnDefinitions>
+                                    <ColumnDefinition Width="Auto" />
+                                    <ColumnDefinition Width="*" />
+                                </Grid.ColumnDefinitions>
+                                <Grid.RowDefinitions>
+                                    <RowDefinition x:Name="IconRow" Height="Auto" />
+                                    <RowDefinition Height="*" />
+                                </Grid.RowDefinitions>
+                                <Viewbox
+                                    x:Name="IconBox"
+                                    Grid.Row="1"
+                                    Grid.Column="1"
+                                    Height="16"
+                                    Margin="0"
+                                    VerticalAlignment="Center"
+                                    HorizontalAlignment="Center">
+                                    <ContentPresenter
+                                        x:Name="Icon"
+                                        Content="{TemplateBinding Icon}"
+                                        TextElement.Foreground="{TemplateBinding Foreground}" />
+                                </Viewbox>
+                            </Grid>
                         </Grid>
-                    </Grid>
+                    </Border>
                     <ControlTemplate.Triggers>
                         <Trigger SourceName="PointerStatesListener" Property="CurrentStateName" Value="PointerOver">
                             <Setter TargetName="LayoutRoot" Property="Background" Value="{DynamicResource TopNavigationViewItemBackgroundPointerOver}" />
@@ -465,13 +473,15 @@
 
     <Style TargetType="primitives:NavigationViewItemPresenter" x:Key="MUX_NavigationViewItemPresenterStyleWhenOnTopPane">
         <Setter Property="Foreground" Value="{DynamicResource TopNavigationViewItemForeground}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="primitives:NavigationViewItemPresenter">
-                    <Grid
-                        x:Name="LayoutRoot"
-                        Background="{TemplateBinding Background}">
-                        <Grid.Resources>
+                    <Border x:Name="LayoutRoot"
+                            Background="{TemplateBinding Background}"
+                            ui:FocusVisualHelper.IsTemplateFocusTarget="True"
+                            CornerRadius="{TemplateBinding CornerRadius}">
+                        <Border.Resources>
                             <Storyboard x:Key="ExpandCollapseRotateExpandedStoryboard">
                                 <DoubleAnimation
                                     Storyboard.TargetName="ExpandCollapseChevronRotateTransform"
@@ -484,7 +494,7 @@
                                     Storyboard.TargetProperty="Angle"
                                     From="180.0" To="0.0" Duration="0:0:0.1"/>
                             </Storyboard>
-                        </Grid.Resources>
+                        </Border.Resources>
                         <VisualStateManager.VisualStateGroups>
                             <VisualStateGroup x:Name="PointerStates">
                                 <ui:VisualStateGroupListener.Listener>
@@ -536,79 +546,81 @@
                                 </VisualState>
                             </VisualStateGroup>
                         </VisualStateManager.VisualStateGroups>
-                        <Rectangle
-                            x:Name="PointerRectangle"
-                            Fill="Transparent"
-                            Visibility="Collapsed" />
-                        <Grid x:Name="ContentGrid">
-                            <Grid.ColumnDefinitions>
-                                <ColumnDefinition Width="Auto" />
-                                <ColumnDefinition Width="*" />
-                                <ColumnDefinition Width="Auto" />
-                            </Grid.ColumnDefinitions>
-                            <Viewbox
-                                x:Name="IconBox"
-                                Height="16"
-                                Width="16"
-                                Margin="16,0,0,0"
-                                VerticalAlignment="Center"
-                                HorizontalAlignment="Center">
-                                <ContentPresenter
-                                    x:Name="Icon"
-                                    Content="{TemplateBinding Icon}"
-                                    TextElement.Foreground="{TemplateBinding Foreground}"/>
-                            </Viewbox>
-                            <ui:ContentPresenterEx
-                                x:Name="ContentPresenter"
-                                Grid.Column="1"
-                                Margin="{DynamicResource TopNavigationViewItemContentPresenterMargin}"
-                                TextWrapping="NoWrap"
-                                Foreground="{TemplateBinding Foreground}"
-                                ContentTemplate="{TemplateBinding ContentTemplate}"
-                                Content="{TemplateBinding Content}"
-                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                                ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
-                                VerticalAlignment="Center"/>
-                            <Grid
-                                x:Name="ExpandCollapseChevron"
-                                Grid.Column="2"
-                                Visibility="Collapsed"
-                                HorizontalAlignment="Right"
-                                Width="40"
-                                Margin="{DynamicResource TopNavigationViewItemExpandChevronMargin}"
-                                Background="Transparent">
-                                <ui:FontIconFallback
-                                    Width="12"
-                                    Height="12"
-                                    Foreground="{DynamicResource NavigationViewItemForeground}"
-                                    RenderTransformOrigin="0.5, 0.5"
-                                    x:Name="ExpandCollapseChevronIcon"
-                                    FontSize="{DynamicResource NavigationViewItemExpandedGlyphFontSize}"
-                                    Data="{DynamicResource NavigationViewItemExpandedPath}"
-                                    FontFamily="{DynamicResource SymbolThemeFontFamily}"
+                        <Grid>
+                            <Rectangle
+                                x:Name="PointerRectangle"
+                                Fill="Transparent"
+                                Visibility="Collapsed" />
+                            <Grid x:Name="ContentGrid">
+                                <Grid.ColumnDefinitions>
+                                    <ColumnDefinition Width="Auto" />
+                                    <ColumnDefinition Width="*" />
+                                    <ColumnDefinition Width="Auto" />
+                                </Grid.ColumnDefinitions>
+                                <Viewbox
+                                    x:Name="IconBox"
+                                    Height="16"
+                                    Width="16"
+                                    Margin="12,0,0,0"
                                     VerticalAlignment="Center"
                                     HorizontalAlignment="Center">
-                                    <ui:FontIconFallback.RenderTransform>
-                                        <RotateTransform x:Name="ExpandCollapseChevronRotateTransform" Angle="0"/>
-                                    </ui:FontIconFallback.RenderTransform>
-                                </ui:FontIconFallback>
+                                    <ContentPresenter
+                                        x:Name="Icon"
+                                        Content="{TemplateBinding Icon}"
+                                        TextElement.Foreground="{TemplateBinding Foreground}"/>
+                                </Viewbox>
+                                <ui:ContentPresenterEx
+                                    x:Name="ContentPresenter"
+                                    Grid.Column="1"
+                                    Margin="{DynamicResource TopNavigationViewItemContentPresenterMargin}"
+                                    TextWrapping="NoWrap"
+                                    Foreground="{TemplateBinding Foreground}"
+                                    ContentTemplate="{TemplateBinding ContentTemplate}"
+                                    Content="{TemplateBinding Content}"
+                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                    ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
+                                    VerticalAlignment="Center"/>
+                                <Grid
+                                    x:Name="ExpandCollapseChevron"
+                                    Grid.Column="2"
+                                    Visibility="Collapsed"
+                                    HorizontalAlignment="Right"
+                                    Width="40"
+                                    Margin="{DynamicResource TopNavigationViewItemExpandChevronMargin}"
+                                    Background="Transparent">
+                                    <ui:FontIconFallback
+                                        Width="12"
+                                        Height="12"
+                                        Foreground="{DynamicResource NavigationViewItemForeground}"
+                                        RenderTransformOrigin="0.5, 0.5"
+                                        x:Name="ExpandCollapseChevronIcon"
+                                        FontSize="{DynamicResource NavigationViewItemExpandedGlyphFontSize}"
+                                        Data="{DynamicResource NavigationViewItemExpandedPath}"
+                                        FontFamily="{DynamicResource SymbolThemeFontFamily}"
+                                        VerticalAlignment="Center"
+                                        HorizontalAlignment="Center">
+                                        <ui:FontIconFallback.RenderTransform>
+                                            <RotateTransform x:Name="ExpandCollapseChevronRotateTransform" Angle="0"/>
+                                        </ui:FontIconFallback.RenderTransform>
+                                    </ui:FontIconFallback>
+                                </Grid>
+                            </Grid>
+                            <Grid
+                                x:Name="SelectionIndicatorGrid"
+                                Margin="16,0,16,4"
+                                VerticalAlignment="Bottom"
+                                HorizontalAlignment="Center">
+                                <Rectangle
+                                    x:Name="SelectionIndicator"
+                                    Height="3"
+                                    Width="16"
+                                    Fill="{DynamicResource NavigationViewSelectionIndicatorForeground}"
+                                    Opacity="0"
+                                    RadiusX="2"
+                                    RadiusY="2" />
                             </Grid>
                         </Grid>
-                        <Grid
-                            x:Name="SelectionIndicatorGrid"
-                            Margin="16,0,16,4"
-                            VerticalAlignment="Bottom"
-                            HorizontalAlignment="Center">
-                            <Rectangle
-                                x:Name="SelectionIndicator"
-                                Height="3"
-                                Width="16"
-                                Fill="{DynamicResource NavigationViewSelectionIndicatorForeground}"
-                                Opacity="0"
-                                RadiusX="2"
-                                RadiusY="2" />
-                        </Grid>
-                    </Grid>
+                    </Border>
                     <ControlTemplate.Triggers>
                         <Trigger SourceName="PointerStatesListener" Property="CurrentStateName" Value="PointerOver">
                             <Setter TargetName="LayoutRoot" Property="Background" Value="{DynamicResource TopNavigationViewItemBackgroundPointerOver}" />
@@ -645,10 +657,12 @@
                             <Setter TargetName="ContentPresenter" Property="Foreground" Value="{DynamicResource TopNavigationViewItemForegroundDisabled}" />
                         </Trigger>
                         <Trigger SourceName="NavigationViewIconPositionStatesListener" Property="CurrentStateName" Value="IconOnly">
-                            <Setter TargetName="PointerRectangle" Property="Visibility" Value="Visible" />
-                            <Setter TargetName="LayoutRoot" Property="MinWidth" Value="48" />
+                            <Setter TargetName="LayoutRoot" Property="Width" Value="36" />
+                            <Setter TargetName="LayoutRoot" Property="Height" Value="36" />
+                            <Setter TargetName="LayoutRoot" Property="Margin" Value="2" />
+                            <Setter TargetName="IconBox" Property="Margin" Value="10,0" />
                             <Setter TargetName="ContentPresenter" Property="Visibility" Value="Collapsed" />
-                            <Setter TargetName="SelectionIndicatorGrid" Property="Margin" Value="4,0,4,4" />
+                            <Setter TargetName="SelectionIndicatorGrid" Property="Margin" Value="0" />
                             <Setter TargetName="ExpandCollapseChevron" Property="Margin" Value="{DynamicResource TopNavigationViewItemIconOnlyExpandChevronMargin}" />
                         </Trigger>
                         <Trigger SourceName="NavigationViewIconPositionStatesListener" Property="CurrentStateName" Value="ContentOnly">
@@ -1349,7 +1363,7 @@
                                                 <!-- FooterItems -->
                                                 <local:ItemsRepeaterScrollHost Grid.Row="3">
                                                     <ScrollViewer x:Name="FooterItemsScrollViewer"
-                                                        VerticalScrollBarVisibility="Auto">
+                                                                  VerticalScrollBarVisibility="Auto">
                                                         <!-- contract7Present:VerticalAnchorRatio="1" -->
                                                         <local:ItemsRepeater
                                                             x:Name="FooterMenuItemsHost" VerticalAlignment="Bottom"/>
diff --git a/ModernWpf.Controls/NavigationView/NavigationViewItemBase.cs b/ModernWpf.Controls/NavigationView/NavigationViewItemBase.cs
index 7c6f76bad..a7562de9b 100644
--- a/ModernWpf.Controls/NavigationView/NavigationViewItemBase.cs
+++ b/ModernWpf.Controls/NavigationView/NavigationViewItemBase.cs
@@ -144,7 +144,7 @@ DependencyObject IControlProtected.GetTemplateChild(string childName)
         }
 
         // TODO: Constant is a temporary measure. Potentially expose using TemplateSettings.
-        internal const int c_itemIndentation = 25;
+        internal const int c_itemIndentation = 31;
 
         internal bool IsTopLevelItem
         {
diff --git a/ModernWpf.Controls/NavigationView/NavigationViewItemHeader.cs b/ModernWpf.Controls/NavigationView/NavigationViewItemHeader.cs
index 3d5271059..0ee8eab48 100644
--- a/ModernWpf.Controls/NavigationView/NavigationViewItemHeader.cs
+++ b/ModernWpf.Controls/NavigationView/NavigationViewItemHeader.cs
@@ -70,6 +70,11 @@ void UpdateIsClosedCompact()
         void UpdateVisualState(bool useTransitions)
         {
             VisualStateManager.GoToState(this, m_isClosedCompact && IsTopLevelItem ? "HeaderTextCollapsed" : "HeaderTextVisible", useTransitions);
+
+            if (GetNavigationView() is { } navigationView)
+            {
+                VisualStateManager.GoToState(this, navigationView.PaneDisplayMode == NavigationViewPaneDisplayMode.Top ? "TopMode" : "LeftMode", useTransitions);
+            }
         }
 
         private protected override void OnNavigationViewItemBaseDepthChanged()
diff --git a/ModernWpf/Styles/NavigationBackButton.xaml b/ModernWpf/Styles/NavigationBackButton.xaml
index ae8a377f6..b9bd191ff 100644
--- a/ModernWpf/Styles/NavigationBackButton.xaml
+++ b/ModernWpf/Styles/NavigationBackButton.xaml
@@ -10,12 +10,12 @@
         <ResourceDictionary Source="Button.xaml" />
     </ResourceDictionary.MergedDictionaries>
 
-    <sys:Double x:Key="NavigationBackButtonWidth">38</sys:Double>
-    <sys:Double x:Key="NavigationBackButtonHeight">34</sys:Double>
+    <sys:Double x:Key="NavigationBackButtonWidth">40</sys:Double>
+    <sys:Double x:Key="NavigationBackButtonHeight">36</sys:Double>
 
     <Style x:Key="NavigationBackButtonNormalStyle" TargetType="Button" BasedOn="{StaticResource DefaultButtonStyle}">
         <Setter Property="Background" Value="{DynamicResource NavigationViewBackButtonBackground}" />
-        <Setter Property="Foreground" Value="{DynamicResource NavigationViewItemForeground}" />
+        <Setter Property="Foreground" Value="{DynamicResource NavigationViewItemForegroundChecked}" />
         <Setter Property="FontFamily" Value="{DynamicResource SymbolThemeFontFamily}" />
         <Setter Property="FontSize" Value="16" />
         <Setter Property="Height" Value="{DynamicResource NavigationBackButtonHeight}" />
diff --git a/ModernWpf/Styles/NavigationView.xaml b/ModernWpf/Styles/NavigationView.xaml
index 6efb0d5d3..909be6750 100644
--- a/ModernWpf/Styles/NavigationView.xaml
+++ b/ModernWpf/Styles/NavigationView.xaml
@@ -10,19 +10,22 @@
         <ResourceDictionary Source="TextStyles.xaml" />
     </ResourceDictionary.MergedDictionaries>
 
-    <Thickness x:Key="NavigationViewAutoSuggestBoxMargin">10,0,16,0</Thickness>
-    <Thickness x:Key="TopNavigationViewAutoSuggestBoxMargin">12,0,12,0</Thickness>
-    <sys:Double x:Key="PaneToggleButtonHeight">34</sys:Double>
-    <sys:Double x:Key="PaneToggleButtonWidth">38</sys:Double>
-    <sys:Double x:Key="NavigationViewCompactPaneLength">46</sys:Double>
-    <sys:Double x:Key="NavigationViewIconBoxWidth">38</sys:Double>
-    <sys:Double x:Key="NavigationViewTopPaneHeight">40</sys:Double>
-    <sys:Double x:Key="TopNavigationViewPaneCustomContentMinWidth">40</sys:Double>
+    <Thickness x:Key="NavigationViewAutoSuggestBoxMargin">16,0</Thickness>
+    <Thickness x:Key="TopNavigationViewAutoSuggestBoxMargin">4,0</Thickness>
+    <sys:Double x:Key="PaneToggleButtonHeight">36</sys:Double>
+    <sys:Double x:Key="PaneToggleButtonWidth">40</sys:Double>
+    <sys:Double x:Key="NavigationViewCompactPaneLength">48</sys:Double>
+    <sys:Double x:Key="NavigationViewIconBoxWidth">40</sys:Double>
+    <sys:Double x:Key="NavigationViewTopPaneHeight">48</sys:Double>
+    <sys:Double x:Key="NavigationViewAutoSuggestAreaHeight">40</sys:Double>
+    <sys:Double x:Key="TopNavigationViewPaneCustomContentMinWidth">48</sys:Double>
     <sys:Double x:Key="TopNavigationViewOverflowButtonWidth">40</sys:Double>
     <sys:Double x:Key="TopNavigationViewOverflowButtonHeight">40</sys:Double>
+    <sys:Double x:Key="TopNavigationViewSettingsButtonWidth">40</sys:Double>
+    <sys:Double x:Key="TopNavigationViewSettingsButtonHeight">40</sys:Double>
 
     <sys:Double x:Key="NavigationViewItemOnLeftMinHeight">36</sys:Double>
-    <sys:Double x:Key="NavigationViewPaneHeaderRowMinHeight">44</sys:Double>
+    <sys:Double x:Key="NavigationViewPaneHeaderRowMinHeight">40</sys:Double>
 
     <sys:Double x:Key="NavigationViewItemSeparatorHeight">1</sys:Double>
     <sys:Double x:Key="TopNavigationViewItemSeparatorWidth">1</sys:Double>
@@ -30,21 +33,28 @@
     <Thickness x:Key="NavigationViewToggleBorderThickness">0</Thickness>
     <Thickness x:Key="NavigationViewItemBorderThickness">1</Thickness>
     <Thickness x:Key="NavigationViewItemOnLeftIconBoxMargin">11,0,11,0</Thickness>
-    <Thickness x:Key="NavigationViewItemInnerHeaderMargin">12,0</Thickness>
+    <Thickness x:Key="NavigationViewItemButtonMargin">4,2</Thickness>
+    <Thickness x:Key="NavigationViewItemInnerHeaderMargin">16,0</Thickness>
+    <Thickness x:Key="TopNavigationViewItemInnerHeaderMargin">12,0</Thickness>
     <Thickness x:Key="NavigationViewMinimalHeaderMargin">8,5,0,0</Thickness>
-    <Thickness x:Key="NavigationViewHeaderMargin">12,5,0,11</Thickness>
+    <Thickness x:Key="NavigationViewButtonHolderGridMargin">0,4</Thickness>
+    <Thickness x:Key="NavigationViewPaneContentGridMargin">0,4</Thickness>
+    <Thickness x:Key="TopNavigationViewTopNavGridMargin">4,0</Thickness>
+    <Thickness x:Key="NavigationViewHeaderMargin">56,44,0,0</Thickness>
+    <Thickness x:Key="NavigationViewContentPresenterMargin">48,12,0,0</Thickness>
+    <Thickness x:Key="NavigationViewContentMargin">0</Thickness>
     <Thickness x:Key="NavigationViewPaneTitlePresenterMargin">8,4,0,0</Thickness>
     <Thickness x:Key="NavigationViewItemMargin">0</Thickness>
     <Thickness x:Key="TopNavigationViewItemMargin">0</Thickness>
-    <Thickness x:Key="NavigationViewItemSeparatorMargin">0,2</Thickness>
-    <Thickness x:Key="NavigationViewCompactItemSeparatorMargin">0,2</Thickness>
-    <Thickness x:Key="TopNavigationViewItemSeparatorMargin">4,0</Thickness>
+    <Thickness x:Key="NavigationViewItemSeparatorMargin">0,3,0,4</Thickness>
+    <Thickness x:Key="NavigationViewCompactItemSeparatorMargin">0,3,0,4</Thickness>
+    <Thickness x:Key="TopNavigationViewItemSeparatorMargin">3,0,4,0</Thickness>
     <Thickness x:Key="TopNavigationViewOverflowButtonMargin">0</Thickness>
-    <Thickness x:Key="NavigationViewItemContentPresenterMargin">4,0,20,0</Thickness>
+    <Thickness x:Key="NavigationViewItemContentPresenterMargin">4,-1,20,-1</Thickness>
     <Thickness x:Key="NavigationViewCompactItemContentPresenterMargin">0,0,0,0</Thickness>
-    <Thickness x:Key="TopNavigationViewItemContentPresenterMargin">8,0,12,0</Thickness>
+    <Thickness x:Key="TopNavigationViewItemContentPresenterMargin">8,-1,12,-1</Thickness>
     <Thickness x:Key="TopNavigationViewItemContentOnlyContentPresenterMargin">12,0</Thickness>
-    <Thickness x:Key="NavigationViewItemExpandChevronMargin">-20,0,6,0</Thickness>
+    <Thickness x:Key="NavigationViewItemExpandChevronMargin">0</Thickness>
     <Thickness x:Key="TopNavigationViewItemExpandChevronMargin">-16,0,0,0</Thickness>
     <Thickness x:Key="TopNavigationViewItemIconOnlyExpandChevronMargin">0,0,0,0</Thickness>
     <Thickness x:Key="TopNavigationViewItemContentOnlyExpandChevronMargin">-12,0,0,0</Thickness>
@@ -73,9 +83,9 @@
         <Setter Property="HorizontalContentAlignment" Value="Center" />
         <Setter Property="VerticalContentAlignment" Value="Center" />
         <Setter Property="Background" Value="{DynamicResource NavigationViewItemBackground}" />
-        <Setter Property="Foreground" Value="{DynamicResource NavigationViewItemForeground}" />
+        <Setter Property="Foreground" Value="{DynamicResource NavigationViewItemForegroundChecked}" />
         <Setter Property="BorderThickness" Value="{DynamicResource NavigationViewToggleBorderThickness}" />
-        <Setter Property="Padding" Value="4,2" />
+        <Setter Property="Padding" Value="{DynamicResource NavigationViewItemButtonMargin}" />
         <Setter Property="primitives:ControlHelper.CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
         <Setter Property="primitives:FocusVisualHelper.FocusVisualMargin" Value="0" />
         <Setter Property="Template">
@@ -144,7 +154,7 @@
         <Setter Property="FontFamily" Value="{DynamicResource SymbolThemeFontFamily}" />
         <Setter Property="BorderThickness" Value="{DynamicResource NavigationViewToggleBorderThickness}" />
         <Setter Property="Background" Value="{DynamicResource NavigationViewItemBackground}" />
-        <Setter Property="Foreground" Value="{DynamicResource NavigationViewItemForeground}" />
+        <Setter Property="Foreground" Value="{DynamicResource NavigationViewItemForegroundChecked}" />
         <Setter Property="ContentTemplate">
             <Setter.Value>
                 <DataTemplate>
@@ -159,14 +169,15 @@
     </Style>
 
     <Style x:Key="NavigationViewItemHeaderTextStyle" TargetType="TextBlock" BasedOn="{StaticResource BaseTextBlockStyle}">
+        <Setter Property="FontSize" Value="14" />
         <Setter Property="FontWeight" Value="SemiBold" />
         <!--<Setter Property="OpticalMarginAlignment" Value="TrimSideBearings" />-->
         <Setter Property="TextWrapping" Value="NoWrap" />
     </Style>
 
     <Style x:Key="NavigationViewTitleHeaderContentControlTextStyle" TargetType="ContentControl">
-        <Setter Property="FontWeight" Value="350" />
-        <Setter Property="FontSize" Value="24" />
+        <Setter Property="FontWeight" Value="SemiBold" />
+        <Setter Property="FontSize" Value="28" />
         <!--<Setter Property="FontFamily" Value="XamlAutoFontFamily" />-->
         <Setter Property="Margin" Value="{DynamicResource NavigationViewHeaderMargin}" />
         <Setter Property="VerticalAlignment" Value="Stretch" />
diff --git a/ModernWpf/ThemeResources/Dark.xaml b/ModernWpf/ThemeResources/Dark.xaml
index 438e8a2cd..501906d94 100644
--- a/ModernWpf/ThemeResources/Dark.xaml
+++ b/ModernWpf/ThemeResources/Dark.xaml
@@ -1151,7 +1151,8 @@
     <!-- Resources for NavigationView -->
     <m:StaticResource x:Key="NavigationViewDefaultPaneBackground" ResourceKey="SolidBackgroundFillColorBaseBrush" />
     <m:StaticResource x:Key="NavigationViewExpandedPaneBackground" ResourceKey="ControlFillColorTransparentBrush" />
-    <m:StaticResource x:Key="NavigationViewTopPaneBackground" ResourceKey="SolidBackgroundFillColorBaseBrush" />
+    <m:StaticResource x:Key="NavigationViewTopPaneBackground" ResourceKey="ControlFillColorTransparentBrush" />
+    <m:StaticResource x:Key="NavigationViewContentBackground" ResourceKey="SolidBackgroundFillColorBaseBrush" />
 
     <m:StaticResource x:Key="NavigationViewItemBackground" ResourceKey="SubtleFillColorTransparentBrush" />
     <m:StaticResource x:Key="NavigationViewItemBackgroundPointerOver" ResourceKey="SubtleFillColorSecondaryBrush" />
@@ -1166,9 +1167,9 @@
     <m:StaticResource x:Key="NavigationViewItemBackgroundSelectedPressed" ResourceKey="SubtleFillColorSecondaryBrush" />
     <m:StaticResource x:Key="NavigationViewItemBackgroundSelectedDisabled" ResourceKey="SubtleFillColorSecondaryBrush" />
 
-    <m:StaticResource x:Key="NavigationViewItemForeground" ResourceKey="TextFillColorPrimaryBrush" />
-    <m:StaticResource x:Key="NavigationViewItemForegroundPointerOver" ResourceKey="TextFillColorPrimaryBrush" />
-    <m:StaticResource x:Key="NavigationViewItemForegroundPressed" ResourceKey="TextFillColorSecondaryBrush" />
+    <m:StaticResource x:Key="NavigationViewItemForeground" ResourceKey="TextFillColorSecondaryBrush" />
+    <m:StaticResource x:Key="NavigationViewItemForegroundPointerOver" ResourceKey="TextFillColorSecondaryBrush" />
+    <m:StaticResource x:Key="NavigationViewItemForegroundPressed" ResourceKey="TextFillColorPrimaryBrush" />
     <m:StaticResource x:Key="NavigationViewItemForegroundDisabled" ResourceKey="TextFillColorDisabledBrush" />
     <m:StaticResource x:Key="NavigationViewItemForegroundChecked" ResourceKey="TextFillColorPrimaryBrush" />
     <m:StaticResource x:Key="NavigationViewItemForegroundCheckedPointerOver" ResourceKey="TextFillColorPrimaryBrush" />
diff --git a/ModernWpf/ThemeResources/HighContrast.xaml b/ModernWpf/ThemeResources/HighContrast.xaml
index c3ef33513..01639c579 100644
--- a/ModernWpf/ThemeResources/HighContrast.xaml
+++ b/ModernWpf/ThemeResources/HighContrast.xaml
@@ -1039,6 +1039,7 @@
     <m:StaticResource x:Key="NavigationViewDefaultPaneBackground" ResourceKey="AcrylicInAppFillColorDefaultBrush" />
     <m:StaticResource x:Key="NavigationViewExpandedPaneBackground" ResourceKey="SystemColorWindowColorBrush" />
     <m:StaticResource x:Key="NavigationViewTopPaneBackground" ResourceKey="AcrylicInAppFillColorDefaultBrush" />
+    <SolidColorBrush x:Key="NavigationViewContentBackground" Color="{StaticResource SystemChromeMediumColor}" />
 
     <m:StaticResource x:Key="NavigationViewItemBackground" ResourceKey="SystemControlBackgroundBaseLowBrush" />
     <m:StaticResource x:Key="NavigationViewItemBackgroundPointerOver" ResourceKey="SystemControlHighlightListLowRevealBackgroundBrush" />
diff --git a/ModernWpf/ThemeResources/Light.xaml b/ModernWpf/ThemeResources/Light.xaml
index 904d46148..f12dee8a4 100644
--- a/ModernWpf/ThemeResources/Light.xaml
+++ b/ModernWpf/ThemeResources/Light.xaml
@@ -1154,7 +1154,8 @@
     <!-- Resources for NavigationView -->
     <m:StaticResource x:Key="NavigationViewDefaultPaneBackground" ResourceKey="SolidBackgroundFillColorBaseBrush" />
     <m:StaticResource x:Key="NavigationViewExpandedPaneBackground" ResourceKey="ControlFillColorTransparentBrush" />
-    <m:StaticResource x:Key="NavigationViewTopPaneBackground" ResourceKey="SolidBackgroundFillColorBaseBrush" />
+    <m:StaticResource x:Key="NavigationViewTopPaneBackground" ResourceKey="ControlFillColorTransparentBrush" />
+    <m:StaticResource x:Key="NavigationViewContentBackground" ResourceKey="SolidBackgroundFillColorBaseBrush" />
 
     <m:StaticResource x:Key="NavigationViewItemBackground" ResourceKey="SubtleFillColorTransparentBrush" />
     <m:StaticResource x:Key="NavigationViewItemBackgroundPointerOver" ResourceKey="SubtleFillColorSecondaryBrush" />
@@ -1169,9 +1170,9 @@
     <m:StaticResource x:Key="NavigationViewItemBackgroundSelectedPressed" ResourceKey="SubtleFillColorSecondaryBrush" />
     <m:StaticResource x:Key="NavigationViewItemBackgroundSelectedDisabled" ResourceKey="SubtleFillColorSecondaryBrush" />
 
-    <m:StaticResource x:Key="NavigationViewItemForeground" ResourceKey="TextFillColorPrimaryBrush" />
-    <m:StaticResource x:Key="NavigationViewItemForegroundPointerOver" ResourceKey="TextFillColorPrimaryBrush" />
-    <m:StaticResource x:Key="NavigationViewItemForegroundPressed" ResourceKey="TextFillColorSecondaryBrush" />
+    <m:StaticResource x:Key="NavigationViewItemForeground" ResourceKey="TextFillColorSecondaryBrush" />
+    <m:StaticResource x:Key="NavigationViewItemForegroundPointerOver" ResourceKey="TextFillColorSecondaryBrush" />
+    <m:StaticResource x:Key="NavigationViewItemForegroundPressed" ResourceKey="TextFillColorPrimaryBrush" />
     <m:StaticResource x:Key="NavigationViewItemForegroundDisabled" ResourceKey="TextFillColorDisabledBrush" />
     <m:StaticResource x:Key="NavigationViewItemForegroundChecked" ResourceKey="TextFillColorPrimaryBrush" />
     <m:StaticResource x:Key="NavigationViewItemForegroundCheckedPointerOver" ResourceKey="TextFillColorPrimaryBrush" />
diff --git a/test/NavigationView_TestUI/TopMode/NavigationViewTopNavOnlyPage.xaml.cs b/test/NavigationView_TestUI/TopMode/NavigationViewTopNavOnlyPage.xaml.cs
index b61fd289c..599a68d10 100644
--- a/test/NavigationView_TestUI/TopMode/NavigationViewTopNavOnlyPage.xaml.cs
+++ b/test/NavigationView_TestUI/TopMode/NavigationViewTopNavOnlyPage.xaml.cs
@@ -183,7 +183,7 @@ private void NavView_ItemInvoked(NavigationView sender, NavigationViewItemInvoke
 
         private void ChangeGamesContent_Click(object sender, RoutedEventArgs e)
         {
-            GamesItem.Content = "Games AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA";
+            GamesItem.Content = "Games AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA";
         }
 
         private void NavInvalidateMeasure_Click(object sender, RoutedEventArgs e)