博客园客户端(Universal App)开发随笔 -- 样式管理与夜间模式
以今天的眼光来看，一个好应用首先是要有好的用户体验。而好的用户体验最直观的就来自于用户界面。好的用户界面则需要好的设计，更需要好的实现。今天我们就向大家分享一下我们在使用Xaml实现界面设计上的一点心得。
样式管理
我们拿到的设计，大多是一张红线图，布满了距离，字号，色号，事无巨细的量化了我们的用户界面。如果我们就这样把各种属性照搬到上Xaml文件中，那看起来就非常不妙了，比如这样：
<TextBlock Text="首页"FontFamily =" Segoe WP "FontSize ="24"FontWeight =" Normal "TextTrimming =" CharacterEllipsis "TextWrapping =" Wrap "MaxLines ="2" Foreground="#FF297ACD " ></TextBlock>
一个看起来还好，但是通常我们的页面上不可能只有这一个控件。要是有上10个20个，那如果要修改其中一个属性可真是得看花了眼啊。
很幸运，我们在Universal应用的开发中可以把控件的相同属性归纳为资源（Resource），再在需要的时候应用到控件上就可以了。
有些很重要的单独的属性，以颜色为例，不同控件都会使用，却只有几个值，Universal应用可以把它单独抽象成一种 StaticResource 资源--Brush 。将它应用到控件的 Foreground 或者Background 之类的属性上时，就会像"brush（刷子）"一样把控件变为它的颜色。其中常用的SolidColorBrush 可以写成这样：
<SolidColorBrush x:Key=" PostTitleFont" Color="#FF297ACD"/>
将它放到资源字典或者页面的<Page.Resources> 中，就可以通过{StaticResource Brush的x:Key的值} 的形式来应用了。
而同一种控件的多个相同属性，我们可以把它们归纳成Style这种StaticResource资源，存在当前页面的 <Page.Resources> 中：
<Page.Resources>
<SolidColorBrush x:Key=" PostTitleFont" Color="#FF297ACD"/>
<Style x:Key="PostTitleFont" TargetType="TextBlock">
<Setter Property="FontFamily" Value="Segoe WP"/>
<Setter Property="FontSize" Value="24"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="TextTrimming" Value="CharacterEllipsis"/>
<Setter Property="TextWrapping" Value="Wrap"/>
<Setter Property="MaxLines" Value="2"/>
<Setter Property="Foreground" Value="{StaticResourcePostTitleFont }"/>
</Style>
</Page.Resources>
Style 的 TargetType 属性指明了Style可以应用的元素，比如TargetType="TextBlock" 的Style是不能应用到Image 元素上的。而Style中包含的就是要应用的属性了，以 <Setter Property="属性名" Value="属性值"/> 这样的形式。
那么我们在当前页面的需要应用Sytle的地方，比如上面的情况，就只需要通过Style的x:Key 属性来应用：
<TextBlock Text="首页" Style="{StaticResource PivotTitleFont}"></TextBlock>
我们可以看到 Style="{StaticResource PivotTitleFont}" 中的 PivotTitleFont 就是 Style的 x:Key 属性，这样style就能够应用到 TextBlock 上了。
而且Style还能继承。比如我要一个 PostSubTitleFont， 只要字体比PostTitleFont 小一点。那我就可以这么写：
<Style x:Key="PostSubTitleFont" TargetType="TextBlock" BasedOn="{StaticResource PostTitleFont}">
<Setter Property="FontSize" Value="20"></Setter>
</Style>
这样一来如果我想改动它们的字体，只要在PostTitleFont中修改就可以了。是不是很方便？
当然我们通常也不止有一个页面，如果不想在每个页面中都把 Style 和 Brush 都贴一遍，就需要资源字典文件出场了。在我们的项目中添加一个资源字典文件：
再把我们的Style和 Brush都写在里面。然后在需要使用这些Style和 Brush的页面添加形如下面的代码把资源词典引用上就可以啦：
<Page.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Dictionary.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Page.Resources>
当然，我们既然是Universal应用，能不能把Styl和 Brushe在Windows应用和Windows Phone应用间共享呢？答案是可以的。我们只要把资源文件放在.share项目下面，再在App.xaml中添加它的引用就可以：
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Dictionary.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
这样Dictionary.xaml中的Style和 Brush就在Windows应用和Windows Phone应用的所有页面都有效了。
等等，那Windows应用和Windows Phone应用间有所区别的Style和 Brush怎么办呢？
也有办法。只要在Windows项目和Windows Phone项目中各添加一个同名的资源词典文件比如DifferentDictionary.xaml，把不同的Style和 Brush写入，再在App.xaml中引用就能够实现了。
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Dictionary.xaml" />
<ResourceDictionary Source="DifferentDictionary.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
这样，我们通过Resource 和资源词典文件大大简化了用户界面设计的实现过程，是不是很方便呢？
夜间模式
说到阅读软件的用户体验，就不得不提到夜间模式了。下面就说说我们在Windows Phone应用上实现夜间模式的过程吧。
大家可能都在Windows Phone 设置的 开始屏幕+主题 中设置过背景和主题色，当我们修改了背景的 黑/白 后，几乎所有的系统应用的背景色和文字的颜色都立刻改变了，连重启应用都不用。
我们实现的夜间模式正是利用了这个功能。
在Windows Phone应用中，如果我们设置了当前 Page的 RequestedTheme 属性为Light 或者Dark的话就相当于我们在系统设置里修改了背景黑/白。比如通常情况下我们新建一个应用，默认的情况下都是黑底白字：
而如果我们把Page的 RequestedTheme 属性设为的话，可以看到在设计视图中应用变成了白底黑字：
那么我们通过settings页面的一个 ToggleSwitch控件实时切换RequestedTheme这一属性，就可以实时控制应用的各种颜色如背景色，文字颜色为Light或Dark对应的颜色。我们把Light设为日间模式，Dark设为夜间模式。简单一点的情况下可以把 ToggleSwitch 的Toggled事件响应方法设为如下：
private void ts_LightMode_Toggled(object sender, RoutedEventArgs e)
{
if (this.RequestedTheme == ElementTheme.Light)
{
this.RequestedTheme = ElementTheme.Dark;
}
else
{
this.RequestedTheme = ElementTheme.Light;
}
}
接下来如何设置日间模式/夜间模式对应的颜色呢？
在之前的样式管理一节中我们提到了通过{StaticResource PivotTitleFont } 的形式来应用 SolidColorBrush 资源，但是我们在资源 PostTitleFont 定义的时候只写了一个值，系统会自动帮我们转换么？事实上并没有那么简单。我们需要通过 ThemeResource 类型的资源预先设置好2种模式对应的颜色。应用了这种 ThemeResource 资源以后，这个控件就能够响应 RequestedTheme 属性的变化，即时切换显示对应模式的颜色。
那么怎样加入这种资源呢？我们可以打开我们的资源字典 Dictionary.xaml ，在里面加入这样一段代码：
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Light">
</ResourceDictionary>
<ResourceDictionary x:Key="Dark">
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
这里 x:Key 分别为Dark/ Light 的 ResourceDictionary 中，就是我们存放对应两种模式的资源的地方。比如我们希望页面背景在日间模式下是 蓝色，夜间模式下是深灰色，就可以这么写：
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Light">
<SolidColorBrush x:Key="myPageBackground" Color="Blue"></SolidColorBrush>
</ResourceDictionary>
<ResourceDictionary x:Key="Dark">
<SolidColorBrush x:Key="myPageBackground" Color="DarkGray"></SolidColorBrush>
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
在我们的page中就可以这样应用 ThemeResource 资源了：
<Page
x:Class="my_universal.CnblogsMainPage"
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:my_universal"
xmlns:d="https://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
RequestedTheme="Light"
Background="{ThemeResourcemyPageBackground }">
是不是一点都不难呢？
另外我们还发现有两点值得注意：
一是我们可以覆盖系统的 ThemeResource 。我们可以选中任意一个 TextBlock 控件，打开属性栏，选择 Foreground 属性的画笔资源。
可以看到下方以ThemeBrush结尾的都是系统的 ThemeResource 资源，只要在我们的 x:Key 分别为Dark/ Light 的 ResourceDictionary 里加入和它们同名的资源，就能够覆盖它们了。
二是对于Flyout 类型的控件，应用到它上面的 ThemeResource 资源是相反的。就是说当RequestedTheme 属性为 Light 时，Flyout 类型的控件会应用 Dark ResourceDictionary 中的资源。反之亦然。
小结
今天就先向大家分享这些心得，欢迎大家继续关注和拍砖，让我们共同进步。
我们的已经发布的应用和代码可以在下面找到：
Windows Phone Store App link:
https://www.windowsphone.com/zh-cn/store/app/博客园-uap/500f08f0-5be8-4723-aff9-a397beee52fc
Windows Store App link:
https://apps.microsoft.com/windows/zh-cn/app/c76b99a0-9abd-4a4e-86f0-b29bfcc51059
GitHub open source link:
https://github.com/MS-UAP/cnblogs-UAP
MSDN Sample Code:
https://code.msdn.microsoft.com/CNBlogs-Client-Universal-477943ab