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。 但是,还可自定义应用的主题色来彰显你的品牌。
替代主题色
若要更改应用的主题色,请将以下代码放入 app.xaml。
<Application.Resources>
<ResourceDictionary>
<Color x:Key="SystemAccentColor">#107C10</Color>
</ResourceDictionary>
</Application.Resources>
选择主题色
为应用选择自定义主题色时,请确保使用主题色的文本和背景拥有合适的对比度,以获得最佳的可读性。 若要测试对比度,可以在Windows设置中使用颜色选取器工具,也可以使用这些在线对比度工具。
主题色调色板
Windows shell 中的强调色算法生成强调色的浅色和深色变化。
以下色调可作为主题资源访问。
SystemAccentColorLight3SystemAccentColorLight2SystemAccentColorLight1SystemAccentColorDark1SystemAccentColorDark2SystemAccentColorDark3
还可以使用 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 画笔。