c# - Why is Acrylic Brush Not Supported in UWP?

Question

I have created a basic UWP app, and when I try to use the Acrylic brush like this:

<Page
    x:Class="LearningUWP.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:LearningUWP"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
// Acrylic brush here
    <Page.Resources>
        <media:AcrylicBrush x:Key="HostBackdropBrush"
                            BackgroundSource="HostBackdrop"
                            TintColor="LightBlue"
                            TintOpacity="0.6"
                            FallbackColor="LightSkyBlue"
                            FallbackForced="False" />
    </Page.Resources>
    
    <Grid>

        <Button Content="Synthesize" Margin="528,88,0,0" VerticalAlignment="Top" Height="93" Width="222" Click="Button_Click"/>
        <TextBox x:Name="Text" HorizontalAlignment="Left" Height="145" Margin="39,62,0,0" Text="Hello, World!" TextWrapping="Wrap" VerticalAlignment="Top" Width="389"/>

    </Grid>
</Page>

Visual Studio says that Acrylic Brush is not supported in UWP. I am Windows 10 1903 (which is also my target version) and my minimum version is is 1803.

question from:https://stackoverflow.com/questions/65901566/why-is-acrylic-brush-not-supported-in-uwp

Answer 1

I have found a way to do it:

<Page.Resources>
        <ResourceDictionary>
            <ResourceDictionary.ThemeDictionaries>
                <ResourceDictionary x:Key="Default">
                    <AcrylicBrush x:Key="MyAcrylicBrush"
                              BackgroundSource="HostBackdrop"
                              TintColor="Black"
                              TintOpacity="0.5"
                              TintLuminosityOpacity="1"
                              FallbackColor="#111111"
                              />
                </ResourceDictionary>
            </ResourceDictionary.ThemeDictionaries>
        </ResourceDictionary>
    </Page.Resources>

By adding the above code into my <Page> and setting <Grid> Background like this:

<Grid Background="{ThemeResource MyAcrylicBrush}">

Where MyAcrylicBrush is the AcrylicBrush's x:Key.