在 UWP NavigationView 中更改后退按钮的前景色

Question

我尝试更改 UWP NavigationView 中后退按钮的前景色。我设法使用以下资源更改了侧边菜单中的所有其他项目：

    <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>

我必须为后退按钮覆盖哪些资源？

Answer 1

要更改NavigationView后退按钮的样式，您可以先检查NavigationView样式。

在Visual Studio中找到Document Outline Window中的NavigationView control。然后右击控件，移动到编辑模板并选择编辑副本。之后，将创建 NavigationView 的默认样式。您可以找到一种名为 NavigationBackButtonNormalStyle 的样式。这是后退按钮的默认样式。您可以根据需要更改前景属性。

像这样：

        <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>

在 UWP NavigationView 中更改后退按钮的前景色

Change foreground color of back button in UWP NavigationView

uwp

uwp-xaml

winui