Search code examples
c#xamluwpacrylic-material

Why is Acrylic Brush Not Supported in UWP?


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.


Solution

  • 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.