CODEWITHSUNDEEP
uwpuwp-xamlwinui
NPadrutt
NPadrutt

Reputation: 4257

Change foreground color of back button in UWP NavigationView

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?

Upvotes: 0

Views: 571

Answers (1)

Roy Li - MSFT
Roy Li - MSFT

Reputation: 8666

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>

Upvotes: 1

Related Questions