如何使用 ResourceDictionary 设置页面背景颜色？

Question

我创建了一个 ResourceDictionary 文件来存储 Page 的背景颜色。接下来，我在主页中引用了 ResourceDictionary。

虽然 Visual Studio 2019 (16.7.7) 设计器正确地将 Page 的背景颜色渲染为红色，但运行程序本身却没有。

我做错了什么？

来源如下：

MainPage.xaml

<Page
    x:Class="Test1.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
    <Page.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Dictionary1.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Page.Resources>
    <StackPanel>
        <TextBlock>
            Test
        </TextBlock>
    </StackPanel>
</Page>

Dictionary1.xaml

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">

    <Style TargetType="Page">
        <Setter Property="Background" Value="Red" />
    </Style>
</ResourceDictionary>

Answer 1

您不想在 Page 中导入资源字典，而是想在 App.xaml 中导入此资源字典，如下所示：

<Application
    x:Class="Test1.App">
    
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Dictionary1.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

然后您需要添加 x:Key 到您的自定义样式：

<Style x:Key="CustomPageBackground" TargetType="Page">
    <Setter Property="Background" Value="Red" />
</Style>

现在在您的 Page 中您只需添加以下行：

Style="{StaticResource CustomPageBackground}"

像这样：

<Page
    x:Class="Test1.MainPage"
    Style="{StaticResource CustomPageBackground}"
    ...>
    
    <!-- UI-elements -->
</Page>

Answer 2

来自吉姆·沃克@https://github.com/MicrosoftDocs/windows-uwp/issues/2790#issuecomment-722065687：

the preferred way to change colors in your app is lightweight styling, which is overriding the system brushes that controls use by creating your own brush with the same key. The class documentation for most controls has a list of resources that you can override.

For the Page background, you override the ApplicationPageBackgroundThemeBrush resource:
<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.ThemeDictionaries>
            <ResourceDictionary x:Key="Default">
                <SolidColorBrush x:Key="ApplicationPageBackgroundThemeBrush" Color="Red"/>
                <Style TargetType="TextBlock">
                    <Setter Property="Foreground" Value="Black"/>
                </Style>
            </ResourceDictionary>
        </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>
</Application.Resources>
(Since it's a ThemeResource, it needs to be in a theme dictionary. I'm using a dictionary with the key "Default" to keep it simple, but it's better to use both "Light" and "Dark" resources as discussed in XAML theme resources.)

This also assumes that the page background is set to this resource, which it is by default in Visual Studio templates, like this: Background="{ThemeResource ApplicationPageBackgroundThemeBrush}".

如何使用 ResourceDictionary 设置页面背景颜色？

How can I set page background color using ResoureDictionary?

uwp

uwp-xaml

来源如下：

MainPage.xaml

Dictionary1.xaml