9

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.

DK.
  • 3,173
  • 24
  • 33
Roberto Pinheiro
  • 1,260
  • 13
  • 30

2 Answers2

11

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" />
André B
  • 1,699
  • 2
  • 11
  • 22
  • 1
    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 ... and define the SolidColorBrush resources inside it. – André B Feb 22 '18 at 14:04
  • 1
    This worked perfectly! The only thing I had to change was `Background="Red"` to `Color="Red"`!! – Roberto Pinheiro Feb 22 '18 at 14:08
  • 1
    @RobertoPinheiro Glad I could help! Yeah that was a huge mistake of mine, I will edit the post! – André B Feb 22 '18 at 14:12
  • 1
    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 https://github.com/Microsoft/microsoft-ui-xaml/blob/master/dev/NavigationView/NavigationView_rs2_themeresources.xaml – Nathan Castle Feb 28 '19 at 03:41
  • 1
    @Nathan Castle I found that these brushes just can't be set to transparent. Other colors works fine. – Vincent Mar 04 '20 at 09:59
4

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

AtosNicoS
  • 143
  • 7