How to use Acrylic Accent in Windows 10 Creators U

Question

I can't find any detailed document to use Acrylic Accent (CreateBackdropBrush). I found a post in StackOverflow which is somewhat useful but it doesn't help to get started. So please create a detailed answer to this post so that everyone can learn.

Update:

Microsoft has released an official Acrylic material document

Note:

If anyone doesn't know about Acrylic Accent. Acrylic Accent is the new feature in Windows 10 Creators Update that allows the app background to be Blurred and Transparent.

Answer 1

CREATOR UPDATE

XAML

You need to use a component that you put on the background of your app, let's say a RelativePanel

<RelativePanel Grid.Column="0" Grid.ColumnSpan="2" MinWidth="40" x:Name="MainGrid" SizeChanged="Page_SizeChanged"/>
<RelativePanel Grid.Column="0" Width="{Binding ElementName=MainGrid,Path=Width}" Background="#28000000"/>
<Grid>
    <!--Having content here, for example textblock and so on-->
</Grid>

The second RelativePanel is used to set the shadow color above the Blur.

.CS

And then you can use the following code :

private void applyAcrylicAccent(Panel panel)
{
    _compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;
    _hostSprite = _compositor.CreateSpriteVisual();
    _hostSprite.Size = new Vector2((float) panel.ActualWidth, (float) panel.ActualHeight);

    ElementCompositionPreview.SetElementChildVisual(panel, _hostSprite);
    _hostSprite.Brush = _compositor.CreateHostBackdropBrush();
}
Compositor _compositor;
SpriteVisual _hostSprite;

and calling it with applyAcrylicAccent(MainGrid); You also will need to handle the SizeChanged event :

private void Page_SizeChanged(object sender, SizeChangedEventArgs e)
{
    if (_hostSprite != null)
        _hostSprite.Size = e.NewSize.ToVector2();
}

Of course you will need to be on the Creator Update to run this, the CreateHostBackdropBrush() won't work on a mobile device, or in tablet mode.

Also, consider that the panel or grid that you set with a acrylic color won't be able to display any control (as far I've tested yet). So you need to use your relative panel without any control in it.

Transparent Title bar

The transparency of the title bar could be set using the following code

ApplicationViewTitleBar formattableTitleBar = ApplicationView.GetForCurrentView().TitleBar;
formattableTitleBar.ButtonBackgroundColor = Colors.Transparent;
CoreApplicationViewTitleBar coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
coreTitleBar.ExtendViewIntoTitleBar = true;

Here a example of what the above code generate (with some other things added too.)

Fall Update 10.0.16190 and above

As Justin XL mention in an answer below, starting from the Build 16190 and above, developers have access to different Acrylic Brushes located at Windows.UI.Xaml.Media (Acrylic API) and the guidelines from Microsoft : Acrylic material guidelines

Answer 2

In the Creators Update Insider Preview 16193 (along with Windows 10 SDK 16190), there's a new AcrylicBrush that you can apply directly onto your element just like a normal SolidColorBrush.

<Page xmlns:media="using:Windows.UI.Xaml.Media" ...>
    <Page.Resources>
        <media:AcrylicBrush x:Key="HostBackdropBrush"
                            BackgroundSource="HostBackdrop"
                            TintColor="LightBlue"
                            TintOpacity="0.6"
                            FallbackColor="LightSkyBlue"
                            FallbackForced="False" />
    </Page.Resources>

    <Grid Background="{StaticResource HostBackdropBrush}" />
</Page>

Note you can change the BackgroundSource to Backdrop to sample from the app content instead of the content behind the app window. Also make sure you define an appropriate FallbackColor because you will lose the acrylic effect when the app window has lost focus or the device is in battery saver mode.

Answer 3

Note

This will only work Windows 10 Insider Preview (v10.0.16190.0 and above). If you want to use it in Creators Update then check the answer by Sven Borden.

You can join Windows 10 Insider Preview program here

You can join Download Windows 10 SDK Preview Build 16190 here

Acrylic theme resources

Resources named Acrylic\WindowBrush* represent background acrylic, while Acrylic\ElementBrush* refers to in-app acrylic

Resource key -> Tint opacity -> Fallback color

SystemControlAcrylicWindowBrush -> 80% -> ChromeMedium

SystemControlAcrylicElementBrush -> 80% -> ChromeMedium

SystemControlAcrylicMediumHighWindowBrush -> 70% -> ChromeMedium

SystemControlAcrylicMediumHighElementBrush -> 70% -> ChromeMedium

SystemControlAcrylicMediumWindowBrush -> 60% -> ChromeMediumLow

SystemControlAcrylicMediumElementBrush -> 60% -> ChromeMediumLow

SystemControlAcrylicAccentMediumHighWindowBrush -> 70% -> SystemAccentColor

SystemControlAcrylicAccentMediumHighElementBrush -> 70% -> SystemAccentColor

SystemControlAcrylicAccentDark1WindowBrush -> 80% -> SystemAccentColorDark1

SystemControlAcrylicAccentDark1ElementBrush -> 80% -> SystemAccentColorDark1

SystemControlAcrylicAccentDark2MediumHighWindowBrush -> 70% -> SystemAccentColorDark2

SystemControlAcrylicAccentDark2MediumHighElementBrush -> 70% -> SystemAccentColorDark2

To paint a specific surface, apply one of the above theme resources to element backgrounds just as you would apply any other brush resource

<Grid Background="{ThemeResource SystemControlAcrylicElementBrush}">

Custom acrylic brush

• TintColor: the color/tint overlay layer. Consider specifying both the RGB color value and alpha channel opacity.

• TintOpacity: the opacity of the tint layer. We recommend 80% opacity as a starting point, although different colors may look more compelling at other transparencies.

• BackgroundSource: the flag to specify whether you want background or in-app acrylic.

• FallbackColor: the solid color that replaces acrylic in low-battery mode. For background acrylic, fallback color also replaces acrylic when your app isn’t in the active desktop window or when the app is running on phone and Xbox.

  <ResourceDictionary.ThemeDictionaries>
  <ResourceDictionary x:Key="Default">
      <AcrylicBrush x:Key="MyAcrylicBrush"
          BackgroundSource="HostBackdrop"
          TintColor="#FFFF0000"
          TintOpacity="0.8"
          FallbackColor="#FF7F0000"/>
  </ResourceDictionary>
  
  <ResourceDictionary x:Key="HighContrast">
      <SolidColorBrush x:Key="MyAcrylicBrush"
          Color="{ThemeResource SystemColorWindowColor}"/>
  </ResourceDictionary>
  
  <ResourceDictionary x:Key="Light">
      <AcrylicBrush x:Key="MyAcrylicBrush"
          BackgroundSource="HostBackdrop"
          TintColor="#FFFF0000"
          TintOpacity="0.8"
          FallbackColor="#FFFF7F7F"/>
  </ResourceDictionary>
  </ResourceDictionary.ThemeDictionaries>
  

The following sample shows how to declare AcrylicBrush in code. If your app supports multiple OS targets, be sure to check that this API is available on the user’s machine.

if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.UI.Xaml.Media.XamlCompositionBrushBase"))
{
    Windows.UI.Xaml.Media.AcrylicBrush myBrush = new Windows.UI.Xaml.Media.AcrylicBrush();
    myBrush.BackgroundSource = Windows.UI.Xaml.Media.AcrylicBackgroundSource.HostBackdrop;
    myBrush.TintColor = Color.FromArgb(255, 202, 24, 37);
    myBrush.FallbackColor = Color.FromArgb(255, 202, 24, 37);
    myBrush.TintOpacity = 0.6;

    grid.Fill = myBrush;
}
else
{
    SolidColorBrush myBrush = new SolidColorBrush(Color.FromArgb(255, 202, 24, 37));
    grid.Fill = myBrush;
}

Extending acrylic into your title bar

CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;
ApplicationViewTitleBar titleBar = ApplicationView.GetForCurrentView().TitleBar;
titleBar.ButtonBackgroundColor = Colors.Transparent;
titleBar.ButtonInactiveBackgroundColor = Colors.Transparent;

Source: Acrylic material