通过


Windows应用中的主题

Windows应用支持浅色和深色主题,你可以自定义应用如何响应用户的主题首选项。 本文介绍如何更改主题、使用主题画笔、自定义主题颜色以及使用颜色 API。

有关有效使用颜色的设计指南,请参阅 Windows 中的颜色

更改主题

可通过更改 RequestedTheme 属性来更改 App.xaml 文件中的主题。

<Application
    x:Class="App9.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App9"
    RequestedTheme="Dark">
</Application>

删除 RequestedTheme 属性意味着应用程序将使用用户的系统设置。

用户还可以选择高对比度主题,该主题使用一块小型的对比色调色板,使界面的对比效果更明显。 在此情况下,系统将替代 RequestedTheme。

测试专题

如果不为应用请求主题,请确保用浅色和深色主题测试应用,保证在应用在任何情况下均可清晰显示。

主题画笔

常见控件自动使用主题画笔调整浅色和深色主题的对比度。

例如,下图演示了 AutoSuggestBox 使用主题画笔的方式:

主题画笔控件示例

使用主题画笔

创建自定义控件的模板时,请使用主题画笔,而不是硬编码颜色值。 这样,应用可轻松适应任何主题。

例如,这些用于 ListView 的项模板演示了如何在自定义模板中使用主题画笔。

带图标的双行列表项示例

<ListView ItemsSource="{x:Bind ViewModel.Recordings}">
    <ListView.ItemTemplate>
        <DataTemplate x:Name="DoubleLineDataTemplate" x:DataType="local:Recording">
            <StackPanel Orientation="Horizontal" Height="64" AutomationProperties.Name="{x:Bind CompositionName}">
                <Ellipse Height="48" Width="48" VerticalAlignment="Center">
                    <Ellipse.Fill>
                        <ImageBrush ImageSource="Placeholder.png"/>
                    </Ellipse.Fill>
                </Ellipse>
                <StackPanel Orientation="Vertical" VerticalAlignment="Center" Margin="12,0,0,0">
                    <TextBlock Text="{x:Bind CompositionName}" Style="{ThemeResource BodyStrongTextBlockStyle}" Foreground="{ThemeResource TextFillColorPrimaryBrush}" />
                    <TextBlock Text="{x:Bind ArtistName}" Style="{ThemeResource BodyTextBlockStyle}" Foreground="{ThemeResource TextFillColorTertiaryBrush}"/>
                </StackPanel>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

若要详细了解如何在应用中使用主题画笔,请参阅主题资源

点缀色

常见控件使用主题色表示状态信息。 默认情况下,主题色是用户在设置中选择的 SystemAccentColor。 但是,还可自定义应用的主题色来彰显你的品牌。

Windows 控件

用户选择的重音标头 用户选择的主题色

自定义强调标头 自定义品牌强调色

替代主题色

若要更改应用的主题色,请将以下代码放入 app.xaml

<Application.Resources>
    <ResourceDictionary>
        <Color x:Key="SystemAccentColor">#107C10</Color>
    </ResourceDictionary>
</Application.Resources>

选择主题色

为应用选择自定义主题色时,请确保使用主题色的文本和背景拥有合适的对比度,以获得最佳的可读性。 若要测试对比度,可以在Windows设置中使用颜色选取器工具,也可以使用这些在线对比度工具

Windows 设置自定义主题颜色选取器

主题色调色板

Windows shell 中的强调色算法生成强调色的浅色和深色变化。

主题色调色板

以下色调可作为主题资源访问。

  • SystemAccentColorLight3
  • SystemAccentColorLight2
  • SystemAccentColorLight1
  • SystemAccentColorDark1
  • SystemAccentColorDark2
  • SystemAccentColorDark3

还可以使用 UISettings.GetColorValue 方法和 UIColorType 枚举以编程方式访问强调色调色板。

您可以在应用中使用强调色调色板来设置颜色主题。 以下是一个在按钮上使用强调色调色板的示例。

按钮所应用的主题色调色板

<Page.Resources>
    <ResourceDictionary>
        <ResourceDictionary.ThemeDictionaries>
            <ResourceDictionary x:Key="Light">
                <SolidColorBrush x:Key="ButtonBackground" Color="{ThemeResource SystemAccentColor}"/>
                <SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="{ThemeResource SystemAccentColorLight1}"/>
                <SolidColorBrush x:Key="ButtonBackgroundPressed" Color="{ThemeResource SystemAccentColorDark1}"/>
            </ResourceDictionary>
        </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>
</Page.Resources>

<Button Content="Button"></Button>

在彩色背景中使用彩色文本时,请确保文本与背景之间具有足够的对比度。 默认情况下,超链接或超文本将使用主题色。 如果对背景应用主题色的不同变体,则应使用原始主题色的变体,从而优化彩色背景与彩色文本的对比度。

下图展示了主题色中色调的示例,包括不同深浅变化,以及如何在彩色表面上应用彩色字。

颜色表中的颜色的屏幕截图,其中显示了从顶部浅蓝到底部深蓝的颜色渐变。

若要详细了解如何设置控件样式,请参阅 XAML 样式

颜色接口 API

多个 API 可用于向应用程序添加颜色。 首先,Colors 类可实现广泛的预定义颜色。 可通过 XAML 属性自动访问这些内容。 在以下示例中,我们创建了一个按钮并将背景色属性和前景色属性设置为 Colors 类的成员。

<Button Background="MediumSlateBlue" Foreground="White">Button text</Button>

可使用 XAML 中的 Color 结构通过 RGB 或十六进制值自行创建颜色。

<Color x:Key="LightBlue">#FF36C0FF</Color>

还可使用 FromArgb 方法通过代码创建相同的颜色。

Color LightBlue = Color.FromArgb(255,54,192,255);
Windows::UI::Color LightBlue = Windows::UI::ColorHelper::FromArgb(255,54,192,255);

“Argb”中的各字母分别代表 Alpha(不透明度)、红、绿和蓝,这四个部分共同组成一种颜色。 每个参数的值可介于 0 至 255 之间。 可以选择省略第一个值,这样会得到默认的不透明度为255,即100%不透明。

注释

如果使用 C++,则必须使用 ColorHelper 类创建颜色。

Color 最常用作 SolidColorBrush 的参数,该参数可用于以单一纯色绘制 UI 元素。 这些画笔通常在ResourceDictionary中定义,以便可用于多个元素。

<ResourceDictionary>
    <SolidColorBrush x:Key="ButtonBackgroundBrush" Color="#FFFF4F67"/>
    <SolidColorBrush x:Key="ButtonForegroundBrush" Color="White"/>
</ResourceDictionary>

若要详细了解如何使用画笔,请参阅 XAML 画笔