Windows 8实例教程系列 - 自定义应用风格

在Windows 8 XAML实例教程中，曾经提及过应用风格设计方法以及如何创建可复用样式代码。本篇将深入讨论如何创建自定义Windows8应用风格。

随着计算机硬件性能的提升，用户对于软件应用的体验性要求越来越高，而应用的风格设计也成为衡量应用成功与否的一个标准。











模板样式基础

在XAML实例教程中曾介绍过，Windows8样式应用可以根据应用范围不同进行分类，

1. 局部资源(Page Resources)，该样式模板代码位于当前页面中，其效果仅有效于当前页面，其基本语法格式如下：

<Page.Resources>

<资源定义 />

</Page.Resources>

2. 全局资源(Resources Dictionary)，该样式模板代码位于资源字典文件中，其效果可以被应用于整个项目，其基本语法格式如下：

<根元素对象.Resources>
<资源定义 />
</根元素对象.Resources>
在定义Resources Dictionary后，则需要在App.xaml中声明该资源字典，使其全局化，其定义方法如下：



对比两者，第二种方法更加有利于资源样式代码的重复利用以及代码维护，所以微软推荐开发人员尽量使用全局资源的方式定义项目样式。

模板样式调用

无论使用以上任何一种样式声名方法，其调用方法是相同的，代码如下：

<TextBlock Style="{StaticResource PageHeaderTextStyle}"/>

其中PageHeaderTextStyle是模板样式名称。

Windows 8默认应用模板样式

在实际项目开发中，微软建议开发和设计人员基于微软默认样式模板创建或者修改应用样式，使用Visual Studio提供的默认模板样式创建Windows8项目，然后根据项目需求创建布局控件以及交互控件，创建逻辑代码等。

本篇将使用Visual C# - Windows Store - Split App(XAML)模板做为演示。

首先使用Visual Studio 2012创建一个项目，



Visual Studio自动生成项目结构，其中包括简单页面代码以及基本样式代码。



默认项目模板样式代码都在StandardStyles.xaml文件中，



默认样式代码生成的应用界面如下：



下面我们将进行简单修改应用样式，生成新的应用界面如下：



首先修改应用名称，在ItemsPage.xaml页面中，Text="{StaticResource AppName}"尝试从App.xaml中调用应用名称，

<TextBlock x:Name="pageTitle" Grid.Column="1" Text="{StaticResource AppName}" IsHitTestVisible="false" Style="{StaticResource PageHeaderTextStyle}"/>

在App.xaml中修改，

<x:String x:Key="AppName">Windows Store Controls</x:String>

然后进入StandardStyles.xaml文件，通过快速浏览可以发现代码中有许多相关注释代码，例如：



开发人员可以根据需求查找对应控件样式代码进行修改。

在StandardStyles.xaml文件中搜索"LayoutRootStyle"，该样式名是控制布局页面根样式代码，

<Style x:Key="LayoutRootStyle" TargetType="Panel">
<Setter Property="Background" Value="{StaticResource ApplicationPageBackgroundThemeBrush}"/>
<Setter Property="ChildrenTransitions">
<Setter.Value>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Setter.Value>
</Setter>
</Style>

在代码中，应用背景是由ApplicationPageBackgroundThemeBrush定义，为了修改应用背景，首先在项目中查找ApplicationPageBackgroundThemeBrush资源，通过搜索可以发现，在默认模版项目中，没有ApplicationPageBackgroundThemeBrush资源定义代码，这是因为Windows Store应用默认风格资源是定义保存在本地目录中， ..\(Program Files)\windows kits\8.0\Include\winrt\xaml\design 目录，



根据微软的建议，我们不需要直接修改默认风格资源，而只需要在当前StandardStyles.xaml文件中重新定义ApplicationPageBackgroundThemeBrush即可替换默认模板风格。

在StandardStyles.xaml文件中添加以下代码：

<SolidColorBrush x:Key="ApplicationPageBackgroundThemeBrush" Color="#018297"/>

在完成应用背景修改后，我们可以根据上面所诉方法，重新定义应用字体样式，鼠标样式以及默认按钮样式等，添加以下代码到StandardStyles.xaml文件，

<SolidColorBrush x:Key="ApplicationForegroundThemeBrush" Color="#FFFFFF"/>

<SolidColorBrush x:Key="ApplicationSecondaryForegroundThemeBrush" Color="#FF991100"/>

<SolidColorBrush x:Key="ApplicationPointerOverForegroundThemeBrush" Color="#AAAAAA"/>

<SolidColorBrush x:Key="BackButtonBackgroundThemeBrush" Color="#00000000"/>

<SolidColorBrush x:Key="BackButtonForegroundThemeBrush" Color="#FFFFFF"/>

<SolidColorBrush x:Key="BackButtonPressedBackgroundThemeBrush" Color="#00000000"/>

<SolidColorBrush x:Key="BackButtonPressedForegroundThemeBrush" Color="#CCCCCC"/>

<SolidColorBrush x:Key="BackButtonPointerOverBackgroundThemeBrush" Color="#00000000"/>

<SolidColorBrush x:Key="ListViewItemPlaceholderBackgroundThemeBrush" Color="#306772"/>

修改Tiles磁片样式，从ItemPage.xaml中可以看到，ListView是承载磁片绑定数据的控件，其资源样式模板使用的Standard80ItemTemplate,

<ListView
x:Name="itemListView"
AutomationProperties.AutomationId="ItemsListView"
AutomationProperties.Name="Items"
TabIndex="1"
Grid.Row="1"
Visibility="Collapsed"
Margin="0,-10,0,0"
Padding="10,0,0,60"
ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
ItemTemplate="{StaticResource Standard80ItemTemplate}"
SelectionMode="None"
IsSwipeEnabled="false"
IsItemClickEnabled="True"
ItemClick="ItemView_ItemClick"/>

通过在StandardStyles.xaml文件中搜索Standard80ItemTemplate，可以发现模板是通过图片的形式控制Tile的背景，所以，我们可以通过修改图片的方式修改Tile的背景效果，

<DataTemplate x:Key="Standard80ItemTemplate">
<Grid Margin="6">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="60" Height="60">
<Image Source="{Binding Image}" Stretch="UniformToFill"/>
</Border>
<StackPanel Grid.Column="1" Margin="10,0,0,0">
<TextBlock Text="{Binding Title}" Style="{StaticResource ItemTextStyle}" MaxHeight="40"/>
<TextBlock Text="{Binding Subtitle}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap"/>
</StackPanel>
</Grid>
</DataTemplate>

在项目的Assets目录下，可以找到相关背景图片，根据需求，我将修改好的图片复制覆盖到当前目录，



在编译运行项目前，需要对启动屏幕进行简单的背景设置，在项目目录中，双击”package.appxmanifest“，即可进入应用装配列表窗口，



在该窗口，点击”Splash Screen“，在”Background color“中设置背景代码”#018297“



编译运行项目，应用界面效果如下：



以上是本篇实例，简单介绍如何创建自定义应用风格。大家可以根据该方法扩展修改具体控件样式模板和风格，相关内容将在后文创建自定义控件时介绍。

本篇实例源代码

这里推荐一款由国人开发的优秀开源Windows8控件主题 - Sugar UI

SugarUI专为开发者设计；该套装包含Sweet和Solid两组自定义控件样式以及一组增强控件。两组控件样式充满个性且不失Windows Store App的风格；亮暗两版随意切换，适用于各种配色方案。一组增强控件提供了针对一些常用功能的支持，节省了开发时间；UI视觉新颖、适配性强；交互形式流畅、创新、用户体验优秀。







控件支持网站：http://www.redsafi.com/sugarui/index_cn.html

最新版源代码下载：https://github.com/RedSafi-UX/SugarUI

Sugar UI 源代码本地下载

欢迎大家留言讨论学习Windows 8应用开发，希望能够看到更多优秀的Windows store应用。

欢迎大家加入QQ技术群，一起学习讨论Windows 8&Silverlight&WPF&Widnows Phone开发技术。
22308706(一群) 超级群500人
37891947(二群) 超级群500人
100844510(三群) 高级群200人
32679922(四群) 超级群500人
23413513(五群) 高级群200人
32679955(六群) 超级群500人
88585140(八群) 超级群500人
128043302(九群 企业应用开发推荐群) 高级群200人
101364438(十群) 超级群500人