Windows Phone 8初学者开发—第6部分：设置应用程序的样式

Source Code: http://aka.ms/absbeginnerdevwp8 
PDF Version: http://aka.ms/absbeginnerdevwp8pdf

 

咱们已经讨论了XAML基础、布局以及事件，让咱们在本课中讨论一些有趣的议题。咱们将经过设置应用程序的样式赋予应用程序独特的特征。显然咱们要遵循微软的准则以使咱们的应用程序看上去是Windows Phone 8生态系统的一部分，可是咱们还有不少个性化应用程序的自由度。

本课的计划是：

1. 咱们将更改用于手机应用程序列表和开始屏幕的磁贴图标。
2. 咱们将访问用户手机的主题颜色并将它们归入到咱们应用程序的颜色当中，这样咱们将学习一些很是重要的称为绑定表达式的XAML语法功能。
3. 最后咱们将讨论在应用程序中建立可重用的样式。

1.更换应用程序的磁贴图标

本课的第一项任务是更改应用程序的磁贴，用户将在按字母顺序排列的应用程序列表和开始屏幕中(若是用户将磁贴固定到开始屏幕)看到它。首先，咱们将在项目的属性目录中打开WMAppManifest.xml文件：

 

当您在解决方案资源管理器中双击该文件时，它将在一个特别的设计器窗口中被打开，该窗口提供许多应用程序被介绍给Windows Phone 8操做系统的选项。例如在第一个选项卡“应用程序界面(Application UI)”中，咱们能够更改显示名称，应用程序图标以及更多内容：

咱们须要将默认的图标更改成更适合咱们应用程序的图标。我已经建立好这个图标，而且它位于C9Phone8\PetSounds_Assets文件夹中。本系列的素材能够从下载本文档或本视频处一并得到。

ApplicationIcon.png就位于上述文件夹中：

我将从Windows资源管理器拖动该文件并将它释放到项目中的Assets文件夹中。当执行该操做时，我将会看到一个对话框，它通知我已经存在一个同名文件：

咱们用新图像文件替换掉老的文件。

接着，咱们须要替换Assets\Tiles子文件夹中的两个图像。我将在解决方案资源管理器中展开Tiles子文件夹觉得目标作好准备。

 在Windows资源管理器中，我将打开C9Phone8\PetSounds_Assets\Tiles子文件夹：

我将高亮显示这两个图像文件并将它们拖放到解决方案资源管理器中的Tiles目标文件夹。您将会再次看到以下对话框：

1. 我选择应用到全部项(Apply to all items)
2. 并选择“是”

如今我已经在项目中更换了必要的文件。让咱们回到WMAppManifest.xml文件，由于我已经用新文件替换掉了旧文件，我须要关闭WMAppManifest.xml并再次打开它以查看新的应用程序图标：

在设置页面更下面一点，我须要确认如下设置被选择：

1. 将图块模板设置为TemplateIconic
2. 选中支持大图块
3. 小图块图像须要被设置
4. 中等图块图像须要被设置

我将按F5运行应用程序以测试这些设置。应用程序一旦运行，在手机模拟器中单击启动按钮(Windows图标)，而后从右向左轻扫(单击并按住鼠标按钮的同时拖动鼠标光标)以看到按字母顺序排列的应用程序列表并定位到咱们的PetSounds应用程序：

很是好！如今让咱们单击并按住该应用程序图标直到出现一个显示“固定到开始屏幕”和“卸载”选项的上下文菜单：

单击“固定到开始屏幕”将把该应用程序添加到开始屏幕。单击手机模拟器上的启动按钮并向下滚动以看到被固定的磁贴：

这是一个小小的细节，可是经过这个小小的更改应用程序感受更像一个合法的应用了。

2. 修改应用程序和页面的标题

接着，咱们将更改应用程序和页面的标题文本。在MainPage.xaml中定位到TitlePanel，它是由页面模板默认添加的StackPanel：

咱们将进行如下的更改：

1. 将表明应用程序标题的text属性更改成"PET SOUNDS"。咱们所有使用大写，由于这是Window Phone应用程序中的约定。
2. 将表明页面标题的text属性更改成"animals"。咱们所有使用小写字符，由于这也是Windows Phone应用程序的约定。

 结果是：

另外一项小小的样式设置步骤，可是再次使得应用程序感受更合法。

3.理解绑定语法和静态资源

默认方式下，第二个textbox的Style属性被设置为：

Style="{StaticResource PhoneTextTitle1Style}"

 

这须要进行一些解释。首先，每当您在XAML中看到开始和结束大括号时，它被称为“绑定语法”。有两种类型的绑定语法：

{StaticResource } –让咱们从术语“资源”开始。资源是一个对象，这个对象能够在您应用程序的不一样位置被重复使用。资源的例子包括画笔(brushes)和样式(styles)。

http://msdn.microsoft.com/en-us/library/ms750613.aspx

我建立了一个简单的称为XAMLResources的手机项目，我认为它是最简单的{StaticResource}示例了：

1. 我添加了一个<phone:PhoneApplicationPage>子元素以存放本地(更准确地说是页面级)的资源。任何在这里建立的画笔或样式仅在本页面上可用，在其余页面上不可用。
2. 我建立了一个纯色画笔(SolidColorBrush)，我使用键值"MyBrush"引用它。
3. 我建立了一个样式并用键值"MyButtonBackground"引用它。请注意目标类型(TargetType)被设置为Button。这个样式仅能应用于Button控件。在这个样式内部，我能够设置按钮的单个属性。我设置了Background属性，并将它设置为蓝色(”Blue”)的纯色画笔(SolidColorBrush)。
4. 这里我将Button的Background的属性绑定到绑定在MyBrush上的值。
5. 这里我将Button的style绑定到MyButtonBackground。

在这个过于简单的例子中，使用这种方式进行赋值的好处并不会很明显。当您的应用程序变得很大而且您但愿在页面上的控件之间保持一致的外观，您将会发现这种方式很是方便。它使得XAML简洁而紧凑。而且若是由于任何缘由您须要更改样式或颜色，您能够更改一次并让更改传播到它们被应用的任何位置。

这是运行的结果：

我在页面建立这些资源意味着他们的使用范围仅限于MainPage.xaml。若是我须要在整个应用中共享这些资源呢？在这种状况下我会在App.xaml中的<Application.Resources>部分将它们定义为系统资源：

4.探索主题资源(Theme Resources)

回到PetSounds项目，您可能想知道PhoneTextTitle1Style在哪里定义的。实际上它是一个做为Windows Phone操做系统主题资源一部分的“内置的样式”：

http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff769552(v=vs.105).aspx

若是向下滚动页面，您能够看到Windows Phone应用程序中可用的文本样式：

应该利用这些主题资源以使您的应用程序符合Windows Phone的风格。除非有合适的理由(如匹配您公司创建的品牌推广元素)，不然不要匆忙地使用自定义的颜色、字体等内容。

值得注意的是许多这样的样式基于样式，而样式一样也能够基于其余的样式。这种可视化的继承容许开发者避免重复属性的设置，它很是像web开发中级联样式表的工做方式。

我以前说过在Windows Phone中有两种类型的绑定表达式，第二种是{Binding }，它被用于将数据(一般是自定义类型的泛型列表，并将它们的属性设置为应用程序中咱们须要处理的数据)绑定到页面元素。咱们将在本系列之后的课程中看到这种类型的绑定。

5.经过建立基于主题资源的样式来自定义主题资源

让咱们找点乐子。我以前说过您一般须要采用手机的主题资源。可是若是须要，咱们能够编辑样式。我认为这样作能够提供有关一切是如何运做的额外的洞察力。

请确认您的光标位于Text属性为”animals”的TextBlock中。

在属性窗口中导航到杂项部分并定位到Style属性：

注意文本框周围有一个绿色的边框，而且右侧的图标被用相同的绿色填充。若是您单击那个方框或文本框，您将看到一个上下文菜单：

咱们能够在这里更改绑定。事实上我会单击“转换为本地值”。当我这样作后，请注意Style属性消失了。它变为一个复杂属性<TextBlock.Style>，而且其中包含一个<Style>定义：

正如您所看到的，当咱们从主题样式转换为本地样式，咱们看到了主题样式定义的一部份内容，它基于PhoneTextBlockBase主题样式，而且经过设置两个附加的属性：FontFamily 和FontSize对原样式进行了重写。它们两个也被定义为主题样式。让咱们重写这些设置。

1. 将FontFamily设置为"Verdana"
2. 将FontSize设置为64

 这将产生如下结果：

接着让咱们将样式设置为系统资源以使它在整个应用程序中可用。我将高亮显示并剪切<TextBlock.Style> 和</TextBlock.Style>标记之间全部内容：

而后我将打开App.xaml文件：

并将它们粘贴到<Application.Resources>部分(见下面12至19行)。我还添加了一个属性：

x:Name="MyTitleText":

如今我返回MainPage.xaml并用新的应用程序资源重写TextBlock。

 而且结果应该没有改变：

成功了!

回顾

综上所述，本课的重点是如何设置应用程序的样式并使它看上去更像Windows Phone上的应用程序，同时可以表达咱们的个性。咱们学会了如何修改WMAppManifest.xml文件以更改应用程序的图标和磁贴，咱们更改了应用程序的标题和页面的标题，并学会了如何在Windows Phone中绑定到像主题资源(Themed Resources)这样的静态资源(StaticResources)，以及如何建立基于主题资源的本地和系统资源等内容。