Navigation bar in the navigation bar

Question

How can I change the background of the NavigationView panel?

I try like this:

<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 there seems to be a " acrylic" that I cannot remove, as well as a change in background color Header.

Answer 1

One possible way to customize your user interface is to override the following two theme resources: NavigationViewDefaultPaneBackgroundand NavigationViewExpandedPaneBackground.

Usually you modify these two resources to customize the appearance of the acrylic brush, overriding them as follows:

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

I would think that you can simply define SolidColorBrushinstead of AcrylicBrush, so changing the acrylic background to a solid color and completely removing acrylic from the NavigationView panel.

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