Port microsoft/microsoft-ui-xaml#4573

ModernWpf.Controls/NavigationView/NavigationView.cs

@@ -1849,18 +1849,7 @@ void UpdatePaneButtonsWidths()
         {
             var templateSettings = GetTemplateSettings();
 
-            double newButtonWidths;
-            {
-                double init()
-                {
-                    if (DisplayMode == NavigationViewDisplayMode.Minimal)
-                    {
-                        return c_paneToggleButtonWidth;
-                    }
-                    return CompactPaneLength;
-                }
-                newButtonWidths = init();
-            }
+            var newButtonWidths = CompactPaneLength;
 
             templateSettings.PaneToggleButtonWidth = newButtonWidths;
             templateSettings.SmallerPaneToggleButtonWidth = newButtonWidths - 8;

ModernWpf.Controls/NavigationView/NavigationView.xaml

@@ -550,7 +550,7 @@
                                 x:Name="IconBox"
                                 Height="16"
                                 Width="16"
-                                Margin="12,0,0,0"
+                                Margin="16,0,0,0"
                                 VerticalAlignment="Center"
                                 HorizontalAlignment="Center">
                                 <ContentPresenter
@@ -1016,7 +1016,8 @@
                                     HorizontalAlignment="Center"
                                     Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.PaneToggleButtonVisibility}"
                                     VerticalAlignment="Top"
-                                    MinWidth="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.SmallerPaneToggleButtonWidth}">
+                                    MinWidth="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.SmallerPaneToggleButtonWidth}"
+                                    ui:FocusVisualHelper.FocusVisualMargin="0">
                                     <TextBlock
                                         x:Name="PaneTitleTextBlock"
                                         Grid.Column="0"
@@ -1025,6 +1026,7 @@
                                         VerticalAlignment="Center"
                                         Style="{DynamicResource NavigationViewItemHeaderTextStyle}"/>
                                 </Button>
+
                                 <Grid
                                     x:Name="PaneTitleHolder"
                                     Visibility="Collapsed">
@@ -1255,7 +1257,19 @@
                                                 x:Name="PaneAutoSuggestButton"
                                                 Visibility="Collapsed"
                                                 Style="{DynamicResource NavigationViewPaneSearchButtonStyle}"
-                                                Width="{TemplateBinding CompactPaneLength}"/>
+                                                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

ModernWpf/Styles/NavigationBackButton.xaml

@@ -31,7 +31,7 @@
             </Setter.Value>
         </Setter>
         <Setter Property="Margin"  Value="4,2" />
-        <Setter Property="primitives:ControlHelper.CornerRadius" Value="{DynamicResource OverlayCornerRadius}" />
+        <Setter Property="primitives:ControlHelper.CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="Button">

ModernWpf/Styles/NavigationView.xaml

@@ -13,10 +13,10 @@
     <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">46</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">48</sys:Double>
+    <sys:Double x:Key="NavigationViewTopPaneHeight">40</sys:Double>
     <sys:Double x:Key="TopNavigationViewPaneCustomContentMinWidth">40</sys:Double>
     <sys:Double x:Key="TopNavigationViewOverflowButtonWidth">40</sys:Double>
     <sys:Double x:Key="TopNavigationViewOverflowButtonHeight">40</sys:Double>
@@ -27,7 +27,7 @@
     <sys:Double x:Key="NavigationViewItemSeparatorHeight">1</sys:Double>
     <sys:Double x:Key="TopNavigationViewItemSeparatorWidth">1</sys:Double>
 
-    <Thickness x:Key="NavigationViewToggleBorderThickness">1</Thickness>
+    <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>
@@ -68,15 +68,15 @@
         <Setter Property="FontFamily" Value="{DynamicResource SymbolThemeFontFamily}" />
         <Setter Property="MinHeight" Value="{StaticResource PaneToggleButtonHeight}" />
         <Setter Property="MinWidth" Value="{StaticResource PaneToggleButtonWidth}" />
-        <Setter Property="Padding" Value="4,2" />
         <Setter Property="HorizontalAlignment" Value="Left" />
         <Setter Property="VerticalAlignment" Value="Top" />
         <Setter Property="HorizontalContentAlignment" Value="Center" />
         <Setter Property="VerticalContentAlignment" Value="Center" />
         <Setter Property="Background" Value="{DynamicResource NavigationViewItemBackground}" />
         <Setter Property="Foreground" Value="{DynamicResource NavigationViewItemForeground}" />
         <Setter Property="BorderThickness" Value="{DynamicResource NavigationViewToggleBorderThickness}" />
-        <Setter Property="primitives:ControlHelper.CornerRadius" Value="{DynamicResource OverlayCornerRadius}" />
+        <Setter Property="Padding" Value="4,2" />
+        <Setter Property="primitives:ControlHelper.CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
         <Setter Property="primitives:FocusVisualHelper.FocusVisualMargin" Value="0" />
         <Setter Property="Template">
             <Setter.Value>
@@ -141,18 +141,21 @@
     </Style>
 
     <Style x:Key="NavigationViewPaneSearchButtonStyle" TargetType="Button" BasedOn="{StaticResource DefaultButtonStyle}">
-        <Setter Property="MinHeight" Value="40" />
+        <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="ContentTemplate">
             <Setter.Value>
                 <DataTemplate>
                     <local:FontIconFallback Data="M 13.125 0 C 13.75651 0 14.365234 0.081381 14.951172 0.244141 C 15.537109 0.406902 16.083984 0.638021 16.591797 0.9375 C 17.099609 1.23698 17.563477 1.59668 17.983398 2.016602 C 18.40332 2.436523 18.76302 2.900391 19.0625 3.408203 C 19.361979 3.916016 19.593098 4.462891 19.755859 5.048828 C 19.918619 5.634766 20 6.24349 20 6.875 C 20 7.506511 19.918619 8.115234 19.755859 8.701172 C 19.593098 9.287109 19.361979 9.833984 19.0625 10.341797 C 18.76302 10.849609 18.40332 11.313477 17.983398 11.733398 C 17.563477 12.15332 17.099609 12.513021 16.591797 12.8125 C 16.083984 13.111979 15.537109 13.3431 14.951172 13.505859 C 14.365234 13.66862 13.75651 13.75 13.125 13.75 C 12.311197 13.75 11.531575 13.613281 10.786133 13.339844 C 10.040689 13.066406 9.355469 12.672526 8.730469 12.158203 L 1.064453 19.814453 C 0.940755 19.93815 0.794271 20 0.625 20 C 0.455729 20 0.309245 19.93815 0.185547 19.814453 C 0.061849 19.690756 0 19.544271 0 19.375 C 0 19.205729 0.061849 19.059244 0.185547 18.935547 L 7.841797 11.269531 C 7.327474 10.644531 6.933594 9.959311 6.660156 9.213867 C 6.386719 8.468425 6.25 7.688803 6.25 6.875 C 6.25 6.24349 6.33138 5.634766 6.494141 5.048828 C 6.6569 4.462891 6.888021 3.916016 7.1875 3.408203 C 7.486979 2.900391 7.84668 2.436523 8.266602 2.016602 C 8.686523 1.59668 9.150391 1.23698 9.658203 0.9375 C 10.166016 0.638021 10.712891 0.406902 11.298828 0.244141 C 11.884766 0.081381 12.493489 0 13.125 0 Z M 13.125 12.5 C 13.899739 12.5 14.628906 12.351889 15.3125 12.055664 C 16 11.75944 16.591797 11.357422 17.099609 10.849609 C 17.607422 10.341797 18.009439 9.746094 18.305664 9.0625 C 18.601887 8.378906 18.75 7.64974 18.75 6.875 C 18.75 6.100261 18.601887 5.371094 18.305664 4.6875 C 18.009439 4 17.607422 3.408203 17.099609 2.900391 C 16.591797 2.392578 16 1.990561 15.3125 1.694336 C 14.628906 1.398113 13.899739 1.25 13.125 1.25 C 12.35026 1.25 11.621094 1.398113 10.9375 1.694336 C 10.253906 1.990561 9.658203 2.392578 9.150391 2.900391 C 8.642578 3.408203 8.24056 4 7.944336 4.6875 C 7.648111 5.371094 7.5 6.100261 7.5 6.875 C 7.5 7.64974 7.648111 8.378906 7.944336 9.0625 C 8.24056 9.746094 8.642578 10.341797 9.150391 10.849609 C 9.658203 11.357422 10.253906 11.75944 10.9375 12.055664 C 11.621094 12.351889 12.35026 12.5 13.125 12.5 Z" />
                 </DataTemplate>
             </Setter.Value>
         </Setter>
-        <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="MinHeight" Value="36" />
+        <Setter Property="HorizontalAlignment" Value="Center" />
+        <Setter Property="primitives:FocusVisualHelper.FocusVisualMargin" Value="-4,0" />
+        <Setter Property="primitives:ControlHelper.CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
     </Style>
 
     <Style x:Key="NavigationViewItemHeaderTextStyle" TargetType="TextBlock" BasedOn="{StaticResource BaseTextBlockStyle}">

ModernWpf/ThemeResources/Dark.xaml

@@ -74,8 +74,6 @@
     <SolidColorBrush x:Key="SystemControlDisabledChromeMediumLowBrush" Color="{m:StaticColor SystemChromeMediumLowColor}" />
     <SolidColorBrush x:Key="SystemControlDisabledListMediumBrush" Color="{m:StaticColor SystemListMediumColor}" />
     <SolidColorBrush x:Key="SystemControlDisabledTransparentBrush" Color="Transparent" />
-    <SolidColorBrush x:Key="SystemControlFocusVisualPrimaryBrush" Color="{StaticResource FocusStrokeColorOuter}"/>
-    <SolidColorBrush x:Key="SystemControlFocusVisualSecondaryBrush" Color="{StaticResource FocusStrokeColorInner}"/>
     <SolidColorBrush x:Key="SystemControlRevealFocusVisualBrush" Color="{m:DynamicColor SystemAccentColor}" />
     <SolidColorBrush x:Key="SystemControlForegroundAccentBrush" Color="{m:DynamicColor SystemAccentColor}" />
     <SolidColorBrush x:Key="SystemControlForegroundAltHighBrush" Color="{m:StaticColor SystemAltHighColor}" />
@@ -434,6 +432,8 @@
     <Thickness x:Key="TextControlBorderThemeThickness">1</Thickness>
     <Thickness x:Key="TextControlBorderThemeThicknessFocused">1,1,1,2</Thickness>
     <Thickness x:Key="TextControlThemePadding">10,5,6,6</Thickness>
+    <SolidColorBrush x:Key="SystemControlFocusVisualPrimaryBrush" Color="{StaticResource FocusStrokeColorOuter}"/>
+    <SolidColorBrush x:Key="SystemControlFocusVisualSecondaryBrush" Color="{StaticResource FocusStrokeColorInner}"/>
     <!--#endregion-->
 
     <!-- Resources for AppBarButton -->
@@ -1142,9 +1142,9 @@
     <m:StaticResource x:Key="MenuFlyoutSubItemRevealBorderBrushDisabled" ResourceKey="SubtleFillColorTransparentBrush" />
 
     <!-- Resources for NavigationView -->
-    <m:StaticResource x:Key="NavigationViewDefaultPaneBackground" ResourceKey="NavigationViewDefaultPaneBackground" />
-    <m:StaticResource x:Key="NavigationViewExpandedPaneBackground" ResourceKey="SolidBackgroundFillColorBaseBrush" />
-    <m:StaticResource x:Key="NavigationViewTopPaneBackground" ResourceKey="AcrylicInAppFillColorDefaultBrush" />
+    <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="NavigationViewItemBackground" ResourceKey="SubtleFillColorTransparentBrush" />
     <m:StaticResource x:Key="NavigationViewItemBackgroundPointerOver" ResourceKey="SubtleFillColorSecondaryBrush" />

ModernWpf/ThemeResources/HighContrast.xaml

@@ -74,8 +74,6 @@
     <SolidColorBrush x:Key="SystemControlDisabledChromeMediumLowBrush" Color="{m:ThemeResource SystemColorButtonFaceColor}" />
     <SolidColorBrush x:Key="SystemControlDisabledListMediumBrush" Color="{m:ThemeResource SystemColorGrayTextColor}" />
     <SolidColorBrush x:Key="SystemControlDisabledTransparentBrush" Color="{m:ThemeResource SystemColorGrayTextColor}" />
-    <SolidColorBrush x:Key="SystemControlFocusVisualPrimaryBrush" Color="{m:ThemeResource SystemColorWindowTextColor }"/>
-    <SolidColorBrush x:Key="SystemControlFocusVisualSecondaryBrush" Color="{m:ThemeResource SystemColorWindowColor}"/>
     <SolidColorBrush x:Key="SystemControlRevealFocusVisualBrush" Color="{m:ThemeResource SystemAccentColor}" />
     <SolidColorBrush x:Key="SystemControlForegroundAccentBrush" Color="{m:ThemeResource SystemColorButtonTextColor}" />
     <SolidColorBrush x:Key="SystemControlForegroundAltHighBrush" Color="{m:ThemeResource SystemColorButtonTextColor}" />
@@ -278,6 +276,8 @@
     <Thickness x:Key="TextControlBorderThemeThickness">1</Thickness>
     <Thickness x:Key="TextControlBorderThemeThicknessFocused">2</Thickness>
     <Thickness x:Key="TextControlThemePadding">10,5,6,6</Thickness>
+    <SolidColorBrush x:Key="SystemControlFocusVisualPrimaryBrush" Color="{m:ThemeResource SystemColorWindowTextColor}"/>
+    <SolidColorBrush x:Key="SystemControlFocusVisualSecondaryBrush" Color="{m:ThemeResource SystemColorWindowColor}"/>
     <!--#endregion-->
 
     <!-- Background Brushes -->

ModernWpf/ThemeResources/Light.xaml

@@ -74,8 +74,6 @@
     <SolidColorBrush x:Key="SystemControlDisabledChromeMediumLowBrush" Color="{m:StaticColor SystemChromeMediumLowColor}" />
     <SolidColorBrush x:Key="SystemControlDisabledListMediumBrush" Color="{m:StaticColor SystemListMediumColor}" />
     <SolidColorBrush x:Key="SystemControlDisabledTransparentBrush" Color="Transparent" />
-    <SolidColorBrush x:Key="SystemControlFocusVisualPrimaryBrush" Color="{StaticResource FocusStrokeColorOuter}"/>
-    <SolidColorBrush x:Key="SystemControlFocusVisualSecondaryBrush" Color="{StaticResource FocusStrokeColorInner}"/>
     <SolidColorBrush x:Key="SystemControlRevealFocusVisualBrush" Color="{m:DynamicColor SystemAccentColor}" />
     <SolidColorBrush x:Key="SystemControlForegroundAccentBrush" Color="{m:DynamicColor SystemAccentColor}" />
     <SolidColorBrush x:Key="SystemControlForegroundAltHighBrush" Color="{m:StaticColor SystemAltHighColor}" />
@@ -437,6 +435,8 @@
     <Thickness x:Key="TextControlBorderThemeThickness">1</Thickness>
     <Thickness x:Key="TextControlBorderThemeThicknessFocused">1,1,1,2</Thickness>
     <Thickness x:Key="TextControlThemePadding">10,5,6,6</Thickness>
+    <SolidColorBrush x:Key="SystemControlFocusVisualPrimaryBrush" Color="{StaticResource FocusStrokeColorOuter}"/>
+    <SolidColorBrush x:Key="SystemControlFocusVisualSecondaryBrush" Color="{StaticResource FocusStrokeColorInner}"/>
     <!--#endregion-->
 
     <!-- Resources for AppBarButton -->
@@ -1145,9 +1145,9 @@
     <m:StaticResource x:Key="MenuFlyoutSubItemRevealBorderBrushDisabled" ResourceKey="SubtleFillColorTransparentBrush" />
 
     <!-- Resources for NavigationView -->
-    <m:StaticResource x:Key="NavigationViewDefaultPaneBackground" ResourceKey="AcrylicInAppFillColorDefaultBrush" />
-    <m:StaticResource x:Key="NavigationViewExpandedPaneBackground" ResourceKey="SolidBackgroundFillColorBaseBrush" />
-    <m:StaticResource x:Key="NavigationViewTopPaneBackground" ResourceKey="AcrylicInAppFillColorDefaultBrush" />
+    <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="NavigationViewItemBackground" ResourceKey="SubtleFillColorTransparentBrush" />
     <m:StaticResource x:Key="NavigationViewItemBackgroundPointerOver" ResourceKey="SubtleFillColorSecondaryBrush" />

test/NavigationView_TestUI/Common/NavigationViewPage.xaml

@@ -315,7 +315,7 @@ Nullam egestas, orci sed molestie aliquet, diam ex euismod risus, ac dapibus qua
 
             <muxcontrols:NavigationView.PaneFooter>
                 <StackPanel Background="Plum">
-                    <Button x:Name="PaneFooterButton" AutomationProperties.Name="PaneFooterButton" Content="PaneFooter Button" Margin="5"/>
+                    <Button x:Name="PaneFooterButton" AutomationProperties.Name="PaneFooterButton" Content="PaneFooter Button" Margin="8"/>
                     <muxcontrols:NavigationViewItem x:Name="PaneFooterNavigationViewItem"
                                                     AutomationProperties.Name="PaneFooterNavigationViewItem"
                                                     Content="NVI" />