NavigationView: Add more theme resources to configure margins (micros…

…oft/microsoft-ui-xaml#2923)
Kinnara · Jul 26, 2020 · fd718cf · fd718cf
1 parent 8e0b6ed
commit fd718cf
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/ModernWpf.Controls/NavigationView/NavigationView.xaml b/ModernWpf.Controls/NavigationView/NavigationView.xaml
@@ -1132,6 +1132,7 @@
                                         x:Name="TopNavOverflowButton"
                                         Grid.Column="4"
                                         Content="More"
+                                        Margin="{DynamicResource TopNavigationViewOverflowButtonMargin}"
                                         Style="{StaticResource NavigationViewOverflowButtonStyleWhenPaneOnTop}"
                                         Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.OverflowButtonVisibility}">
 
@@ -1175,7 +1176,7 @@
                                         <ContentControl
                                             x:Name="TopPaneAutoSuggestBoxPresenter"
                                             Style="{StaticResource DefaultContentControlStyle}"
-                                            Margin="12,0,12,0"
+                                            Margin="{DynamicResource TopNavigationViewAutoSuggestBoxMargin}"
                                             MinWidth="48"
                                             IsTabStop="False"
                                             HorizontalContentAlignment="Stretch"
@@ -1409,6 +1410,7 @@
         <Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" />
         <Setter Property="FontWeight" Value="Normal" />
         <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
+        <Setter Property="Margin" Value="{DynamicResource NavigationViewItemMargin}" />
         <Setter Property="UseSystemFocusVisuals" Value="True" />
         <Setter Property="FocusVisualStyle" Value="{DynamicResource {x:Static SystemParameters.FocusVisualStyleKey}}" />
         <Setter Property="HorizontalContentAlignment" Value="Stretch" />
@@ -1443,6 +1445,9 @@
                                 -->
                                 <VisualState x:Name="OnTopNavigationPrimary">
                                     <Storyboard>
+                                        <ThicknessAnimationUsingKeyFrames Storyboard.TargetName="NavigationViewItemPresenter" Storyboard.TargetProperty="Margin">
+                                            <DiscreteThicknessKeyFrame KeyTime="0" Value="{DynamicResource TopNavigationViewItemMargin}" />
+                                        </ThicknessAnimationUsingKeyFrames>
                                         <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NavigationViewItemPresenter" Storyboard.TargetProperty="Style">
                                             <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource MUX_NavigationViewItemPresenterStyleWhenOnTopPane}" />
                                         </ObjectAnimationUsingKeyFrames>
@@ -1454,6 +1459,9 @@
                                 <!--
                                 <VisualState x:Name="OnTopNavigationPrimaryReveal">
                                     <Storyboard>
+                                        <ThicknessAnimationUsingKeyFrames Storyboard.TargetName="NavigationViewItemPresenter" Storyboard.TargetProperty="Margin">
+                                            <DiscreteThicknessKeyFrame KeyTime="0" Value="{DynamicResource TopNavigationViewItemMargin}" />
+                                        </ThicknessAnimationUsingKeyFrames>
                                         <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NavigationViewItemPresenter" Storyboard.TargetProperty="Style">
                                             <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource MUX_NavigationViewItemPresenterStyleWhenOnTopPaneWithRevealFocus}" />
                                         </ObjectAnimationUsingKeyFrames>

diff --git a/ModernWpf/Styles/NavigationView.xaml b/ModernWpf/Styles/NavigationView.xaml
@@ -11,6 +11,7 @@
     </ResourceDictionary.MergedDictionaries>
 
     <Thickness x:Key="NavigationViewAutoSuggestBoxMargin">10,0,16,0</Thickness>
+    <Thickness x:Key="TopNavigationViewAutoSuggestBoxMargin">12,0,12,0</Thickness>
     <sys:Double x:Key="PaneToggleButtonSize">40</sys:Double>
     <sys:Double x:Key="PaneToggleButtonHeight">40</sys:Double>
     <sys:Double x:Key="PaneToggleButtonWidth">40</sys:Double>
@@ -30,9 +31,12 @@
     <Thickness x:Key="NavigationViewMinimalHeaderMargin">8,5,0,0</Thickness>
     <Thickness x:Key="NavigationViewHeaderMargin">12,5,0,11</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">16,10</Thickness>
     <Thickness x:Key="NavigationViewCompactItemSeparatorMargin">16,10</Thickness>
     <Thickness x:Key="TopNavigationViewItemSeparatorMargin">10,0</Thickness>
+    <Thickness x:Key="TopNavigationViewOverflowButtonMargin">0</Thickness>
     <Thickness x:Key="NavigationViewItemContentPresenterMargin">0,0,20,0</Thickness>
     <Thickness x:Key="NavigationViewCompactItemContentPresenterMargin">0,0,16,0</Thickness>
     <Thickness x:Key="TopNavigationViewItemContentPresenterMargin">8,0,16,0</Thickness>