Fluent AcrylicBrush does not switch between Light, Dark, theme etc. UWP

问题

Defined Light theme (<AcrylicBrush TintColor="Red"/>), Dark, (<AcrylicBrush TintColor="Orange"/>) in App.xaml. Per this post, Changing UWP project's Target Version from 1803 to 1809 disables NavigationView's Acrylic texture - why?, I added the following to ShellPage.xaml. The expected behavior when I toggle between Light and Dark theme is that the app NavigationView control will have an AcrylicBrush tint that toggles between Red and Orange. In the definition below, actual behavior is it stays Orange.

ShellPage.xaml:

<Page.Resources>
    <StaticResource  x:Key="NavigationViewExpandedPaneBackground"
                     ResourceKey="MyAcrylicBrush"/>
</Page.Resources>

App.xaml:

<Application
x:Class="TEST.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.ThemeDictionaries>
            <ResourceDictionary x:Key="Default">
                <AcrylicBrush x:Key="MyAcrylicBrush"
                              BackgroundSource="HostBackdrop"
                              TintColor="Green"
                              TintOpacity="0.8" />
                <AcrylicBrush x:Key="NavigationViewDefaultPaneBackground"
                              BackgroundSource="HostBackdrop"
                              TintColor="Green"
                              TintOpacity="0.8" />
                <AcrylicBrush x:Key="NavigationViewTopPaneBackground"
                              BackgroundSource="HostBackdrop"
                              TintColor="Green"
                              TintOpacity="0.8" />
                <AcrylicBrush x:Key="NavigationViewExpandedPaneBackground"
                              BackgroundSource="HostBackdrop"
                              TintColor="Green"
                              TintOpacity="0.8" />
            </ResourceDictionary>
            <ResourceDictionary x:Key="Dark">
                <AcrylicBrush x:Key="MyAcrylicBrush"
                              BackgroundSource="HostBackdrop"
                              TintColor="Orange"
                              TintOpacity="0.8" />
                <AcrylicBrush x:Key="NavigationViewDefaultPaneBackground"
                              BackgroundSource="HostBackdrop"
                              TintColor="Orange"
                              TintOpacity="0.8" />
                <AcrylicBrush x:Key="NavigationViewTopPaneBackground"
                              BackgroundSource="HostBackdrop"
                              TintColor="Orange"
                              TintOpacity="0.8" />
                <AcrylicBrush x:Key="NavigationViewExpandedPaneBackground"
                              BackgroundSource="HostBackdrop"
                              TintColor="Orange"
                              TintOpacity="0.8" />
            </ResourceDictionary>
            <ResourceDictionary x:Key="Light">
                <AcrylicBrush x:Key="MyAcrylicBrush"
                              BackgroundSource="HostBackdrop"
                              TintColor="Red"
                              TintOpacity="1"/>
                <AcrylicBrush x:Key="NavigationViewDefaultPaneBackground"
                              BackgroundSource="HostBackdrop"
                              TintColor="Red"
                              TintOpacity="1" />
                <AcrylicBrush x:Key="NavigationViewTopPaneBackground"
                              BackgroundSource="HostBackdrop"
                              TintColor="Red"
                              TintOpacity="1" />
                <AcrylicBrush x:Key="NavigationViewExpandedPaneBackground"
                              BackgroundSource="HostBackdrop"
                              TintColor="Red"
                              TintOpacity="1"/> 
            </ResourceDictionary>
        </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>
</Application.Resources>
</Application>

回答1:

You can directly give the Key(NavigationViewExpandedPaneBackGround) to your AcrylicBrush. So it will change your navigation view background.

  <Page.Resources>
      <ResourceDictionary>
            <ResourceDictionary.ThemeDictionaries>
                <ResourceDictionary x:Key="Light">
                    <AcrylicBrush x:Key="NavigationViewExpandedPaneBackground" BackgroundSource="HostBackdrop" TintColor="{ThemeResource SystemAccentColorDark1}" FallbackColor="{ThemeResource SystemAccentColorDark1}" TintOpacity="0.80"/>   
                </ResourceDictionary>
                <ResourceDictionary x:Key="Dark">
                    <AcrylicBrush x:Key="NavigationViewExpandedPaneBackground" BackgroundSource="HostBackdrop" TintColor="{ThemeResource SystemAltHighColor}" FallbackColor="#333333" TintOpacity="0.50"/>
                </ResourceDictionary>
            </ResourceDictionary.ThemeDictionaries>
        </ResourceDictionary>
</Page.Resources>

Hope this solves your problem.

回答2:

If you use StaticResource, it will keep the brush it from the first evaluation. However, you should not have to provide the resource on ShellPage at all and what you have in App.xaml should be enough - you have a brush called NavigationViewExpandedPaneBackground there and this brush should automatically override the NavigationPane default (the linked question talked specifically about the case when the resource's name is different from the built-in one). Moreover, it should work according to the current theme as it is part of theme dictionaries.

Try deleting the <StaticResource> element from ShellPage to see if it solves the problem.

I tested this change and it works properly.

Light theme

Dark theme

来源：https://stackoverflow.com/questions/54977512/fluent-acrylicbrush-does-not-switch-between-light-dark-theme-etc-uwp