Uwp how to make splitview background acrylic blur

Question

I am learning uwp developement and I am trying to make my splitview pane has acrylicbrush. As far as I know acrylic brush has two types. WindowAcrylic and Element Acrylic. In the default Windows 10 music app(Groove) the splitview menu has WindowsAcrylic when in compact mode and has ElementAcrylic when in opened mode. In the some tutorials they say when you set WindowsAcrylicBrush it automatically turns to elementAcrylicBrush when opened, but in my app that doesn't work like this.

Here is my splitview on compact mode And Opened mode But I am trying to make like this

Answer 1

Check out the description about the different display Modes of the NavigationView, here.

You have Minimal, Compact and Expanded. Depending on the display mode current state, the background is going to be painted differently, either with background acrylic or in-app acrylic.

For your situation, you probably haven't reached the threshold defined so your app switches from Expanded to Compact, and therefore we can still see the pane being drawn side-by-side with the content and the background painted with background acrylic.

In case you want to define a different Window width from each the NavigationView enters the different display modes (for your situation you might want your app to enter Compact Mode at an higher Minimum Width than it currently is), checkout the following properties : CompactModeThresholdWidth ExpandedModeThresholdWidth, here

Define the Acrylic Background resources for both Background Acrylic and In-App Acrylic, overriding the following NavigationView's Background Resources:

<media:AcrylicBrush x:Key="NavigationViewExpandedPaneBackground" BackgroundSource="HostBackdrop" TintColor="#FF3333FF" TintOpacity="0.6" FallbackColor="#FF3333FF" />
<media:AcrylicBrush x:Key="NavigationViewDefaultPaneBackground" BackgroundSource="Backdrop" TintColor="#FF3333FF" TintOpacity="0.6" FallbackColor="#FF3333FF" />

With this you can use your own custom Background Resources, and you are not limited at using the Default background Acrylic and In-App Acrylic from the generic Theme Resources (Light, Dark,...).

You can see on this gif the app switching from Background Acrylic and In-App Acrylic depending on the Windows Width: