UWP Using Acrylic in Navigation View

Question

Im looking into the Acrylic options for UWP and have bumped into a strange issue. Essentially, Im trying to get the Navigation view to use a custom Acrylic Brush. However, the main window background is more transparent than the Navigationview. I need to get the NavigationView to be as transparent as the current main view. Ive attached an image to help clarify this. Its hard to explain:

As you can see on the left, the navigation view is not as transparent as the main feature window on the right. I need to swap this around so the NavigationView is more transparent than the MainPage.

Here is my App.XAML

<Application
    x:Class="BS.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:BS">
    <Application.Resources>
        <AcrylicBrush x:Key="CustomAcrylicDark"
                      BackgroundSource="HostBackdrop"
                      TintColor="Gray"
                      TintOpacity="0.6"
                      FallbackColor="Black"/>
        <AcrylicBrush x:Key="CustomAcrylicLight"
                      BackgroundSource="HostBackdrop"
                      TintColor="White"
                      TintOpacity="0.6"
                      FallbackColor="White"/>       
    </Application.Resources>
</Application>

Here is my MainPage.XAML

<Page
    x:Class="BS.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:BS"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    RequestedTheme="Dark"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Page.Resources>

    </Page.Resources>
    <Grid>
        <NavigationView Background="{StaticResource CustomAcrylicDark}" PaneTitle="BS" IsBackButtonVisible="Collapsed" CompactModeThresholdWidth="9999" ExpandedModeThresholdWidth="9999" CompactPaneLength="96">
            <NavigationView.MenuItems>
                <NavigationViewItem Name="HItem" Content="HOME" Tag="HOME_Page" FontSize="22" HorizontalAlignment="Center" FontWeight="Bold" Foreground="MediumPurple"/>
                <NavigationViewItemSeparator/>
                <NavigationViewItem Name="OItem" Content="OVERVIEW" Tag="O_Page" FontSize="22" HorizontalAlignment="Center" FontWeight="Bold" Foreground="MediumPurple"/>
                <NavigationViewItem Name="BItem" Content="BILLS" Tag="B_Page" FontSize="22" HorizontalAlignment="Center" FontWeight="Bold" Foreground="MediumPurple"/>
                <NavigationViewItem Name="PItem" Content="PEOPLE" Tag="B_Page" FontSize="22" HorizontalAlignment="Center" FontWeight="Bold" Foreground="MediumPurple"/>
                <NavigationViewItem Name="TItem" Content="TRANSFERS" Tag="T_Page" FontSize="22" HorizontalAlignment="Center" FontWeight="Bold" Foreground="MediumPurple"/>
                <NavigationViewItem Name="PItem" Content="PAY DATES" Tag="P_Page" FontSize="22" HorizontalAlignment="Center" FontWeight="Bold" Foreground="MediumPurple"/>
            </NavigationView.MenuItems>
        </NavigationView>
    </Grid>
</Page>

Thank you in advance.

Answer 1

NavigationView is built on top of Splitview. In Splitview, you will find a property called PaneBackground but NavigationView won't let you to set the PaneBackground property of that Splitview it is made on.

But you are not out of luck, upon investigating the template of NavigationView, I've found that the PaneBackground property is bound to a ThemeResource called NavigationViewDefaultPaneBackground. So, your job is to override this property. Like this:

<Grid>
    <Grid.Resources>
        <AcrylicBrush x:Key="NavigationViewDefaultPaneBackground"
                  BackgroundSource="HostBackdrop"
                  TintColor="Gray"
                  TintOpacity="0.6"
                  FallbackColor="Black"/>
    </Grid.Resources>
    <NavigationView x:Name="Navview" Background="{StaticResource CustomAcrylicDark}" PaneTitle="BS" IsBackButtonVisible="Collapsed" 
                    CompactModeThresholdWidth="9999" ExpandedModeThresholdWidth="9999" CompactPaneLength="96">

        <NavigationView.MenuItems>
            <NavigationViewItem Name="HItem" Content="HOME" Tag="HOME_Page" FontSize="22" HorizontalAlignment="Center" FontWeight="Bold" Foreground="MediumPurple"/>
            <NavigationViewItemSeparator/>
            <NavigationViewItem Name="OItem" Content="OVERVIEW" Tag="O_Page" FontSize="22" HorizontalAlignment="Center" FontWeight="Bold" Foreground="MediumPurple"/>
            <NavigationViewItem Name="BItem" Content="BILLS" Tag="B_Page" FontSize="22" HorizontalAlignment="Center" FontWeight="Bold" Foreground="MediumPurple"/>
            <NavigationViewItem Name="PItem" Content="PEOPLE" Tag="B_Page" FontSize="22" HorizontalAlignment="Center" FontWeight="Bold" Foreground="MediumPurple"/>
            <NavigationViewItem Name="TItem" Content="TRANSFERS" Tag="T_Page" FontSize="22" HorizontalAlignment="Center" FontWeight="Bold" Foreground="MediumPurple"/>
            <NavigationViewItem Name="PItem2" Content="PAY DATES" Tag="P_Page" FontSize="22" HorizontalAlignment="Center" FontWeight="Bold" Foreground="MediumPurple"/>
        </NavigationView.MenuItems>
        <Button HorizontalAlignment="Center" Content="{x:Bind Navview.DisplayMode, Mode=OneWay}"/>
    </NavigationView>
</Grid>

This gives the result below:

So, you can set the pane's background as you wish using this method. Hope that helps.

Answer 2

If you are using PaneDisplayMode="Left" then override NavigationViewExpandedPaneBackground

<AcrylicBrush x:Key="NavigationViewExpandedPaneBackground"
                  BackgroundSource="HostBackdrop"
                  TintColor="Gray"
                  TintOpacity="0.6"
                  FallbackColor="Black"/>

here is link from Microsoft docs - https://learn.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/navigationview#customizing-backgrounds