Change foreground color of back button in UWP NavigationView

Question

I try to change the foreground color of the back button in an UWP NavigationView. I managed to change all the other items in the side menu with this resources:

    <SolidColorBrush x:Key="NavigationViewItemForegroundPointerOver" Color="White"/>
    <SolidColorBrush x:Key="NavigationViewItemForegroundSelected" Color="White"/>
    <SolidColorBrush x:Key="NavigationViewItemForegroundSelectedPointerOver" Color="White"/>
    <SolidColorBrush x:Key="NavigationViewItemForegroundPressed" Color="White"/>
    <SolidColorBrush x:Key="NavigationViewItemForegroundSelectedPressed" Color="White"/>
    <SolidColorBrush x:Key="NavigationViewItemForeground" Color="White" />

    <Style x:Key="CustomNavigationMenuStyle" TargetType="Button" BasedOn="{StaticResource PaneToggleButtonStyle}">
        <Setter Property="Foreground" Value="White" />
    </Style>

What resource do I have to override for the back button?

score 1 · Accepted Answer · answered Jan 25 '21 at 03:06

To change the style of the back button of NavigationView, you could check the NavigationView style first.

Find the NavigationView control in Document Outline Window in Visual Studio. Then Right-click on the control, move to Edit Template and choose Edit a Copy. After that, the default style of NavigationView will be created. You could find a style called NavigationBackButtonNormalStyle. This is the default style of the back button. You could change the Foreground property as you want.

Like this:

        <Style x:Key="NavigationBackButtonNormalStyle" TargetType="Button">
        <Setter Property="Background" Value="{ThemeResource NavigationViewBackButtonBackground}"/>
        <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
        <Setter Property="FontFamily" Value="{ThemeResource SymbolThemeFontFamily}"/>
        <Setter Property="FontSize" Value="16"/>
        <Setter Property="Height" Value="{ThemeResource NavigationBackButtonHeight}"/>
        <Setter Property="Width" Value="{ThemeResource NavigationBackButtonWidth}"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}"/>
        <Setter Property="Content" Value="&#xE72B;"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="PointerOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource NavigationViewButtonBackgroundPointerOver}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource NavigationViewButtonForegroundPointerOver}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource NavigationViewButtonBackgroundPressed}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource NavigationViewButtonForegroundPressed}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource NavigationViewButtonForegroundDisabled}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <FontIcon x:Name="Content" AutomationProperties.AccessibilityView="Raw" FontFamily="{TemplateBinding FontFamily}" Foreground="{TemplateBinding Foreground}" FontSize="{TemplateBinding FontSize}" Glyph="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" MirroredWhenRightToLeft="True" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

That works, thank you! I was just hoping, that there is way without duplicating the whole style. — NPadrutt, Jan 25 '21 at 16:15

Change foreground color of back button in UWP NavigationView

1 Answers1