CODEWITHSUNDEEP
c#xamluwp
resp78
resp78

Reputation: 1534

How to set the foreground color of text in NavigationView?

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

Upvotes: 2

Views: 3710

Answers (2)

Andr&#233; B
Andr&#233; B

Reputation: 1709

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:

enter image description here

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:

enter image description here

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.

Upvotes: 9

A. Milto
A. Milto

Reputation: 2383

Like this:

<NavigationView ...>
    ...
    <NavigationView.MenuItemContainerStyle>
        <Style TargetType="NavigationViewItem">
            <Setter Property="Foreground" Value="Red"/>
        </Style>
    </NavigationView.MenuItemContainerStyle>
    ...
</NavigationView>

Upvotes: 0

Related Questions