更新 NavigationView 中 SelectionIndicator 的颜色

Question

我正在使用 NavigationView 控件在我的 UWP 应用程序中提供左窗格汉堡包菜单导航。

我想更改选择指示器（显示在您选择的项目旁边的小矩形）的颜色。

在 generic.xaml 中，我可以看到颜色被设置为系统强调色：

<Style TargetType="NavigationViewItem">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="NavigationViewItem">
                <Grid
                    x:Name="LayoutRoot"
                    Height="40"
                    Background="{TemplateBinding Background}"
                    Control.IsTemplateFocusTarget="True">

                    <!-- Wrap SelectionIndicator in a grid so that its offset is 0,0 - this enables the offset animation. -->
                    <Grid 
                        HorizontalAlignment="Left"
                        VerticalAlignment="Center">

                        <Rectangle
                            x:Name="SelectionIndicator"
                            Width="6"
                            Height="24"
                            Fill="{ThemeResource NavigationViewSelectionIndicatorForeground}"
                            Opacity="0.0"/>
                    </Grid>

                    <Border
                        x:Name="RevealBorder"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}" />

                    <Grid Height="40" HorizontalAlignment="Left">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition x:Name="IconColumn" Width="48" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>

                        <Viewbox x:Name="IconBox"
                            Child="{TemplateBinding Icon}"
                            Margin="16,12"/>

                        <ContentPresenter x:Name="ContentPresenter"
                            Grid.Column="1"
                            ContentTransitions="{TemplateBinding ContentTransitions}"
                            ContentTemplate="{TemplateBinding ContentTemplate}"
                            Content="{TemplateBinding Content}"
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                            Margin="{TemplateBinding Padding}"/>
                    </Grid>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

我的页面 XAML 文件（使用 NavigationView）中有没有办法将矩形 Fill 的颜色从 NavigationViewSelectionIndicatorForeground 更改为我设置的某个值？

我知道我可以复制整个模板并更新副本，然后在 NavigationView 上设置模板，但仅更改一个值似乎开销很大。

Answer 1

您可以使用 x:Key="NavigationViewSelectionIndicatorForeground" 定义自己的画笔，例如 App.xaml:

<Application ...>
    <Application.Resources>
        <SolidColorBrush x:Key="NavigationViewSelectionIndicatorForeground"
                 Color="Yellow" />
    </Application.Resources>
</Application>

或者，您也可以在 Page 的范围内声明资源，甚至在 NavigationView 的 Resources 范围内声明资源，它只需要位于 XAML 树通往 NavigationView.

因为您的资源在级联中较晚，它将使用您定义的画笔覆盖默认 NavigationViewSelectionIndicatorForeground。

更新 NavigationView 中 SelectionIndicator 的颜色

Update color of SelectionIndicator in NavigationView

xaml

uwp

uwp-xaml