UWP Acrylic Material, uwpacrylic

UWP Acrylic Material, uwpacrylic

Document: https://docs.microsoft.com/en-us/windows/uwp/design/style/acrylic

Acrylic can bring glass effects similar to those of win7

To use Acrylic, the minimum version of win10 is 1709, Which is 16299 in the simulator.

 

There are two types of Acrylic:

• Background acrylic
• In-app acrylic

As the name suggests, one is for the application background, and the other is for the application to pop up the mask layer.

 

Win10 comes with many acrylic resources, which can be used directly.

For example, for Background acrylic:

SystemControlAcrylicWindowBrush, 
SystemControlChromeLowAcrylicWindowBrush, 
SystemControlBaseHighAcrylicWindowBrush, 
SystemControlBaseLowAcrylicWindowBrush, 
SystemControlAltHighAcrylicWindowBrush, 
SystemControlAltLowAcrylicWindowBrush 

 

In-app acrylic needs to be used:

SystemControlAcrylicElementBrush ,
SystemControlChromeLowAcrylicElementBrush ,
SystemControlBaseHighAcrylicElementBrush ,
SystemControlBaseLowAcrylicElementBrush ,
SystemControlAltHighAcrylicElementBrush ,
SystemControlAltLowAcrylicElementBrush 

 

The simple effect is as follows:

<Grid. Background> <AcrylicBrush BackgroundSource = "HostBackdrop" TintColor = "# FFFF0000" Opacity = "0.6" FallbackColor = "Black"> </AcrylicBrush> </Grid. Background>

Running and discovering wood works...

Then try to write it as Resource:

    <Page.Resources>        <AcrylicBrush x:Key="MyAcrylicBrush"                      BackgroundSource="HostBackdrop"                      TintColor="#FFFF0000"                      TintOpacity="0.6" TintTransitionDuration="1"                      FallbackColor="Black"/>    </Page.Resources>    <Grid  Background="{StaticResource MyAcrylicBrush}">    </Grid>

The effect is as follows:

Therefore, it is ineffective to write AcrylicBrush directly.

You can try to write a Resource...