The pane title was being obscured by the pane toggle button. Outside …

…of High Contrast that works fine... but in HC the button background is opaque. I could split out resources for that background to be transparent in HC... but fundamentally this is a weird layout to have the text _under_ the button. It means that any non-transparent background is actually doing the wrong thing with regards to layering on the text. So... I opted to change how this was built. The key to fixing this was to have the button support both an icon and a piece of text. Since the control already has a forked template this was pretty easy. Move the ContentPresenter to be to the right of the fixed icon and update the layout accordingly. The search button was riding on the same style as the toggle button for some reason. That wasn't really necessary, as with a couple tweaks it could use a lightly styled standard Button template.
microsoft · Jan 12, 2019 · 99460c4 · 99460c4
1 parent 874e11e
commit 99460c4
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 28 deletions.
diff --git a/dev/NavigationView/NavigationView.xaml b/dev/NavigationView/NavigationView.xaml
@@ -163,7 +163,15 @@
                                     Style="{TemplateBinding PaneToggleButtonStyle}"
                                     AutomationProperties.LandmarkType="Navigation"
                                     Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.PaneToggleButtonVisibility}"
-                                    VerticalAlignment="Top"/>
+                                    VerticalAlignment="Top">
+                                    <TextBlock
+                                        x:Name="PaneTitleTextBlock" 
+                                        Grid.Column="0"
+                                        Text="{TemplateBinding PaneTitle}"
+                                        HorizontalAlignment="Left"
+                                        VerticalAlignment="Center"
+                                        Style="{StaticResource NavigationViewItemHeaderTextStyle}"/>
+                                </Button>
                             </Grid>
                         </Grid>
 
@@ -350,14 +358,6 @@
                                                 <ColumnDefinition Width="*"/>
                                             </Grid.ColumnDefinitions>
 
-                                            <TextBlock
-                                                x:Name="PaneTitleTextBlock" 
-                                                Grid.Column="0"
-                                                Text="{TemplateBinding PaneTitle}"
-                                                HorizontalAlignment="Left"
-                                                VerticalAlignment="Center"
-                                                Style="{StaticResource NavigationViewItemHeaderTextStyle}"/>
-
                                             <ContentControl
                                                 x:Name="PaneHeaderContentBorder"
                                                 IsTabStop="False"

diff --git a/dev/NavigationView/NavigationView_rs1_themeresources.xaml b/dev/NavigationView/NavigationView_rs1_themeresources.xaml
@@ -212,16 +212,23 @@
         <Setter Property="Background" Value="{ThemeResource NavigationViewItemBackground}" />
         <Setter Property="Foreground" Value="{ThemeResource NavigationViewItemForeground}" />
         <Setter Property="BorderThickness" Value="{ThemeResource NavigationViewToggleBorderThickness}" />
-        <Setter Property="Content" Value="&#xE700;" />
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="Button">
                     <Grid
                         x:Name="LayoutRoot"
+                        MinWidth="{TemplateBinding MinWidth}"
                         Height="{TemplateBinding MinHeight}"
                         Margin="{TemplateBinding Padding}"
                         Background="{TemplateBinding Background}"
                         HorizontalAlignment="Stretch">
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="40"/> <!-- TODO: How to best get from Double 'PaneToggleButtonWidth' to GridLength in markup? -->
+                            <ColumnDefinition Width="*"/>
+                        </Grid.ColumnDefinitions>
+                        <Grid.RowDefinitions>
+                            <RowDefinition Height="40"/> <!-- TODO: How to best get from Double 'PaneToggleButtonHeight' to GridLength in markup? -->
+                        </Grid.RowDefinitions>
 
                         <VisualStateManager.VisualStateGroups>
                             <VisualStateGroup x:Name="CommonStates">
@@ -271,36 +278,45 @@
                             </VisualStateGroup>
                         </VisualStateManager.VisualStateGroups>
 
-                        <Grid Width="{TemplateBinding MinWidth}" HorizontalAlignment="Left">
-                            <Viewbox
-                                x:Name="IconHost"
-                                Width="16"
-                                Height="16"
-                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-                                AutomationProperties.AccessibilityView="Raw">
+                        <Viewbox
+                            x:Name="IconHost"
+                            Width="16"
+                            Height="16"
+                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                            AutomationProperties.AccessibilityView="Raw">
 
-                                <ContentPresenter
-                                    x:Name="ContentPresenter"
-                                    Content="{TemplateBinding Content}"
-                                    FontSize="{TemplateBinding FontSize}"
-                                    AutomationProperties.AccessibilityView="Raw"/>
-                            </Viewbox>
-                        </Grid>
+                            <TextBlock
+                                x:Name="Icon"
+                                Text="&#xE700;"
+                                FontSize="{TemplateBinding FontSize}"
+                                AutomationProperties.AccessibilityView="Raw"/>
+
+                        </Viewbox>
+
+                        <ContentPresenter
+                            x:Name="ContentPresenter"
+                            VerticalContentAlignment="Center"
+                            Content="{TemplateBinding Content}"
+                            FontSize="{TemplateBinding FontSize}"
+                            Grid.Column="1"/>
 
                         <Border
                             x:Name="RevealBorder"
                             BorderBrush="{TemplateBinding BorderBrush}"
-                            BorderThickness="{TemplateBinding BorderThickness}" />
+                            BorderThickness="{TemplateBinding BorderThickness}"
+                            Grid.ColumnSpan="2"/>
                     </Grid>
                 </ControlTemplate>
             </Setter.Value>
         </Setter>
     </Style>
 
-    <Style x:Key="NavigationViewPaneSearchButtonStyle" BasedOn="{StaticResource PaneToggleButtonStyle}" TargetType="Button">
+    <Style x:Key="NavigationViewPaneSearchButtonStyle" TargetType="Button">
         <Setter Property="MinHeight" Value="40"/>
         <Setter Property="Content" Value="&#xE11A;"/>
+        <Setter Property="FontFamily" Value="Segoe MDL2 Assets" />
+        <Setter Property="BorderThickness" Value="{ThemeResource NavigationViewToggleBorderThickness}" />
     </Style>
 
     <Style x:Key="NavigationViewOverflowButtonStyleWhenPaneOnTop" TargetType="Button">

diff --git a/dev/NavigationView/TestUI/NavigationViewPage.xaml.cs b/dev/NavigationView/TestUI/NavigationViewPage.xaml.cs
@@ -440,7 +440,7 @@ private void NavView_PaneOpened(NavigationView sender, object args)
 
         private void ChangePaneTitle_Click(object sender, RoutedEventArgs e)
         {
-            NavView.PaneTitle = "";
+            NavView.PaneTitle = (String.IsNullOrEmpty(NavView.PaneTitle) ? "NavView Test" : "");
         }
 
         private void CopyVolumeToolTipButton_Click(object sender, RoutedEventArgs e)