第5章 为手机而设计

5．为手机而设计

　至此,你已经了解了手机，通过一个简单的应用程序的演练了工作方式并且学习XAML的基础知识。现在你应该开始考虑你要编写的应用程序的性质。虽然很容易想到的是手机只是Silverlight存在于另一个屏幕上而已，但是事实没有这么简单。在这一章中，我们将讨论为Windows Phone设计的本质，来帮助你做出这些艰难的决定。

第三块屏幕

         微软已经推出了一个想法，所谓的“三块屏幕和一个云”，自从最早宣布Windows Phone开始（也可能是之前）。这个想法本质上是应用程序或服务应该支持三个基本的用户体验:电脑、电视和手机。这种三个屏幕的想法都是由一个共同的基础设施进化而来（例如平板电脑不被认为是手机或电脑？），而且它还代表了一个强大的故事让你决定，你的手机应用程序应该允许用户做什么。

         你的手机体验设计工作涉及的不仅仅是调整你的Web/桌面体验适应到小屏幕上；它还涉及到制定用户将要在设备上做什么。例如，让我们假定你为一家银行工作。手机的体验应该包括如下载银行对账单这种事情吗？大概不会。但是，用户希望能够查询余额，也许看到几天的交易价值。你的Web应用程序的故事很可能是功能驱动的，然而手机版本应该挑选合适的体验针对外形和使用场景。

         但经你考虑的体验不应该只是网站体验的子集；他们可能会非常不同。考虑Foursquare网站（http://foursquare.com），如图5.1。      

                       

图5.1 Foursquare.com

         网站的用户体验是更倾向于看到一个用户的状态；看到头衔，历史和徽章是一种在网站上常见的任务。作为一个用户，我可能也会感兴趣的一些额外的数据以较大的形式呈现给我。事实上,有相当在这儿的很多功能我可能会感兴趣。但在一个更小的设备这又有多少是让人感兴趣的哪？用户的注意力在一个更小的设备上会受到阻碍，所以决定用户会做什么（和用户预计将在你的应用程序上停留多久）对于你提供的第三屏是否成功成为至关重要的了。让我们使用这个网站，并且看看手机屏幕会如何帮助我们选择一些功能（如图5.2）。

 

         这种方法的问题在于，它不太可能,挑选一个手机大小的部分的应用程序将会有很大的意义。你的下一个想法可能是尝试将全部功能放到一个全景的应用程序中（如图5.3）。

 

图5.3全景应用程式

         虽然Windows Phone会允许这样做，但对你来说，审视你的第三个屏幕用于做什么，这一点很重要。你希望用户使用应用多久哪？即使用户想要的所有功能，一个大的可滚动的应用程序是正确的想法吗？当我浏览Foursquare，我最感兴趣的是签到（在网站上罕见的任务），并且看到我的朋友们在什么地方签到；其余的功能是纯粹的“锦上添花”。其实，Foursquare的开源Windows Phone应用程序（http://4square.codeplex.com/），决定在这个范例中避免被卷入到这些错误的用户体验中（如图5.4所示）。

 

图5.4一个Foursquare的示例在Windows Phone上

         为你的用户确定正确的体验是你的第一个挑战。一旦你有一个感觉，你要完成什么，下一个挑战就是创建一个应用程序，她在设备上运行良好。

它是一台手机，是吗？

         制定正确的策略来决定你的应用程序只是成功的一半。另外一半是了解你是如何与手机进行工作。为什么这成为了你为手机编写程序的问题哪？它成为问题是因为硬件，性能特点，和可用性完全不同的桌面或网站。例如，Windows Phone应用程序认证要求对于Windows Phone OS 7.1有内存消耗方面的限制（http://shawnw.me/n0gbMh）。

内存消耗

         应用程序必须不能超过90 MB的内存使用率。然而,在已经超过256 MB的内存的设备上，一个应用程序就可以超过90   MB的内存使用率。DeviceExtendedProperties类可以被用来查询设备上的内存数量和在运行时修改应用程序的行为利用额外的内存。有关更多信息,请参见DeviceExtendedProperties在MSDN上。

         因此，你将需要设计你的应用程序，让它能在诸多区域的限制情况下工作良好：

l  有效的屏幕大小

l  有限的CPU速度

l  有限的电池量

l  有限的内存

l  完全不同的输入机制（触摸VS鼠标）

         如果你是一个经验丰富的移动开发人员，对你来说这些没有什么是新的。但是如果你是一名开发人员来自于Web或桌面的世，,你不得不完全的改变你的思想来使你的应用适合手机。你需要有一个整洁的开始并用一种全新的方式考虑资源。

         此外,在手机用户运行应用程序因为不同的原因并且期望非常不同的体验。通常一个应用程序（不一定是游戏）是经常运行的，但却是使用很短的时间。而且用户的体验常常是触摸驱动的而不是键盘和鼠标驱动的。设计一个应用程序来满足这一组不同的需求，意味着你真的需要去挖掘一下，你期待应用程序将被如何使用。

一个应用范例的决定

         Windows Phone风格（即Metro）提出了一些具体的建议，关于看起来像手机上其它的应用的几个风格。当你设计你的应用程序时，你将必须看看这些风格并确定如果其中任何一个意义与应用程序。或者，你可以从头开始，为你的应用程序创建一个新的工作流程，不考虑Metro风格。虽然这些应用程序风格是典型的，但是它并不要求你的应用程序遵循任何这些可用性范例。在事实上，一些内置应用程序已经做到了这一点（例如音乐和视频）。

         比你的应用程序拥有一个范例更典型的是来确定在你的应用程序中正确的组合使用这些UI隐喻。所有Windows Phone应用程序使用一个导航模式，在这里你可以有多个页面，支持手机的后退按钮。这个模式应该与用户的期望匹配，因为它借用了Web的模式。一个简单的应用程序可能是由多个不同的页面组成，可以被来回导航。例如，图5.5显示了一个简单的血糖监测应用程序混合了不同的范例。

 

图5.5简单应用程序导航

         当你查看你应用程序的设计时，你需要考虑不同的方法来创建单独的页面使用不同风格的控制，但是你永远不应该远离Window Phone处理页面导航的设计。当然，你可以构建你的应用程序只有一个单独的页面，但这可能会是一个非常简单的应用程序，如图5.6Moon Phaser应用程序。

         让我们看看一些页面的设计风格。

 

图5.6单页面Windows Phone应用程序

Panorama

全景页面的基本组成是在无尽画布上的几个窗格。例如，让我们看一个简单的应用程序，包含应用程序的两个不同部分，如图5.7所示。

 

图5.7简单的全景应用程序

         这个页面包含有两种功能(“第一项”和“第二项”)。全景图将显示第一个窗格并暗示第二窗格。因此，这个应用程序在模拟器将类似于图5.8。

         在模拟器中你可以看到，第一个窗格中显示出来，但它也提示还有更多的内容可以被看到。如果用户滑动到左边（为了移动到右侧），第二块功能出现。用户在第二个窗格中，第一个面板显示再次作为一个预览在右边。这是全景的魔力，它意味着在一个无尽的画布给应用程序的各个部分。这避免了典型的问题，你的应用程序由多个部分组成（或窗格），而且不得不开发一种方法来导航到他们。背景图像也窗格延伸，随着窗格滑动（虽然以不同的速度，给人一种控制上的视觉差）。虽然这个例子展示了两个窗格，但是一个常见的全景有更多的窗格。一般的经验法则是对于一个全景视图你应该使用不超过5个窗格。

 

图5.8在模拟器中的全景视图

         许多内置的应用程序使用全景风格，启用不同部分的功能（例如，人脉、图片、音乐和视频）。它可能是诱人的，试图让你的应用程序使用一个全景，因为手机的其他部分使用这种风格，但是你应该只有当你真正做的应用程序具有多个独立的功能时，才选择这个类型。全景的每个窗格并不意味着一个主从式的页面。每个单独的窗格是独立的功能模块，类似Foursquare的示例如图5.3所示。全景的应用程序也会需要更多的手机电量，因为所有窗格在应用程序的生命周期中都是活动的。

Pivot

         Zune（软件和设备）最初的设计，枢轴风格页面是一个关键风格，在你将会在Windows Phone 上看到。它被用在音乐选择器中（在音乐和视频部分），是一种常见的认知方式，以不同的“视图”显示相同的信息 （即按艺术家，按专辑，等等)。

         Pivot与panorama类似，但更多的是直接使用枢轴。Pivot也是基于是一个无限画布的想法，但与全景不同的是，pivot是由不同的标签组成并不要求下一个窗格显示为一个预览。用户既可以滑动或点击标题（下一个标题是提供预览的）来移动到那个窗格。图5.9显示了一个典型的pivot应用程序。

         使用pivot，每个窗格占据了一整个页面。pivot工作在很多的地方，这些地方对于一个全景而言会太大而且笨重。全景和枢轴之间的最大的区别是,枢轴可以处理更多的窗格。如前所述，一个全景应用程序应该不超过5个窗格。你可以在一个pivot中使用超过五个的窗格，但是你也不能无限制的使用；此外，你应该有一个很好的使用场景来使用大量的pivot面板。

         当你有相同的或者类似的数据需要以不同视图显示时，pivot风格的应用程序是一个不错的选择。例如，在血压监控应用中，那里有一个pivot每个页面以不同的方式显示来自于第一个页面的数据（不同的图表或只是罗列了一堆数据），如图5.10所示。

 

图5.9Pivot例子

         虽然基本的隐喻是在pivot上如何以不同的方式显示相同的信息，但是最终控制权在你手中而且每个页米面可能有不同的功能。重要的是不要让你的用户感到惊讶。

 

图5.10 Pivot页面

Panorama   还是 Pivot？

         从原则上你可能会想到Pivot和Panorama控件在功能上会很相似（例如，它们都显示信息窗格）。通常他们使用却是非常不同的。Panorama控件通常用于少量的窗格，鼓励一种“发现”类型的体验，因为其他预览窗格意味着用户会更自然的发现剩下的功能。但是这个模式在四个或五个窗格后就会被打破。Panorama控件也会随着没有控制的显示窗格变得越来越重。

         Pivot控件,另一方面，通常是以不同的方式为你显示相同的或者类似的数据。例如，一个常见的Pivot控件使用是在音乐库中，在那你可以查看音乐按艺术家、类型等等。相同的信息在不同的窗格，但以不同的方式组织。

 

常见错误

         你应该永远不要将Pivot和Panorama控件用于主从复合接口（例如，一个窗口用于选择，而其他窗格用于显示选择项的明细）。

简单页面

         有时，不同的页面风格只是障碍。这就是典型的页面模式的由来。尽管微软鼓励一些使用Metro风格的设计范例，但它并没有要求你选择其中之一。无论你正在构建一个新闻应用程序，还是一个休闲游戏，甚至是一个自定义的视频播放器，你可以按你所希望的方式构建它。Metro设计语言应该成为你的向导而不应该阻止你创建用户会喜欢的应用程序。

Microsoft Expression Blend

         Windows Phone SDK 7.1包括一个免费版本的微软的Expression Blend工具用于创建你的Windows Phone应用程序。你应该熟悉这个工具，因为它是一个重要的方式来设计你的　　应用程序。Blend已经存在了一段时间，对于使用Silverlight的应用程序，所以在Windows Phone出现之前它有时间来成熟。对于那些为Windows Phone开发应用程序的人来说，包含的Blend是免费的（不同于那些典型的Silverlight开发）。

创建一个工程

         当在Blend中开始一个新的应用程序时，你会看到一个对话框，其中包含了几个不同的项目类型，如图5.11所示。

 

图5.11 Blend新项目对话框

         针对不同的启动项目类型，Blend有独立的项目类型，这些项目中的前四个项目类型是用来创建新的Windows Phone应用程序，而最后一个是一个类库项目来保存其他应用程序使用的控件。表5.1显示了不同的应用程序项目。

项目类型	描述
Windows Phone Application	为Windows Phone创建一个简单的基于页面的应用程序
Windows Phone Databound Application	为Windows Phone创建一个基于列表的应用程序包含预置示例数据的用户界面
Windows Phone Panorama Application	为Windows Phone创建一个基于Panorama控件的应用程序
Windows Phone Pivot Application	为Windows Phone创建一个基于Pivot控件的应用程序
Windows Phone Control Library	创建一个库保存可重用控件，控件将用于Windows Phone应用程序中

环游Blend

         创建一个新的应用程序将生成一个新的项目包含基本的用户界面，在此之上你可以开始你的设计。通常，这是使用Blend进行设计的起点。首先，我们来看看标准的Blend用户界面布局，来熟悉不同的元素。这个用户起始界面包含一些元素，如图5.12所示。

 

图5.12Blend用户界面

　     Blend的基本界面是由五个主要区域（标记为# 1到# 5在图5.12中）：

1. Toolbar: 常用的工具存在于这里
2. Common panels: 这里包括项目、资产及其他面板。
3. Objects and Timeline panel：这是基本的布局/导航面板。
4. Artboard: 这就是Blend的基本设计界面。
5. Item panels: 这些包括属性、资源和数据面板。

         当你开始使用Blend你需要相当熟悉每个部分是如何能帮助你的。第一个区域需要熟悉的是工具栏。工具栏包含了许多基本的工具将用于创建你的设计。你可以看到该工具栏（及其子菜单）如图5.13所示。

 

图5.14Blend工具栏

         基本的工具栏可分为5个部分。一些单独的工具栏按钮支持按下来，显示一列其他工具栏按钮（如图所示的项中标记的A-F的图）。你可以看出这一个工具栏按钮支持多个选项通过按钮右下方的小矩形。工具栏的不同部分如下：

1. Selection tools: 选择和方向的选择
2. View tools：手动和缩放
3. Brush tools：滴管、颜料桶,渐变工具，和笔刷变换（查看A）
4. Object tools：各种各样的工具来创建不同的对象在设计图面中（如图B-F）
5. Asset tools：资产按钮和上次使用资产按钮

         Blend UI的常用面板部分包含几个经常使用的面板。你最感兴趣的两个是项目面板和资产面板。其他三个面板有特定的用途，我们将在本章后面讨论。

         项目面板提供了一个在Blend中所有项目和文件的列表。如果你是一个设计师，刚开始使用Blend，你要适应的最大一个改变是，你正在与一个项目和多个文件一起工作，而不仅仅只是一个单一的设计文件。项目面板（如图5.14）显示了当前项目的所有的文件。

 

图5.14项目面板

         项目面板包含了解决方案文件，解决方案其中包含一个或多个项目。在这个例子中只有一个项目，但你可以有额外的项目列表，例如类库项目来共享设计或代码。在这个面板中你还可以添加其他资源（如字体、图像等）到项目中。项目中的每个内容都能合并到手机应用程序的结果中。

         另一个重要的面板是资源面板。而工具栏按钮使你访问最常见的设计元素（绘制形状、容器和控件)，资产面板包含了可以添加到Windows Phone应用程序中的所有设计元素。资产面板由三个部分组成，如图5.15所示。

         正如你将看到Blend的其他部分，这个面板开始是一个搜索栏（在图5.15# 1)。因为资产面板可以包含相当多的控件和其他资产，寻找资产通常是最快捷的方法来找到你正在寻找的资产。左边的类别(# 2)分离不同类型的资产通过不同的类别。注意小三角形这表明,一些资产类别有子类别。通过选择一个类别,你就会显示合适类别（或子类别）的所有控件。正如你在图5.15中所看到的，类别是资产类型的混合（例如:媒体，控件和形状）以及位置（例如,位置和项目）。这意味着一个资产可能存在于不止一个类别。当一个类别被选中时，资产清单(# 3)显示了控件在那个特定的类别或子类别。

         下一部分的用户界面是来查看对象和时间轴的面板。这个面板允许你在你设计过程中检查对象的层级结构以及有利于动画设计过程。处理你的对象层次结构是这个面板的主要作用；我们将在本章后面讨论动画特性。用于管理对象层次结构，对象和时间轴面板有几个关键部分,如图5.16所示。

 

图5.15资产面板

 

图5.16对象和时间轴面板

         对象层次结构（如图5.16 #1所示）显示了你设计中的所有对象。在这个示例中，你可以看到该Page，ApplicationBar和Grid（称为LayoutRoot),其中包含几个其他对象。这个对象层次结构与XAML中的层次结构是一样的。在左手边的每个对象的符号说明对象类型（它们匹配　　工具栏和资产面板上的图标）。对于名称的成员，名称被显示在层次结构中；如果一个对象没有命名，它将是由括号包围对象类型 （就像见到的PhoneApplicationPage）。

         当添加新的元素到你的设计中，它有助于知道当前的容器（它会告诉你新的元素会被添加到那里）。你可以在对象和时间轴中直接看到当前的容器，因为容器将被蓝色矩形包围着（在图5.16 #2）。

         对于对象层次中每个元素,这个面板允许你来决定是否隐藏或锁定对象。右上方的区域（在图5.16 #3）定义了一列用于隐藏和锁定一个对象（或者一个容器和它的子对象）。点击对象的层次结构右边的图标，将会改变他们是否显示或锁在设计表面上。这些变化是纯粹的设计时的，不会影响运行时对象的外观和感觉。

         随着你在设计时从不同对象间移动，名字和图标（#4）为你提供了返回到上次编辑空间的能力。让我们谈论使用Blend进行样式设计时，我将为你演示如何使用这些控件。

         最后，在屏幕的左下方的图标（＃5），使你能够翻转对象的层次结构顺序。此按钮仅影响如何显示层次结构中的对象和时间轴面板。虽然XAML被编写成自上而下（如HTML）对象层次结构将顺序的显示。如果你点击图标，它会翻转这个顺序。这种相反的顺序对于一些人更容易，他们人习惯于使用Photoshop或其他设计工具，在那里绘图顺序看起来是自下而上的。

         移动到artboard，如图5.17，artboard的主要元素(# 1)非常像任何其他设计工具（甚至微软Paint），它允许你直接访问和操纵对象。它使用与大多数其他设计工具相同的方式处理隐喻（例如，小方块边和角允许你获取并调整artboard上的任何东西)。只有被选中的对象(s)在artboard将展现它的柄。

 

图5.17Artboard

         在artboard的顶部(# 2)是文档的标签。你每打开一个文档(例如,XAML文件)一个选项卡就会创建。点击单独的选项卡允许你切换到该文档。视图按钮(# 3)允许你从design视图切换到XAML文本视图，或者分隔视图显示设计和XAML两种视图。

         就在这个文档标记下方是一个选中的项目在设计图面的指示器。这可能是对象的一个下拉框（# 4），对象据有上下文菜单项(例如,控件)或者它可能是一种平面箱使用选择的控件类型。这个地区还将展示一个不同的子对象设计界面的导航（例如，当编辑风格或模板）以减少导航回到最初设计界面。

         最后，artboard有一个缩放下拉框（# 5）允许你更改缩放级别,和大量的设计选择按钮,可以开启或关闭显示注释,显示网格线，和启用呈现的效果。

         Blend用户界面的最后一部分是Item Tool部分。这一节是由若干重要的面板组成，如图　　5.18。

 

图5.18 Item Tools 面板

         这部分提供了几个不同面板的选项卡（通常）包括属性、资源和数据（#1）。当你在设计你的Windows Phone应用程序时，你将主要使用的面板是属性面板。属性面板的主要部分(# 2)是属性列表。如果你是来自Visual Studio，属性面板的组织和外观是相当不同的。属性被分类到逻辑分组-例如，笔刷（#3），外观等等。这些分组是折叠着的部分，这将帮助你找到相关的属性。接近大部分分组的最后色是一个更多的折叠部分（#4）包含不常用的属性。你可以点击这个箭头图标，打开更多的属性。

         属性面板顶部附近的是一个名字指示器和类型控制（#5）。如果你想要/需要命名一个元素，你可以简单地在这里输入它。名称/类型部分下方是搜索栏(# 6)，它允许你搜索属性的名称。这对于查找属性名称是非常有用的，因为大部分控件都有很多的属性。这个搜索是一个子字符串直接匹配，所以，例如输入“vis”在搜索栏将返回“Visibility”和“IsHitTestVisible”两个结果，如图5.19所示。

 

图5.19在属性面板进行搜索

         最后，属性面板也有一个开关（# 7）在显示属性和事件直接切换。既然你已经对Blend用户界面进行了基本浏览，让我们来看看一些常见任务，使用Blend进行你设计的。

Blend基础

         就像任何活动，学习Blend是一个执行任务并重复执行的问题。你做的约多，Blend的肌肉记忆会接管的更多，并允许你创造优秀的应用程序。

布局

         你要完成的最基本的布局任务是简单拖拽元素到屏幕上。创建一个新的应用程序项目，如果你拖一个控件（如按钮）到页面上，你将注意到该控件的尺寸会随着你的拖拽而显示，如图5.20所示。

 

图5.20 拖拽一个新控件

         一旦你松开鼠标，你会注意到控件会包括八个手柄来调整控件。在这些手柄外你将看到从控件向外辐射的线条，小号的数字在他们附近。Silverlight（和Blend）处理布局的方法通常是将你对象的大小转换为从容器一侧到控件间距（在这种情况下是一个网格）。所以在图5.21中，你可以看到一个“25“在顶部附近和新按钮的两侧。这表明顶部，右侧和左侧的间距大小是25。每一个数字附近是一个小的封闭链图标，表示对象与容器的这些边缘进行了绑定。按钮底部有一根虚线，这出现了一个开链的图标，表明这个按钮并不依赖于底部。因为它不依赖与容器的底部，所以间距也不出现（因为这种情况下间距不起作用在）。使用这个锁定到边缘的比喻可以让你推断对齐方式（顶部垂直对齐和拉伸水平对齐）。你可以在属性面板上看到实际的对齐和间距，它会匹配这个信息。你可以直接在artboard或通过使用属性面板更改这些间距和对齐。

         大多数动态容器（Grid, StackPanel, 和 WrapPanel）都以这种简单的方式处理布局。在这个例子中的容器是Grid。Grid是不同之处（并且可能是最常用的容器）在于它允许你来创建行和列。Blend使得创建这些行和列非常的容易。

         在一个新的简单的Windows Phone应用程序中Blend创建三个网格（LayoutRoot，TitlePanel，ContentPanel）。如果你展开LayoutRoot并在对象和时间轴面板中选择ContentGrid，你将看到Blend为Grid显示了一个顶部和左侧的边槽，如图5.22。

 

图5.22 列和行边槽

         这些边槽很重要，因为你可以点击它们创建列和行。单击网格将在创建容器中一个分裂，这将表明两行或列是分开的。例如，如果你点击左边水槽中间那里，你将看到两个行被创建,如图5.23所示。

 

图5.23分隔grid成行

         一旦网格划分为两个行，你应该注意到每一行旁边显示的图标表明行（或列）尺寸的方式。如果你阅读过第三章XAML概述，那里介绍了有三种类型的尺寸方式：自动，固定和星号大小。当你点击这个图标，它将切换通过以上这三个尺寸的类型。表5.2列出了每个尺寸类型图标。

表5.2行/列尺寸图标

图标	尺寸类型
	星号
	固定
	自动

         当你单击行（或者列）指示箭头，行以上（或列到左侧）被选中，属性面板允许你手动更改，如图5.24所示。

 

图5.24修改行/列属性

         当使用多个列和行，你可以伸展对象跨越行和列的边界。Blend会尽力帮助你确定哪些列和行，你想成为它的一部分，但这只是猜测你的意图。例如,你可以看到如图5.25所示,当一个内容刚刚进入第二行，Blend使用负间距处理这种情况。

 

图5.25跨行调整大小

         但如果你拉伸的过多的话，Blend假设你希望跨越两个行，如图5.26所示。

 

图5.26跨行调整大小使用RowSpan

         你会经常需要手动在属性窗口操作行，列，RowSpan，ColumnSpan，对齐，和Margin确保得到你想要的确切行为。在许多情况下，你可能不希望使用间距，而是让你的对象有固定的大小。你可以通过确保你的对象没有设置为伸展对齐（水平和垂直方向）来完成。然后间距框将会显示在哪里绘制你的元素，但却不会设置你的元素大小。

笔刷

         在Blend中另一个常见任务是选择如何“绘制”一个你的设计中特定的元素。如你在第4章，控件中看到的，Silverlight使用笔刷来绘制界面，并且Blend也支持这种方式通过属性面板的笔刷部分，如图5.27所示。

         属性面板的笔刷部分是由许多你将希望熟悉部分组成。第一部分（# 1在图5.27）列出了特定对象支持的笔刷。在这个例子中它是一个简单的矩形对象，因此你可以设置矩形的填充和Stroke两种笔刷。这部分就像一个小的列表框，所以选择一个笔刷将允许你挑选笔刷的属性，在笔刷部分的下方。第二部分(# 2)列出可用笔刷类型。这部分采用的形式是为每种类型的笔刷提供一组标签。表5.3列出了笔刷编辑器。

 

图5.27在属性面板中的笔刷

表5.3笔刷编辑器

笔刷类型	描述	编辑器
None	没有笔刷绘制	没有编辑器显示
Solid color	用于创建纯色笔刷。在右图＃1中有一个标签，让你设计颜色。第二个选项卡是用来重用基于资源的颜色。你可以创建基于资源的颜色通过使用方框上下文菜单在编辑器标签上。在＃2是一个简单的颜色选择器包含白色，黑色，选择的色彩，＃3，在这里你可以手动指定红，绿，蓝，alpha（透明度）。 ＃4的栏让你挑选当前混频器（＃2）使用的色调。   ＃5的控制，允许你指定或复制特定颜色的文本。在这里你可以粘贴网页值匹配的颜色（例如，从CSS）。在过去的三个要素是当前颜色（＃6），使用的最后一种颜色（＃7），吸管挑一种颜色（＃8）。
Gradient	在右图中的＃1，渐变笔刷编辑器支持一个栏，包含所有渐变笔刷的停止点。点击栏将创建一个新的停止点。目前停止点总是绘制成一个黑色的背景。当编辑一个渐变的停止点，纯色编辑器（＃2）用于更改停止点的颜色。颜色编辑器和渐变编辑器之间唯一的区别是，简单的吸管被替换成一个梯度吸管（＃3）来复制现有的渐变。编辑器四周的几个控件，包括线性和梯度笔刷（＃4）之间的开关，反向停止按钮（＃5），停止导航器（＃6），和手动输入一个停止点的偏移量（   ＃7）。
Image	图像笔刷编辑器，允许你指定图像笔刷的源（＃2右图），以及图像如何适应源（例如，伸展）如＃1。还有一个预览功能，图像将如何被拉长（＃3）。
Resource	资源笔刷编辑器列出了命名的笔刷（从你的项目和标准的Windows Phone系统笔刷）。你可以简单地从清单中挑选一个笔刷。

         在笔刷编辑器可以直接创建两种类型的资源：颜色资源和笔刷资源。这些都是创建在不同的方式上的，但都来源于笔刷编辑器。首先，让我们创建一个颜色的资源。我们可以通过点击小方框旁边的颜色选择器，如图5.28所示。

 

图5.28转换一个颜色到一个资源

         选择转换为新的资源，将打开一个对话框，在这里你可以创建一个新的命名资源，将会显示在颜色编辑器资源列表中，如图5.29所示。

         一旦你命名资源，你还需要指定在哪里定义资源。你的选项被标记为“应用程序”，“本文档”，和“资源字典”。通常情况下，你会选择“应用程序”或“资源字典”，如果你已经有了一个。定义一个应用程序级别的资源允许资源用于应用程序的任何页面中。定义这个资源允许你指定它的名字，而且如果它的在稍后的设计流中发生变化，这种变化将影响到所有使用这种颜色的位置。这种颜色的资源也可以用于其他笔刷（例如，梯度笔刷）。一旦你有了一个颜色资源，你可以通过“颜色资源”选项卡来使用它，如图5.30所示。

 

图5.29创建一个颜色资源

 

5.30应用一个颜色资源

         另一中资源类型一个笔刷资源。这不同于定义一个颜色用于笔刷，你可以定义一个完整的笔刷（例如：图片、梯度，或纯色笔刷）。通过这种方式，你可以定义一个命名笔刷，这样如果你稍后改变一个笔刷从一个纯色笔刷到一个梯度笔刷，变化将会级联到所有使用笔刷的位置。你可以创建一个笔刷资源像你创建一种彩色资源一样，但是上下文菜单是在一个不同的位置上。这次你将在笔刷本身而不是颜色上，使用小方框打开上下文菜单，如图5.31所示。

 

图5.31创建一个笔刷资源

         应用刷资源也是相似的。你将打开资源笔刷选项卡并选择你想要使用笔刷资源的位置，如图5.32所示。

         处理笔刷是相当典型的任务。通过使用这些技术，使用Blend会加快你开发Windows Phone应用程序的速度。

 

5.32应用一个笔刷资源

创建动画

         在Blend中，你最常使用的面板是对象和时间轴面板。可能不明显但它为什么会有这么长的名字。名字中的“时间”部分表明，它也是你建立你的动画作为你总体设计的一部分的位置。时间轴是创建动画的基本构建模块。

         作为开始，看一下图5.33。在对象和时间轴面板顶部是一工具条，控制故事板对象的创建过程。故事板是一个容器，可以保存在你的设计中的动画对象。在工具条中的＋按钮允许你创建一个新的故事板来包含动画。

 

图5.33故事版基础内容

         当你单击+按钮来启动一个故事板，会让你命名你的新故事板。这个名字在稍后执行故事板时（即引发动画运行）被使用，如图5.34所示。

 

图5.34创建一个故事板

         一旦你创建了一个故事板，对象和时间轴面板在对象树中每个元素的旁边显示时间轴。图5.35显示了这个新面貌的蜕变过程。

         你可以查看和更改当前的故事板，使用“对象和时间轴”下方的面板，如图5.35。动画窗格右侧显示了新的动画故事板。VCR-like的控件在此窗格的左上角，允许你播放、暂停、或移动到动画中当前标记（时间线目前的定位在0）。你还可以移动当前的标记，只需简单地点击序列化的时间轴顶部（这些都是以秒为单位的）。

 

图5.35包含动画的对象和时间轴面板

         创建你的第一个动画，可以简单地点击时间轴来在动画中改变当前时间到一秒。还要在你的对象树中选择椭圆对象。一旦你这样做了，你可以改变的椭圆的属性，这些改变将以动画的形式反映。你可以在对象和时间轴面板中看到这些，如图5.36所示。

 

图5.36选择动画点

         目前，你会注意到有一个红色的矩形包围着整个artboard，表明你处在动画模式并记录一个动画（而不仅仅是通常的修改对象）。你可以看到这些在图5.37。

 

图5.37在artboard上的动画模式

         当你在动画模式并你修改对象（通过artboard或Properties面板），你的更改将反映在故事板。对于这个示例，改变椭圆的透明度为零。这将导致动画移动一秒钟（这就是我们的标记目前设置的位置）并变得透明。你可以看到动画过程中椭圆的状态（为零秒，半秒，一秒）在图5.38。

         回到对象和时间轴面板可以看到现在的椭圆有一个小红圈（表明它是动画的一部分）。它还在一秒钟标志显示了一个指示器，来显示在动画的那个部分椭圆有一个值。如果你打开椭圆旁边的箭头，你将看到现在有一个子对象，子对象代表发生动画的属性（例如,不透明）。如果不止一个属性受到影响，那里将为每个属性显示一行。这是在如图5.39所示。

 

图5.39在对象与时间轴面板上的动画值

做的改变一个属性的替代，你可能决定改变artboard上的对象的位置或尺寸。当你这样做时，Blend尝试做你想做的事情。为了使它更容易动画，Blend通常包含了渲染转换因此移动或缩放一个元素是基于变换的（而不是移动一个元素的margin和/或size）。如果你移动和调整你的椭圆，你会看到Blend创建一个RenderTransform，然后创建为RenderTransform属性创建值，如图5.40所示。

 

图5.40一个动画中的RenderTransform

         通过添加这些结合在一起，你可以创建复杂的动画，然后使用VCR式的控件来测试它们。一旦你得到你想要的风格，你可以保存并关闭动画，通过单击X按钮，如图5.41所示。

         尽管你可以通过这种方式创建单独的动画，你会发现使用视觉状态管理器（经常叫做VSM）来创建一个控件或对象的各种状态更加常见。了解更多关于VSM的信息请查询Blend说明文档关于状态面板。

使用行为

         尽管我们的大部分的讨论都集中在结构设计，设计的一些部分应该专注于执行操作。这就是行为开始起作用。行为是一个对象可以基于一个事件被激活，事件的设计是来执行一些动作。例如，当一个内容被操作时你可以有一个动画被触发。图5.42显示Blend中包含的不同行为。

 

图5.42在资产面板中的行为

         表5.4解释了不同的内置行为。

表5.4 Blend中的行为

行为	描述
ChangePropertyAction	允许你改变属性值的基于用户输入
ControlStoryboardAction	允许你改变一个动画的状态（通常是启动它）
FluidMoveBehavior	平滑动画更改容器内布局（或流动）
FluidMoveSetTagBehavior	与FluidMoveBehavior相同但只影响对象使用一个特定的标签值
GoToStateAction	控制一个VisualStateManager.VisualStates移动到一个特定的状态
MouseDragElementBehavior	允许对象的移动当一个用户拖拽的时候
NavigateToPageAction	允许导航到不同页面使用导航框架
PlaySoundAction	当一个动作发生时引发一种特定的声音播放
RemoveElementAction	当一个动作发生时从容器中删除一个子项

使用行为，你只是把它们简单的拖到一个对象上在对象和时间轴面板或到artboard面板。例如，如果你拖拽一个ControlStoryboardAction对象到椭圆上，它将在椭圆上创建新的行为，如图5.43所示。

         一旦行为被创建，你将看到在属性面板看到行为属性。上半部分（触发器）是你可以选择的事件，导致这种行为被触发。在这种情况下，当MouseLeftButtonDown事件被触发时我们执行它，这也是用户恰好按下Windows Phone的屏幕。对于大多数行为上半部是相同的。

         对于不同的行为下半边是不同的。在当前情况下我们选择故事板做什么（例如播放，暂停等等）和故事板会影响什么。下拉列表框将为你显示你创建的所以动画（如图5.44所示）。

 

图5.44改变行为属性

         在对象和时间轴面板上你可以有多个行为在对象上。事实上，你可以有多个行为使用相同的触发器。你可以直接在对象树上看到行为，如图5.45所示。

         行为不能取代对典型代码的需求，但是他们却代表一种方法进行UI特定的操作（例如，actions)。例如,你可能有一个飞出式面板当一个按钮被按下时被显示。它没有必要所涉及到代码来显示和隐藏面板，因为这里没有逻辑操作。这是纯UI操作。行为允许你有XAM，,代表一个UI单元。每当你把真正的逻辑（例如，验证或其他行为）放入设计中，你可能犯个一个错误，应该做这种工作在编写代码阶段。

 

 

图5.45 多个行为 

手机特有的设计

         虽然使用Blend设计一个应用程序与你构建一个传统的Silverlight应用程序或一个Windows Phone应用程序应该是类似的，但是有些东西却只适用于手机。这些包括ApplicationBar，Panorama控件，Piovt控件和启动模拟器。

在Blend中的ApplicationBar

         虽然有一个用户界面，迫使用户移动，轻扫，和平移以他们的方式从你的应用程序获取最多是件好事，有时用户需要的是简单的操作。这就是ApplicationBar的用武之地。ApplicationBar是对许多应用程序的标准部件。一个菜单和工具栏的组合，ApplicationBar可容纳图标（如工具栏）和菜单项两者。ApplicationBar以最小化（或关闭）的状态开始，可以由用户打开透露更多的信息，如图5.46所示。

 

图5.46ApplicationBar展开   

 

图5.47添加一个ApplicationBar

         默认情况下，ApplicationBar占用很小一部分的用户界面（标记为# 1在图5.46）。在ApplicationBar上是图标，这些图标能够执行特定的任务。在这种模式下只有图标是可见的；菜单项都没有显示。你可以看到ApplicationBar中的图标(# 2)。右边的图标是一个省略号（# 3），会提醒用户按下这个将打开ApplicationBar（# 4）。在这个打开的视图中，菜单项显示在图标的下方（# 5）。最后，你应该注意到，当打开时，图标有关联的文本（这是不可见的当关闭时，但当应用程序栏打开时会显示，见# 6）。在这个示例中，所有的文本都是小写的。ApplicationBar强制的任何文本菜单项或图标文本都是小写字母（为了遵守Metrostyle规则)。

         你可以添加一个ApplicationBar到XAML文件中使用在PhoneApplicationPage元素的上下文菜单在目标和时间轴面板中，如图5.47所示。

 

 

图5.48添加一个项到ApplicationBar

         添加一个ApplicationBarIconButton将同时创建你可以在栏中看到的图标（无论是关闭或开启）。Blend支持大量内置图标可以选择，或者你可以提供自己的。在对象和时间轴面板中选定BarIconButton，你可以使用下拉框选择一个图标用于应用程序，如图5.49。        

 

图5.49选择一个内置的图标作为ApplicationBar图标

         选择一个内置的图标会添加图标到你的项目中（在一个图标文件夹）。你可以简单地提供你自己的IconUri来指向一个你的选择图标（位于你的项目中）。内置的图标是很用的，但要小心是不要重用一个内置的图标于它非原生的使用场景。这将迷惑用户，如果你使用一个图标，它通常用于其他功能。

         一般情况这些图标应遵循Metro风格和使用单色（例如白色在黑色上或黑白在白色上)以PNG格式。如果你选择白色使用用PNG透明的，Windows Phone将改变你的图标为黑色在白色上当用户切换他的主题到一个光主题。否则，你将需要在运行时手动修改图标。

在Blend中使用Panorama控件

Windows Phone上，你并不局限于屏幕的大小。正如我们在本章前面讨论的全景控制在一个应用程序中允许你使用一个大的虚拟空间。虽然你可以使用直接一个全景控制，一种最常见的场景是以用一个新的全景应用程序开始，如图5.50所示。

 

图5.50新全景应用程序

         一旦你创建了一个新的全景应用程序，你的主页面（MainPage.xaml），将主要包括一个虚拟的区域，包含一个或多个PanoramaItems。我们可以看到这些，如果我们深入分析对象和时间轴面板中的全景，如图5.51所示。

 

图5.51对象和时间轴面板中的PanoramaItems

         全景控制用户界面是由多个部分组成的，在图5.52标记1 – 4。

 

5.52Panorama控件用户界面

         控件本身的大小被设置为包含所有全景项。这意味着控件远远大于屏幕，但展示给用户有更多的内容可用（通过重叠的在页面一侧的其他窗格），正如# 1所指出的那样。标题(# 2)显示当前PanoramaItem的标题。#3显示每个单独的PanoramaItem的内容区。最后，接下来的项（# 4）是在当前项右侧所示的。这个用户体验是为了帮助用户了解你的用户界面　　通过探索其他部分，他们看不到的在手机上的虚拟空间。

         在Blend中，你可以在对象和时间轴中简单的选择来查看每个PanoramaItem作为“当前”项目，如图5.53所示。

 

图5.53PanoramaItem部分

         单独的PanoramaItem被选中，你可以手动编辑内容，像你在任何其他容器(例如,网格,画布等等)。目前的PanoramaItem包含一个标题和内容。标题（通常只是小写字母的文本）显示给用户PanoramaItem包含的内容。内容是控件，这些控件代表PanoramaItem的内容。

         添加新PanoramaItems到你的全景控件中像使用上下文菜单一样简单，如图5.54所示。

 

图5.54添加一个PanoramaItem

         通过添加多个PanoramaItem对象的全景控件，你将为你的应用程序创建一个越来越大的虚拟领域,。如前所述，根据经验只有四或五PanoramaItems在一个全景控件中。

在Blend中使用Pivot控件

         就像你可以与全景控件一样，你可以使用Pivot控件在一个现有的项目或以此为基础的一个崭新的Windows Phone应用程序。当在Blend中创建一个新的项目，你会得到选着来创建一个新的pivot应用程序，如图5.55所示。

 

图5.55创建一个pivot应用程序

         一旦你创建pivot应用程序，你的主要应用程序由一个简单的Pivot控件（就像上面的全景图）。Pivot具有PivotItem对象代表一个容器为Pivot控件中的每个窗格，如图5.56所示。

 

图5.56一个Pivot应用程序

         Pivot控件的用户界面不同于Panorama控件UI，因为它是为屏幕优化过的，并导航到不同的条目是通过swipes完成或通过Pivot控件顶部的条目列表。你可以认为Pivot是一个视图管理这甚至是一个选项卡控件。Pivot控制UI包含多个部分，如图5.57所示。

 

图5.57 Pivot控件用户界面

         标签# 1部分为每个Pivot控件的条目展示了一个标题。每个条目都有一个标题（通常是文本），用户可以点击它使那个视图成为当前视图。当前视图的标题显示在这一节的左边，通常是高亮显示(# 2)。最后，一个单独的Pivot条目的主要内容可以包含任意的适合设计的用户界面 (# 3)。不同于全景，Pivot表明视图有更多信息的唯一标识是列表顶部的标题。

         就像Panorama控件，你可以编辑Pivot控件的每个条目（PivotItems）在Blend中，通过简单的选择适合的PivotItem，这使得那个条目成为当前容器，在这里你可以进行你的设计，如图5.58所示。

 

图5.58编辑一个PivotItem

　    此刻你可以想象每一个PivotItem就是在你的设计中的另一个容器。

预览应用程序

随着你正在设计你的应用程序，你可能想要测试应用程序的外观。你可以通过使用项目菜单　　(项目|运行项目)。Visual Studio为此的快捷键在这里也是匹配的（F5或Ctrl-F5）来启动你的项目。帮助在各种场景中预览你的应用程序，在Blend中有一个设备面板，允许你来指定如何运行你的应用程序。图5.59显示了这个面板。

 

图5.59更改设备属性

         该设备面板只包含三种类型的选项。你可以选择在应用程序启动时的方向(# 1)，你可以显示应用程序的主题(# 2)，或者你可以选择主题和接受的颜色。这个主题可以是黑暗或光明，而颜色选择是在设备/模拟器上设置强调色。最后,你可以指定是否要预览你的应用程序　　通过模拟器(缺省)或在一个设备上(# 3)。为了在设备上进行测试，你得通过几个步骤，包括通过微软注册手机作为开发设备。这些步骤已经在第2章，编写你的第一个手机应用程序中介绍过了。

我们在哪儿？

         设计是任何软件项目的一个重要组成部分, 但是当你为Windows Phone编写时，你应该把设计的用户体验作为这个过程的关键部分。选择正确的用户范例是非常重要的，因为用户无法降至一组更丰富的输入机制（例如，键盘，鼠标）。触摸改变了应用程序的工作方式。此外,应用程序应该鼓励用户的好奇心，激发用户希望了解你的应用程序的能力是一个重要的动态能力。最后，任何设计如果从一开始没有弄清楚是用于什么以及如何使用它注定是要失败的。当谈到实现你的愿景，Expression Blend是一个很好的工具。重要的是意识到，即使你是一个开发人员，Blend是一个设计工具，但不是一个设计师的工具。学习如何使用它可以真正帮助你，不仅是设计优秀的应用，而且以更短的完成这项任务。尖括号很酷，但创建一个复杂的设计使用一个真正的工具（如Blend）让你专注于你喜欢的应用程序创作过程的不同部分；无论这是用户界面，业务逻辑，或后端。

         尽管这一章的仅仅接触到真正设计的表面，希望它给了你一个感觉，什么是你需要的，使你的愿景在手机上实现。你可能想要使用其他设计资源增加到这本书中，以提升你的应用程序真正的体验。