WinUI Changed NavigationView Content Background

Question

I'm trying to change the background of the NavigationView Frame or content.

I set the background to Acrylic, and the Frame in the NavigatioView is not the same color as the NavigatioViewItem in the pane.

I set the background at the MainWindow.xaml and it works perfectly when I navigate to a regular page with a Transparent background.

How can I change it to be full transparent like the Page background?

Answer 1

Let me show you one way to do this using the SystemBackdrop:

First, set the SystemBackdrop on the MainWindow.

MainWindow.xaml

<Window ...>
    <Window.SystemBackdrop>
        <DesktopAcrylicBackdrop />
    </Window.SystemBackdrop>
    ...
</Window>

Then on each page, set the Background to Transparent or remove it.

<Page Background="Transparent" ...>

You also might want to override these background resources for the NavigationView:

<Page.Resources>
    <SolidColorBrush
        x:Key="NavigationViewDefaultPaneBackground"
        Color="Transparent" />
    <SolidColorBrush
        x:Key="NavigationViewExpandedPaneBackground"
        Color="Transparent" />
    <SolidColorBrush
        x:Key="NavigationViewContentBackground"
        Color="Transparent" />
</Page.Resources>

<NavigationView ...>

You can learn about these resources on the generic.xaml file.