Skip to content

Commit

Permalink
Add NavigationViewItemExpandedGlyphFontSize theme resource.
Browse files Browse the repository at this point in the history 
Also increased hit target area and FontSize of expand/collapse chevron in top mode to match Left mode values.
  • Loading branch information
@Felix-Dev
Felix-Dev committed Aug 6, 2020
1 parent 83b9530 commit 2b1145d
Showing 1 changed file with 72 additions and 58 deletions.
130 changes: 72 additions & 58 deletions dev/NavigationView/NavigationView_rs1_themeresources.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -256,8 +256,11 @@
<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>
<Thickness x:Key="TopNavigationViewItemContentOnlyContentPresenterMargin">12,0</Thickness>
<Thickness x:Key="NavigationViewItemExpandChevronMargin">-20,0,6,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>
<Thickness x:Key="TopNavigationViewItemOnOverflowContentPresenterMargin">12,0,20,0</Thickness>
<Thickness x:Key="TopNavigationViewItemOnOverflowNoIconContentPresenterMargin">16,0,20,0</Thickness>
<Thickness x:Key="TopNavigationViewItemOnOverflowExpandChevronMargin">-4,0,6,0</Thickness>
Expand All @@ -267,6 +270,7 @@
<Thickness x:Key="TopNavigationViewOverflowMenuPadding">0,8</Thickness>
<Thickness x:Key="NavigationViewItemChildrenMenuFlyoutPadding">0,8</Thickness>

<x:Double x:Key="NavigationViewItemExpandedGlyphFontSize">12.0</x:Double>
<x:String x:Key="NavigationViewItemExpandedGlyph">&#xE70D;</x:String>

<Style x:Key="PaneToggleButtonStyle" TargetType="Button">
Expand Down Expand Up @@ -553,7 +557,6 @@
</Storyboard>
</Grid.Resources>


<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="PointerStates">
<VisualState x:Name="Normal" />
Expand Down Expand Up @@ -690,7 +693,8 @@
Content="{TemplateBinding Icon}" />
</Viewbox>

<ContentPresenter x:Name="ContentPresenter"
<ContentPresenter
x:Name="ContentPresenter"
Grid.Column="1"
Margin="{ThemeResource NavigationViewItemContentPresenterMargin}"
ContentTransitions="{TemplateBinding ContentTransitions}"
Expand All @@ -702,23 +706,24 @@
Padding="{TemplateBinding Padding}"
AutomationProperties.AccessibilityView="Raw"/>

<Grid x:Name="ExpandCollapseChevron"
<Grid
x:Name="ExpandCollapseChevron"
Grid.Column="2"
Visibility="Collapsed"
HorizontalAlignment="Right"
Width="40"
Margin="{ThemeResource NavigationViewItemExpandChevronMargin}"
Background="Transparent">
<TextBlock
Width="12" Height="12"
RenderTransformOrigin="0.5, 0.5"
Foreground="{ThemeResource NavigationViewItemForeground}"
FontSize="12.0"
Text="{StaticResource NavigationViewItemExpandedGlyph}"
FontFamily="{StaticResource SymbolThemeFontFamily}"
VerticalAlignment="Center"
AutomationProperties.AccessibilityView="Raw"
IsTextScaleFactorEnabled="False">
RenderTransformOrigin="0.5, 0.5"
Foreground="{ThemeResource NavigationViewItemForeground}"
FontSize="{ThemeResource NavigationViewItemExpandedGlyphFontSize}"
Text="{StaticResource NavigationViewItemExpandedGlyph}"
FontFamily="{StaticResource SymbolThemeFontFamily}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
AutomationProperties.AccessibilityView="Raw"
IsTextScaleFactorEnabled="False">
<TextBlock.RenderTransform>
<RotateTransform x:Name="ExpandCollapseChevronRotateTransform" Angle="0"/>
</TextBlock.RenderTransform>
Expand Down Expand Up @@ -872,22 +877,24 @@
Padding="{TemplateBinding Padding}"
AutomationProperties.AccessibilityView="Raw"/>

<Grid x:Name="ExpandCollapseChevron"
<Grid
x:Name="ExpandCollapseChevron"
Grid.Column="2"
Visibility="Collapsed"
HorizontalAlignment="Right"
Width="40"
Margin="{ThemeResource NavigationViewItemExpandChevronMargin}"
Background="Transparent">
<TextBlock Foreground="{ThemeResource NavigationViewItemForeground}"
RenderTransformOrigin="0.5, 0.5"
Width="12" Height="12"
FontSize="12.0"
Text="{StaticResource NavigationViewItemExpandedGlyph}"
FontFamily="{StaticResource SymbolThemeFontFamily}"
VerticalAlignment="Center"
AutomationProperties.AccessibilityView="Raw"
IsTextScaleFactorEnabled="False">
<TextBlock
Foreground="{ThemeResource NavigationViewItemForeground}"
RenderTransformOrigin="0.5, 0.5"
FontSize="{ThemeResource NavigationViewItemExpandedGlyphFontSize}"
Text="{StaticResource NavigationViewItemExpandedGlyph}"
FontFamily="{StaticResource SymbolThemeFontFamily}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
AutomationProperties.AccessibilityView="Raw"
IsTextScaleFactorEnabled="False">
<TextBlock.RenderTransform>
<RotateTransform x:Name="ExpandCollapseChevronRotateTransform"/>
</TextBlock.RenderTransform>
Expand Down Expand Up @@ -1095,16 +1102,18 @@
<VisualState x:Name="IconOnly">
<VisualState.Setters>
<Setter Target="PointerRectangle.Visibility" Value="Visible" />
<Setter Target="LayoutRoot.Width" Value="48" />
<Setter Target="LayoutRoot.MinWidth" Value="48" />
<Setter Target="ContentPresenter.Visibility" Value="Collapsed" />
<Setter Target="SelectionIndicatorGrid.Margin" Value="4,0,4,4" />
<Setter Target="ExpandCollapseChevron.Margin" Value="{ThemeResource TopNavigationViewItemIconOnlyExpandChevronMargin}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="ContentOnly">
<VisualState.Setters>
<Setter Target="IconBox.Visibility" Value="Collapsed" />
<Setter Target="ContentPresenter.Margin" Value="12,0" />
<Setter Target="SelectionIndicatorGrid.Margin" Value="12,0,12,4" />
<Setter Target="ExpandCollapseChevron.Margin" Value="{ThemeResource TopNavigationViewItemContentOnlyExpandChevronMargin}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
Expand Down Expand Up @@ -1163,22 +1172,24 @@
ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
VerticalAlignment="Center"
AutomationProperties.AccessibilityView="Raw"/>
<Grid x:Name="ExpandCollapseChevron"
Grid.Column="2"
Visibility="Collapsed"
HorizontalAlignment="Right"
Width="24"
Margin="{ThemeResource TopNavigationViewItemExpandChevronMargin}"
Background="Transparent">
<TextBlock Foreground="{ThemeResource NavigationViewItemForeground}"
RenderTransformOrigin="0.5, 0.5"
FontSize="8"
Text="{StaticResource NavigationViewItemExpandedGlyph}"
FontFamily="{StaticResource SymbolThemeFontFamily}"
VerticalAlignment="Center"
HorizontalAlignment="Center"
AutomationProperties.AccessibilityView="Raw"
IsTextScaleFactorEnabled="False">
<Grid
x:Name="ExpandCollapseChevron"
Grid.Column="2"
Visibility="Collapsed"
HorizontalAlignment="Right"
Width="40"
Margin="{ThemeResource TopNavigationViewItemExpandChevronMargin}"
Background="Transparent">
<TextBlock
Foreground="{ThemeResource NavigationViewItemForeground}"
RenderTransformOrigin="0.5, 0.5"
FontSize="{ThemeResource NavigationViewItemExpandedGlyphFontSize}"
Text="{StaticResource NavigationViewItemExpandedGlyph}"
FontFamily="{StaticResource SymbolThemeFontFamily}"
VerticalAlignment="Center"
HorizontalAlignment="Center"
AutomationProperties.AccessibilityView="Raw"
IsTextScaleFactorEnabled="False">
<TextBlock.RenderTransform>
<RotateTransform x:Name="ExpandCollapseChevronRotateTransform"/>
</TextBlock.RenderTransform>
Expand Down Expand Up @@ -1254,16 +1265,18 @@
<VisualState x:Name="IconOnly">
<VisualState.Setters>
<Setter Target="PointerRectangle.Visibility" Value="Visible" />
<Setter Target="LayoutRoot.Width" Value="48" />
<Setter Target="LayoutRoot.MinWidth" Value="48" />
<Setter Target="ContentPresenter.Visibility" Value="Collapsed" />
<Setter Target="SelectionIndicatorGrid.Margin" Value="4,0" />
<Setter Target="ExpandCollapseChevron.Margin" Value="{ThemeResource TopNavigationViewItemIconOnlyExpandChevronMargin}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="ContentOnly">
<VisualState.Setters>
<Setter Target="IconBox.Visibility" Value="Collapsed" />
<Setter Target="ContentPresenter.Margin" Value="12,0" />
<Setter Target="SelectionIndicatorGrid.Margin" Value="12,0" />
<Setter Target="ExpandCollapseChevron.Margin" Value="{ThemeResource TopNavigationViewItemContentOnlyExpandChevronMargin}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
Expand Down Expand Up @@ -1316,22 +1329,24 @@
Content="{TemplateBinding Content}"
VerticalAlignment="Center"
AutomationProperties.AccessibilityView="Raw"/>
<Grid x:Name="ExpandCollapseChevron"
Grid.Column="2"
Visibility="Collapsed"
HorizontalAlignment="Right"
Width="24"
Margin="{ThemeResource NavigationViewItemExpandChevronMargin}"
Background="Transparent">
<TextBlock Foreground="{ThemeResource NavigationViewItemForeground}"
RenderTransformOrigin="0.5, 0.5"
FontSize="8"
Text="{StaticResource NavigationViewItemExpandedGlyph}"
FontFamily="{StaticResource SymbolThemeFontFamily}"
VerticalAlignment="Center"
HorizontalAlignment="Center"
AutomationProperties.AccessibilityView="Raw"
IsTextScaleFactorEnabled="False">
<Grid
x:Name="ExpandCollapseChevron"
Grid.Column="2"
Visibility="Collapsed"
HorizontalAlignment="Right"
Width="40"
Margin="{ThemeResource NavigationViewItemExpandChevronMargin}"
Background="Transparent">
<TextBlock
Foreground="{ThemeResource NavigationViewItemForeground}"
RenderTransformOrigin="0.5, 0.5"
FontSize="{ThemeResource NavigationViewItemExpandedGlyphFontSize}"
Text="{StaticResource NavigationViewItemExpandedGlyph}"
FontFamily="{StaticResource SymbolThemeFontFamily}"
VerticalAlignment="Center"
HorizontalAlignment="Center"
AutomationProperties.AccessibilityView="Raw"
IsTextScaleFactorEnabled="False">
<TextBlock.RenderTransform>
<RotateTransform x:Name="ExpandCollapseChevronRotateTransform"/>
</TextBlock.RenderTransform>
Expand Down Expand Up @@ -1515,9 +1530,8 @@
Padding="{ThemeResource TopNavigationViewItemOnOverflowExpandChevronPadding}"
Background="Transparent">
<TextBlock Foreground="{ThemeResource NavigationViewItemForeground}"
Width="12" Height="12"
RenderTransformOrigin="0.5, 0.5"
FontSize="12.0"
FontSize="{ThemeResource NavigationViewItemExpandedGlyphFontSize}"
Text="{StaticResource NavigationViewItemExpandedGlyph}"
FontFamily="{StaticResource SymbolThemeFontFamily}"
VerticalAlignment="Center"
Expand Down

0 comments on commit 2b1145d

Please sign in to comment.