NavigationView Pane background

Question

How can I change the NavigationView Pane background??

I'm trying this way:

<NavigationView.Background>
   <LinearGradientBrush EndPoint="0.5,0" StartPoint="0.5,1">
      <GradientStop Color="#b1c899" Offset="0"/>
      <GradientStop Color="#18c1b9" Offset="1"/>
   </LinearGradientBrush>
</NavigationView.Background>

But it seems to have "acrylic" that I can not remove, as well as changing the background color of the Header.

Chirlin

Answer 1

One of the possible options to customize your UI is to override the following two theme resources: NavigationViewDefaultPaneBackground and NavigationViewExpandedPaneBackground.

You would generally modify these two resources to customize the appearance of the Acrylic Brush, by overriding them the following way:

<AcrylicBrush x:Key="NavigationViewDefaultPaneBackground"
              BackgroundSource="Backdrop" TintColor="Blue" TintOpacity=".6"/>

I would figure it is possible to simply define aSolidColorBrush instead of an AcrylicBrush, therefore changing the Acrylic background to a solid color, and removing entirely the acrylic from the NavigationView Pane.

<SolidColorBrush x:Key="NavigationViewExpandedPaneBackground" Color="Red"/>
<SolidColorBrush x:Key="NavigationViewDefaultPaneBackground" Color="Red" />

Agrimony

You could define in your App.xaml page. But you can also define it in the page that you are instantiating a NavigationView. For instance imagine you have a Grid defined which is the layout container for your NavigationView object. Simply Do <Grid.Resources> ... </Grid.Resources> and define the SolidColorBrush resources inside it. – Hit

This worked perfectly! The only thing I had to change was Background="Red" to Color="Red"!! – Chirlin

@RobertoPinheiro Glad I could help! Yeah that was a huge mistake of mine, I will edit the post! – Hit

I was looking for how to accomplish the same thing, but with the top pane in the WinUI version. For that you can use the key NavigationViewTopPaneBackground. See github.com/Microsoft/microsoft-ui-xaml/blob/master/dev/… – Clark

@Nathan Castle I found that these brushes just can't be set to transparent. Other colors works fine. – Wool

Answer 2

I would like to add to Andre's answer that it is also possible to change the Top Pane background property:

<NavigationView.Resources>
    <SolidColorBrush x:Key="NavigationViewTopPaneBackground" Color="Red" />
</NavigationView.Resources>

As already pointed out by Nathan in the comments, there are even more colors customizable. You can check them out here:

https://github.com/Microsoft/microsoft-ui-xaml/blob/master/dev/NavigationView/NavigationView_rs2_themeresources.xaml

Glomma