Edit

AcrylicBrush

  • Article

The AcrylicBrush is a Brush that implements an acrylic effect with customizable parameters.

Try it in the sample app

Syntax

<Border BorderBrush="Black" BorderThickness="1" VerticalAlignment="Center" HorizontalAlignment="Center" Width="400" Height="400">
  <Border.Background>
    <media:AcrylicBrush
        BackgroundSource="Backdrop"
        TintColor="DimGray"
        TintOpacity="0.25"
        BlurAmount="20"
        TextureUri="ms-appx:///Assets/BrushAssets/NoiseTexture.png"/>
  </Border.Background>
</Border>

Example Image

Acrylic brush

Properties

Property Type Description
BackgroundSource AcrylicBackgroundSource The background source mode for the effect.
BlurAmount double The blur amount for the effect (ignored when using HostBackdrop source).
TintColor Color The tint for the effect.
TintOpacity double The tint opacity factor for the effect.
TextureUri Uri The Uri for the texture to use.

Code behind support

This brush can be also be built from code behind through the PipelineBuilder class.

Brush brush = PipelineBuilder.FromBackdropAcrylic(
    Colors.DimGray,
    0.25f,
    20,
    "/Assets/BrushAssets/NoiseTexture.png".ToAppxUri()).AsBrush();

Sample Project

AcrylicBrush sample page Source. You can see this in action in the Windows Community Toolkit Sample App.

Requirements

Device family Universal, 10.0.17134.0 or higher
Namespace Microsoft.Toolkit.Uwp.UI.Media
NuGet package Microsoft.Toolkit.Uwp.UI.Media

API