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.

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