如何在NavigationView中设置文本的前景色? [英] How to set the foreground color of text in NavigationView?

问题描述

我正在尝试更改 NavigationView 的颜色.

实现您的意图的最简单的解决方案是覆盖 NavigationViewItem 模板中的资源，您实际上可以在 generic.xaml 中查看这些资源.你可以这样做，就像这样:

 <SolidColorBrush x:Key="NavigationViewItemForegroundPointerOver" Color="Red"/><SolidColorBrush x:Key="NavigationViewItemForegroundSelected" Color="Red"/><SolidColorBrush x:Key="NavigationViewItemForegroundSelectedPointerOver" Color="Red"/><SolidColorBrush x:Key="NavigationViewItemForegroundPressed" Color="Red"/><SolidColorBrush x:Key="NavigationViewItemForegroundSelectedPressed" Color="Red"/></Grid.Resources>

如果您希望将 NavigationViewItem 内容和图标的初始状态设置为红色，则必须在标记中进行设置.

这是用于填充 NavigationView.MenuItems

的项目列表

 <NavigationViewItem Icon="AllApps" FontWeight="Bold" Foreground="Red" Content="Apps" Tag="apps"/><NavigationViewItem Icon="Video" FontWeight="Bold" Foreground="Red" Content="Games" Tag="games"/><NavigationViewItem Icon="Audio" FontWeight="Bold" Content="Music" Tag="music"/></NavigationView.MenuItems>

结果:

通过此实现，前景与边框/背景分离，后者是负责显示特征特征的其他元素.

你可以修改上面提到的资源器来实现你自己的 UI 逻辑，比我们现在实现的更漂亮"，甚至使用绑定来改变运行时的主题，具体取决于你的应用程序可能的自定义主题报价.

要为所有 NavigationViewMenuItems(包括设置)设置 Foreground 属性，请覆盖以下资源:

有了这个，您不需要为所有项目显式设置前景.使用 NavigationView 的 SettingsItem 属性，我只能更改图标颜色.

I am trying to change the colors of the NavigationView. The documentation gives a nice example of how to change the background but I could not find how to change the font color of the menu items. I was also able to change the color of selection indicator using <SolidColorBrush x:Key="SystemControlForegroundAccentBrush" Color="#FFFFFFFF" />

解决方案

NavigationView is one of the many controls which automatically use the Reveal highlight, which is also one of the new Fluent Design System component, and whose objective is to add light to the application.

@A. Milto solution would work if we were dealing with a control which doesn't share as many states as NavigationViewItem does, however NavigationMenuItem has:

• PointerOver;
• Pressed
• Selected;
• PointerOverSelected;
• PressedSelected;

without taking into account it's disabled states. Simply forcing the foreground property to your desired Color, will give the following:

The easiest solution to achieve what you intent is to override the resources in the NavigationViewItem Template, which you can actually check out in the generic.xaml. You can do so, like this:

        <Grid.Resources>
            <SolidColorBrush x:Key="NavigationViewItemForegroundPointerOver" Color="Red"/>
            <SolidColorBrush x:Key="NavigationViewItemForegroundSelected" Color="Red"/>
            <SolidColorBrush x:Key="NavigationViewItemForegroundSelectedPointerOver" Color="Red"/>
            <SolidColorBrush x:Key="NavigationViewItemForegroundPressed" Color="Red"/>
            <SolidColorBrush x:Key="NavigationViewItemForegroundSelectedPressed" Color="Red"/>
        </Grid.Resources>

In case you want the initial state of your NavigationViewItem Content and the Icon to be set to Red, you have to set it out in the markup.

This is the list of items used to populate the NavigationView.MenuItems

            <NavigationView.MenuItems>
                <NavigationViewItem Icon="AllApps" FontWeight="Bold" Foreground="Red"  Content="Apps" Tag="apps"/>
                <NavigationViewItem Icon="Video" FontWeight="Bold" Foreground="Red" Content="Games" Tag="games" />
                <NavigationViewItem Icon="Audio" FontWeight="Bold" Content="Music" Tag="music"/>
            </NavigationView.MenuItems>

Result:

With this implementation Foreground is separated from the Border/Background, which are the other elements responsible for the characterization of the Reveal feature.

You can modify the resourcers mentioned above to implement your own UI logic, more "beautiful" than the one we are achieving right now, and even use bindings to alter the theme on runtime depending on Custom Themes that you're app might offer.

EDIT: To set the Foreground Property for all NavigationViewMenuItems (including the Settings), override the following resource:

<SolidColorBrush x:Key="NavigationViewItemForeground" Color="Red"/>

With this you don't need to be setting the Foreground explicitly for all the Items. With NavigationView's SettingsItem property, i only managed to change the Icon color.

这篇关于如何在NavigationView中设置文本的前景色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！