在NavigationView中更新SelectionIndicator的颜色

Posted 2021-04-05

我正在使用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上设置模板，但是改变一个值似乎需要很多开销。

答案

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

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

或者你也可以在Page的范围内或甚至在你的NavigationView的Resources中声明资源，它只需要在XAML树中通往NavigationView的路径中。

因为您的资源在级联中稍后出现，所以它将使用您定义的画笔覆盖默认的NavigationViewSelectionIndicatorForeground。