Edit

In-app acrylic

You can apply in-app acrylic to your app's surfaces using a XAML AcrylicBrush or predefined AcrylicBrush theme resources.

Note

In WinUI 3, AcrylicBrush provides in-app acrylic only — it applies a blur and tint to XAML content within the app window, not to the desktop or content behind the window. The UWP BackgroundSource property (which enabled a HostBackdrop mode for window-level acrylic) is not available in WinUI 3. For window-level acrylic that shows the desktop through your app's window, set Window.SystemBackdrop to a DesktopAcrylicBackdrop. To apply a system backdrop material (Mica or Acrylic from the OS compositor) to a specific UI element rather than a whole window, use SystemBackdropElement.

Open the WinUI Gallery app and see Acrylic in action

WinUI includes a collection of brush theme resources that respect the app's theme and fall back to solid colors as needed. To paint a specific surface, apply one of the theme resources to element backgrounds just as you would apply any other brush resource.

<Grid Background="{ThemeResource AcrylicInAppFillColorDefaultBrush}">

Note

You can view these resources in the AcrylicBrush theme resources file, in the microsoft-ui-xaml GitHub repo.

Custom acrylic brush

You may choose to add a color tint to your app's acrylic to show branding or provide visual balance with other elements on the page. To show color rather than grayscale, you need to define your own acrylic brushes using the following properties.

  • TintColor: the color/tint overlay layer.
  • TintOpacity: the opacity of the tint layer.
  • TintLuminosityOpacity: controls the amount of saturation that is allowed through the acrylic surface from the background.
  • FallbackColor: the solid color that replaces acrylic when the effect cannot be rendered — for example, in Battery Saver mode, when the user turns off Transparency effects in Settings > Personalization > Colors, or on low-end hardware.

Light theme acrylic swatches

Dark theme acrylic swatches

Luminosity opacity compared to tint opacity

To add an acrylic brush, define the three resources for dark, light, and high contrast themes. In high contrast, we recommend that you use a SolidColorBrush with the same x:Key as the dark/light AcrylicBrush.

Note

If you don't specify a TintLuminosityOpacity value, the system will automatically adjust its value based on your TintColor and TintOpacity.

<ResourceDictionary.ThemeDictionaries>
    <ResourceDictionary x:Key="Default">
        <AcrylicBrush x:Key="MyAcrylicBrush"
            TintColor="#FFFF0000"
            TintOpacity="0.8"
            TintLuminosityOpacity="0.5"
            FallbackColor="#FF7F0000"/>
    </ResourceDictionary>

    <ResourceDictionary x:Key="HighContrast">
        <SolidColorBrush x:Key="MyAcrylicBrush"
            Color="{ThemeResource SystemColorWindowColor}"/>
    </ResourceDictionary>

    <ResourceDictionary x:Key="Light">
        <AcrylicBrush x:Key="MyAcrylicBrush"
            TintColor="#FFFF0000"
            TintOpacity="0.8"
            TintLuminosityOpacity="0.5"
            FallbackColor="#FFFF7F7F"/>
    </ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

The following sample shows how to declare an AcrylicBrush in code.

AcrylicBrush myBrush = new AcrylicBrush();
myBrush.TintColor = Color.FromArgb(255, 202, 24, 37);
myBrush.FallbackColor = Color.FromArgb(255, 202, 24, 37);
myBrush.TintOpacity = 0.6;

grid.Background = myBrush;
  • Last updated on