How to customize Acrylic brush

Question

I want to paint Stack Panel surface using Acrylic brush.

<StackPanel Background="{ThemeResource SystemControlAcrylicElementBrush}"></StackPanel>

It works for me but there is a problem when I want to change Tint color and opacity. There is a following code to change it:

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

I don't know where should I place it and rename brush for this?

 <StackPanel Background="{ThemeResource **MyAcrylicBrush**}"></StackPanel>

Thanks for help. P.S. You need Windows Insider SDK and system build 16190 or higher

Answer 1

Method 1:

Add ResourceDictionary.ThemeDictionaries in Application.Resources

In App.xaml

<Application.Resources>
    <ResourceDictionary>
        <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>
    </ResourceDictionary>
</Application.Resources>

Method 2:

As @jsmyth886 answered

1. Add a separate ResourceDictionary file and place your ResourceDictionary.ThemeDictionaries code

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

2. You MergedDictionaries in App.xaml to Merged your ResourceDictionary file

   <Application.Resources>
       <ResourceDictionary>
           <ResourceDictionary.MergedDictionaries>
               <ResourceDictionary Source="Dictionary1.xaml" />
           </ResourceDictionary.MergedDictionaries>
       </ResourceDictionary>
   </Application.Resources>
   

For more Info: ResourceDictionary and XAML resource references, XAML for Windows 10 Controls - Styling

Answer 2

You can create a ResourceDictionary, for example called "ThemeDictionary.xaml" and put the code you have for your AcrylicBrush in there.

Then in your App.xaml you can reference your ResourceDictionary like so:

<Application.Resources>
  <ResourceDictionary>
    <ResourceDictionary.MergedDictionaries>
      <ResourceDictionary Source="ThemesDictionary.xaml" />
    </ResourceDictionary.MergedDictionaries>
  </ResourceDictionary>
</Application.Resources>