模板10 HamburgerMenu和PageHeader背景颜色 [英] Template 10 HamburgerMenu and PageHeader background color

问题描述

使用Live Property Explorer，我可以看到HamburgerMenu控件的背景颜色是DimGray或#FF2B2B2B，具体取决于浅色/深色主题选择，但是这些颜色从何处继承其值?

Using the Live Property Explorer I can see the background colour of the HamburgerMenu control is DimGray or #FF2B2B2B depending on the Light/Dark theme selection but where do those colours inherit their value from please?

我想使用那些相同的颜色作为PageHeader背景颜色，而不是CustomColor(在模板中默认为SteelBlue).

I would like to use those same colours for the PageHeader background colour rather than the CustomColor (which is SteelBlue by default in the template).

在Custom.xaml资源字典中，如果我注释掉以浅色"资源字典中的PageHeader控件为目标的样式，则该样式几乎对标题的右侧部分具有我想要的效果，而对Hamburger标题则没有效果.

In the Custom.xaml resource dictionary, if I comment out the style targeting the PageHeader control in the "Light" resource dictionary that almost has my desired effect on the right section of the header but not on the Hamburger header.

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

推荐答案

导航区域背景的颜色不是继承的，而是在Template10中这样编码的.该属性的名称为NavAreaBackground，并且可以在源代码中定义

The colors for the background of the navigation area aren't inherited but coded like this in Template10. The name of the property is NavAreaBackground and the definition in the source can be seen here.

如果要更改此颜色，可以使用类似

If you want to change this color, you could go for a style definition something like

<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中引用样式.

and then reference the style in your HamburgerMenu with Style="{ThemeResource HamburgerMenuStyle}".

关于钢蓝色，这是来自HamburgerMenu的HamburgerBackground属性(

As for the steel blue color, this one comes from the HamburgerBackground property of the HamburgerMenu (definition of the header in the source). You can override the color in the same way I demonstrated above.

对于已经发布了如何应用颜色的代码的PageHeader也是一样.现在，只需使用您为HamburgerBackground定义的颜色即可.

And the same for the PageHeader where you already posted the code of how to apply a color. Now just use the same color you defined for the HamburgerBackground.

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

Quick note: I once encountered a bug where the NavAreaBackground wasn't applied if the other style properties weren't defined in your style too. Not sure if this is still the case.

这篇关于模板10 HamburgerMenu和PageHeader背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！