Marvin's Blog【程式人生】

Ability will never catch up with the demand for it

12 Mar 2020

UWP设计文档阅读笔记(一):XAML theme resources

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提供了一些主题资源相关的故障排除指导。

(本篇完)

Categories

Tags

comments powered by Disqus