Pane Title is completely not visible in HC mode (#177)

* 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 24, 2019 · 643e7f1 · 643e7f1
1 parent 4b14f5d
commit 643e7f1
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 29 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>
 
@@ -346,18 +354,10 @@
 
                                         <Grid Grid.Row="2" Height="{StaticResource PaneToggleButtonHeight}">
                                             <Grid.ColumnDefinitions>
-                                                <ColumnDefinition Width="Auto"/>
+                                                <ColumnDefinition Width="{ThemeResource PaneToggleButtonWidth}"/>
                                                 <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="{ThemeResource PaneToggleButtonWidth}"/>
+                            <ColumnDefinition Width="*"/>
+                        </Grid.ColumnDefinitions>
+                        <Grid.RowDefinitions>
+                            <RowDefinition Height="{ThemeResource PaneToggleButtonHeight}"/>
+                        </Grid.RowDefinitions>
 
                         <VisualStateManager.VisualStateGroups>
                             <VisualStateGroup x:Name="CommonStates">
@@ -271,36 +278,47 @@
                             </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}" />
+        <Setter Property="Background" Value="{ThemeResource NavigationViewItemBackground}" />
+        <Setter Property="Foreground" Value="{ThemeResource NavigationViewItemForeground}" />
     </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)