Design and UI -> Style -> XAML Styles -> XAML theme resources

XAML框架支持三种主题设置：Light、Dark、HighContrast。

加载主题资源，需要在XAML中使用{ThemeResource} markup extension，而不是{StaticResource} markup extension。前者能随系统主题变化而重新加载，后者不能。

themeresources.xaml文件保存着主题资源，在Win10 SDK的\(Program Files)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\<SDK version>\Generic目录可以获取。同一themeresources.xaml中的主题资源在同目录下的generic.xaml文件中会重复出现。

上述的两个文件只是设计参考用，不会被Windows Runtime主动使用到App上。但是Windows Runtime会加载这些资源，让App的XAML可以引用到这两个文件中的资源。

关于自定义主题的一些指导方针：

在Light、Dark、HighContrast主题中的颜色汇集成Windows color ramp。

XAML框架提供了一系列颜色，并给这些颜色命名。命名模式如：System[Simple Light/Dark Name]Color，一些例子：

  • SystemAltHighColor， #FFFFFFFF（亮色值）， #FF000000（暗色值）

可以参考章节中的表格。

当Windows系统以HighConstrast主题运行时，系统调色盘会提供此主题相关的颜色。这些颜色独立于XAML的主题颜色，并被一些XAML控件中自动使用。

一个例子：

  • SystemColorButtonFaceColor Button Text (background) Background #FFF0F0F0

其中Button Text (background)是此颜色在Windows设置中显示的名字。

完整列表可以从章节中查看。

事实上，Windows提供多种高对比度的主题，并且可以在Ease of Access Center中修改这些主题的颜色，所以无法提供一个这些主题对应的完整的颜色列表。

在高对比度颜色之外，系统还提供了着重色（accent color）。在运行时，应用可以获取用户自定义设置的着重色。

上面提到的这些颜色，在SolidColorBrush的Color部属上可以设置使用。但是需要使用相应的命名模式：SystemControl[Simple HighContrast name][Simple light/dark name]Brush，例子：SystemControlBackroundAltHighBrush

SystemControlBackroundAltHighBrush随主题而变化，比如在Light或者Dark主题下，其定义好似：

<SolidColorBrush x:Key="SystemControlBackgroundAltHighBrush" Color="{StaticResource SystemAltHighColor}"/>

在高对比主题下，其定义会变成：

<SolidColorBrush x:Key="SystemControlBackgroundAltHighBrush" Color="{ThemeResource SystemColorButtonFaceColor}"/>

themeresources.xaml 中定义了一些样式可以被应用到UI的文本容器中，比如TextBlock或者RichTextBlock。这些样式不是隐性默认样式，而是方便给应用程序使用，以满足Windows type ramp的要求。

下面罗列出了这些样式：

<TextBlock Text="Header" Style="{StaticResource HeaderTextBlockStyle}"/>
<TextBlock Text="SubHeader" Style="{StaticResource SubheaderTextBlockStyle}"/>
<TextBlock Text="Title" Style="{StaticResource TitleTextBlockStyle}"/>
<TextBlock Text="SubTitle" Style="{StaticResource SubtitleTextBlockStyle}"/>
<TextBlock Text="Base" Style="{StaticResource BaseTextBlockStyle}"/>
<TextBlock Text="Body" Style="{StaticResource BodyTextBlockStyle}"/>
<TextBlock Text="Caption" Style="{StaticResource CaptionTextBlockStyle}"/>

更多可以参照Typography in UWP apps

对于RitchTextBlock来说，只有下面预定义的样式：

  • BaseRichTextBlockStyle
  • BodyRichTextBlockStyle

这是因为RitchTextBlock本身比较方便修改显示特性，不太需要预定义的样式。

对于按键也有可有一些预定义的样式

  • TextBlockButtonStyle，可应用于ButtonBase
  • NavigationBackButtonNormalStyle， 可应用于Button
  • NavigationBackButtonSmallStyle， 可应用于Button

Troubleshooting theme resources提供了一些主题资源相关的故障排除指导。

(本篇完)

2020-11-21更新

The expected keys for the basic themes are “Light” and “Dark”.

For custom controls, you should also have a “HighContrast” keyed theme dictionary whenever you have theme dictionaries for “Light” and “Dark”. There are other named high contrast themes, but the “HighContrast” theme key is the fallback the system uses for finding the high contrast theme if no other theme resources for high contrast are available.

For custom controls, if you don’t support “Light” and “Dark” themes and only support one theme as well as at least one “HighContrast” theme, you can change your main dictionary’s x:Key attribute to “Default”. “Default” is the ResourceDictionary that will be used if a ResourceDictionary in the specified theme (such as “Dark”) cannot be found.

For high contrast themes and custom control scenarios, in addition to system brush resources, there are also system color resources such as “SystemColorButtonFaceColor” that you can assign to be the Color value of SolidColorBrush resources. You can use these as values for your “HighContrast” theme dictionary and also “Default”. If the resource exists for each of the themes your control supports, the XAML templates will load the appropriate resource for the theme that’s active.

从/c/Program Files (x86)/Windows Kits/10/DesignTime/CommonConfiguration/Neutral/UAP/10.0.19041.0/Generic/Generic.xaml看，共定义了三种Themes，分别是：

  • Default
  • HighContrast
  • Light

其中Default就是BlackTheme。

（更新完）