Fluent AcrylicBrush 不会在 Light、Dark、主题等之间切换。UWP答案

【问题标题】：Fluent AcrylicBrush does not switch between Light, Dark, theme etc. UWPFluent AcrylicBrush 不会在 Light、Dark、主题等之间切换。UWP
【发布时间】：2019-07-25 10:15:19
【问题描述】：

在 App.xaml 中定义浅色主题 (<AcrylicBrushTintColor="Red"/>)、深色 (<AcrylicBrushTintColor="Orange"/>)。根据这篇文章Changing UWP project's Target Version from 1803 to 1809 disables NavigationView's Acrylic texture - why?，我将以下内容添加到 ShellPage.xaml。当我在浅色和深色主题之间切换时，预期的行为是应用程序NavigationView 控件将具有在红色和橙色之间切换的AcrylicBrush 色调。在下面的定义中，实际行为是保持橙色。

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>

【问题讨论】：

标签： c# xaml uwp windows-template-studio

【解决方案1】：

您可以直接将 Key(NavigationViewExpandedPaneBackGround) 提供给您的 AcrylicBrush。所以它会改变你的导航视图背景。

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

希望这能解决您的问题。

【讨论】：

完全改变这给了我这个例外。 Windows.UI.Xaml.Markup.XamlParseException: 'XAML parsing failed.'
当您希望将丙烯酸画笔应用于 NavigationViewPane 时，我将编辑我的答案
这似乎让我可以解决这个问题。然而，微软团队似乎并不打算这样做。谢谢@Vignesh

【解决方案2】：

如果你使用StaticResource，它将保持刷它从第一次评估。但是，您根本不必在 ShellPage 上提供资源，而您在 App.xaml 中拥有的资源应该足够了 - 您在那里有一个名为 NavigationViewExpandedPaneBackground 的画笔，这个画笔应该会自动覆盖 NavigationPane 默认值（链接的问题专门讨论了资源名称与内置名称不同的情况）。此外，它应该根据当前主题工作，因为它是主题词典的一部分。

尝试从ShellPage 中删除<StaticResource> 元素，看看是否能解决问题。

我测试了这个更改，它可以正常工作。

轻主题

深色主题

【讨论】：

不幸的是，AcrylicBrush 效果因此而丢失。在应用全屏模式下，NavigationView 没有透明度。
您不能使用设置为 1 的TintOpacity。这会使色调完全不透明。尝试使用 0.5 之类的东西，你肯定会看穿。
我应该提到我的 TintOpacity 一直下降到“0.1”，甚至首先是“0.01”——这就是我发现某些地方不对劲的原因。我把它调到“1”，所以明暗之间的切换很明显。好奇，你在 XAML 中绑定MyAcrylicBrush 在哪里？
我根本没有使用 MyAcrylicBrush。我只是让 App.xaml 的内容与您的内容相同，但从未使用 MyAcrylicBrush，只有我在答案中提到的默认名称的画笔 :-)
知道了。你是 17763 还是 17134？你所拥有的基本上让我回到了原点——问题的起源。我同意它应该可以工作，但不知何故它不包括NavigationView 控件。我看到所有其他控件都在切换亮/暗。