CODEWITHSUNDEEP
windowsuwpnavigationviewpane
Roberto Pinheiro
Roberto Pinheiro

Reputation: 1330

NavigationView Pane background

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.

Upvotes: 9

Views: 8047

Answers (2)

AtosNicoS
AtosNicoS

Reputation: 163

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

Upvotes: 4

Andr&#233; B
Andr&#233; B

Reputation: 1709

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

Upvotes: 11

Related Questions