How do I change colour of Reveal Highlight in NavigationView in UWP?

Question

In my screenshot above, I would like to change the black highlight color in the above image to white. Would anyone know how to do this? This is a NavigationView control in UWP.

Answer 1

I found a way to make it work, I set the RequestedTheme to Dark in NavigationView, and whatever is in the view I set it to light.

<NavigationView RequestedTheme="Dark" x:Name="MainNavView">
    <Frame RequestedTheme="Light" x:Name="MainFrame" Content=""/>
</NavigationView>

Some additional settings I use to style my Navigation View to blue:

<Grid.Resources>
    <SolidColorBrush x:Key="NavigationViewExpandedPaneBackground" Color="DodgerBlue"/>
    <SolidColorBrush x:Key="NavigationViewDefaultPaneBackground" Color="DodgerBlue" />
    <SolidColorBrush x:Key="NavigationViewSelectionIndicatorForeground" Color="White" />
</Grid.Resources>

Answer 2

try this style and remove RED color with your color add this in page header

xmlns:Windows10FallCreatorsUpdate="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract, 5)"

  <Page.Resources>
        <Style x:Key="NavigationViewItemStyle1" TargetType="NavigationViewItem">
            <Setter Property="Foreground" Value="{ThemeResource NavigationViewItemForeground}"/>
            <Setter Property="Background" Value="{ThemeResource NavigationViewItemBackground}"/>
            <Setter Property="BorderBrush" Value="{ThemeResource NavigationViewItemBorderBrush}"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="UseSystemFocusVisuals" Value="True"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="NavigationViewItem">
                        <Grid x:Name="LayoutRoot" Background="{TemplateBinding Background}" Height="40" Control.IsTemplateFocusTarget="True">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="PointerStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="PointerOver">
                                        <VisualState.Setters>
                                            <Setter Target="LayoutRoot.(RevealBrush.State)" Value="PointerOver"/>
                                            <Setter Target="LayoutRoot.Background" Value="{ThemeResource NavigationViewItemBackgroundPointerOver}"/>
                                            <Setter Target="RevealBorder.BorderBrush" Value="Red"/>
                                            <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource NavigationViewItemForegroundPointerOver}"/>
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <VisualState.Setters>
                                            <Setter Target="LayoutRoot.(RevealBrush.State)" Value="Pressed"/>
                                            <Setter Target="LayoutRoot.Background" Value="{ThemeResource NavigationViewItemBackgroundPressed}"/>
                                            <Setter Target="RevealBorder.BorderBrush" Value="Red"/>
                                            <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource NavigationViewItemForegroundPressed}"/>
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="Selected">
                                        <VisualState.Setters>
                                            <Setter Target="LayoutRoot.Background" Value="{ThemeResource NavigationViewItemBackgroundSelected}"/>
                                            <!--<Setter Target="RevealBorder.BorderBrush" Value="{ThemeResource NavigationViewItemBorderBrushSelected}"/>-->
                                            <Setter Target="RevealBorder.BorderBrush" Value="Red"/>
                                            <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource NavigationViewItemForegroundSelected}"/>
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="PointerOverSelected">
                                        <VisualState.Setters>
                                            <Setter Target="LayoutRoot.(RevealBrush.State)" Value="PointerOver"/>
                                            <Setter Target="LayoutRoot.Background" Value="{ThemeResource NavigationViewItemBackgroundSelectedPointerOver}"/>
                                            <Setter Target="RevealBorder.BorderBrush" Value="Red"/>
                                            <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource NavigationViewItemForegroundSelectedPointerOver}"/>
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="PressedSelected">
                                        <VisualState.Setters>
                                            <Setter Target="LayoutRoot.(RevealBrush.State)" Value="Pressed"/>
                                            <Setter Target="LayoutRoot.Background" Value="{ThemeResource NavigationViewItemBackgroundSelectedPressed}"/>
                                            <!--<Setter Target="RevealBorder.BorderBrush" Value="{ThemeResource NavigationViewItemBorderBrushSelectedPressed}"/>-->
                                            <Setter Target="RevealBorder.BorderBrush" Value="Red"/>
                                            <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource NavigationViewItemForegroundSelectedPressed}"/>
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="DisabledStates">
                                    <VisualState x:Name="Enabled"/>
                                    <VisualState x:Name="Disabled">
                                        <VisualState.Setters>
                                            <Setter Target="RevealBorder.BorderBrush" Value="Red"/>
                                            <Setter Target="LayoutRoot.Opacity" Value="{ThemeResource ListViewItemDisabledThemeOpacity}"/>
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="IconStates">
                                    <VisualState x:Name="IconVisible"/>
                                    <VisualState x:Name="IconCollapsed">
                                        <VisualState.Setters>
                                            <Setter Target="IconBox.Visibility" Value="Collapsed"/>
                                            <Setter Target="IconColumn.Width" Value="16"/>
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Grid HorizontalAlignment="Left" VerticalAlignment="Center">
                                <Rectangle x:Name="SelectionIndicator" Fill="{ThemeResource NavigationViewSelectionIndicatorForeground}" Height="24" Opacity="0.0" Width="6"/>
                            </Grid>
                            <Border x:Name="RevealBorder" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}"/>
                            <Grid x:Name="ContentGrid" HorizontalAlignment="Left" Height="40">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition x:Name="IconColumn" Width="48"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <ToolTipService.ToolTip>
                                    <ToolTip x:Name="ToolTip"/>
                                </ToolTipService.ToolTip>
                                <Viewbox x:Name="IconBox" Child="{TemplateBinding Icon}" Margin="16,12"/>
                                <ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentTransitions="{TemplateBinding ContentTransitions}" Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </Grid>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>




    <Windows10FallCreatorsUpdate:NavigationView x:Name="NavView"
    ItemInvoked="NavView_ItemInvoked"
    Loaded="NavView_Loaded">

        <NavigationView.MenuItems>
            <NavigationViewItem Style="{StaticResource NavigationViewItemStyle1}"  x:Uid="HomeNavItem" Content="Home" Tag="home">
                <NavigationViewItem.Icon>
                    <FontIcon Glyph="&#xE10F;"/>
                </NavigationViewItem.Icon>
            </NavigationViewItem>
            <NavigationViewItemSeparator/>
            <NavigationViewItemHeader Content="Main pages"/>
            <NavigationViewItem Style="{StaticResource NavigationViewItemStyle1}"   x:Uid="AppsNavItem" Icon="AllApps" Content="Apps" Tag="apps"/>
            <NavigationViewItem Style="{StaticResource NavigationViewItemStyle1}"  x:Uid="GamesNavItem" Icon="Video" Content="Games" Tag="games"/>
            <NavigationViewItem Style="{StaticResource NavigationViewItemStyle1}" x:Uid="MusicNavItem" Icon="Audio" Content="Music" Tag="music"/>
        </NavigationView.MenuItems>

        <Frame x:Name="ContentFrame" Margin="24">
            <Frame.ContentTransitions>
                <TransitionCollection>
                    <NavigationThemeTransition/>
                </TransitionCollection>
            </Frame.ContentTransitions>
        </Frame>
    </Windows10FallCreatorsUpdate:NavigationView>