模板 10 HamburgerMenu 和 PageHeader 背景颜色

Question

使用 Live Property Explorer，我可以看到 HamburgerMenu 控件的背景颜色是 DimGray 或 #FF2B2B2B，具体取决于 Light/Dark 主题选择，但是这些颜色从哪里继承它们的值？

我想为 PageHeader 背景颜色而不是 CustomColor（模板中默认为 SteelBlue）使用相同的颜色。

在 Custom.xaml 资源字典中，如果我在“Light”资源字典中注释掉针对 PageHeader 控件的样式，该样式几乎对标题的右侧部分产生了我想要的效果，但对 Hamburger 标题却没有。

        <!--<Style TargetType="controls:PageHeader">
            <Setter Property="Background" Value="{ThemeResource CustomColorBrush}" />
            <Setter Property="Foreground" Value="{ThemeResource ContrastColorBrush}" />
        </Style>-->

Answer 1

导航区域背景的颜色不是继承的，而是在 Template10 中这样编码。属性名称为NavAreaBackground，源码中的定义可见here。

如果你想改变这种颜色，你可以选择类似的样式定义

<ResourceDictionary.ThemeDictionaries>
    <ResourceDictionary x:Key="Light">
        <Style TargetType="controls:HamburgerMenu" x:Key="HamburgerMenuStyle">
            <Setter Property="NavAreaBackground" 
                    Value="#FFFFFF" />
        </Style>
    </ResourceDictionary>
    <ResourceDictionary x:Key="Default">
        <Style TargetType="controls:HamburgerMenu" x:Key="HamburgerMenuStyle">
            <Setter Property="NavAreaBackground" 
                    Value="#000000" />
        </Style>
    </ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

然后使用 Style="{ThemeResource HamburgerMenuStyle}" 引用 HamburgerMenu 中的样式。

至于钢蓝色，这个来自 HamburgerMenu (definition of the header in the source) 的 HamburgerBackground 属性。您可以按照我上面演示的相同方式覆盖颜色。

对于您已经发布了如何应用颜色的代码的 PageHeader 也是如此。现在只需使用您为 HamburgerBackground 定义的相同颜色。

快速说明：我曾经遇到过一个错误，如果您的样式中也没有定义其他样式属性，则不会应用 NavAreaBackground。不确定是否仍然如此。