东莞网站建设制作免费咨,中山网站建设文化策划书,seo网络推广培训,免费发布信息网5#xff0e;为手机而设计 至此,你已经了解了手机#xff0c;通过一个简单的应用程序的演练了工作方式并且学习XAML的基础知识。现在你应该开始考虑你要编写的应用程序的性质。虽然很容易想到的是手机只是Silverlight存在于另一个屏幕上而已#xff0c;但是事实没有这么简单…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中 Toolbar: 常用的工具存在于这里Common panels: 这里包括项目、资产及其他面板。Objects and Timeline panel这是基本的布局/导航面板。Artboard: 这就是Blend的基本设计界面。Item panels: 这些包括属性、资源和数据面板。 当你开始使用Blend你需要相当熟悉每个部分是如何能帮助你的。第一个区域需要熟悉的是工具栏。工具栏包含了许多基本的工具将用于创建你的设计。你可以看到该工具栏及其子菜单如图5.13所示。 图5.14Blend工具栏 基本的工具栏可分为5个部分。一些单独的工具栏按钮支持按下来显示一列其他工具栏按钮如图所示的项中标记的A-F的图。你可以看出这一个工具栏按钮支持多个选项通过按钮右下方的小矩形。工具栏的不同部分如下 Selection tools: 选择和方向的选择View tools手动和缩放Brush tools滴管、颜料桶,渐变工具和笔刷变换查看AObject tools各种各样的工具来创建不同的对象在设计图面中如图B-FAsset 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所示显示了你设计中的所有对象。在这个示例中你可以看到该PageApplicationBar和Grid称为LayoutRoot),其中包含几个其他对象。这个对象层次结构与XAML中的层次结构是一样的。在左手边的每个对象的符号说明对象类型它们匹配 工具栏和资产面板上的图标。对于名称的成员名称被显示在层次结构中如果一个对象没有命名它将是由括号包围对象类型 就像见到的PhoneApplicationPage。 当添加新的元素到你的设计中它有助于知道当前的容器它会告诉你新的元素会被添加到那里。你可以在对象和时间轴中直接看到当前的容器因为容器将被蓝色矩形包围着在图5.16 #2。 对于对象层次中每个元素,这个面板允许你来决定是否隐藏或锁定对象。右上方的区域在图5.16 #3定义了一列用于隐藏和锁定一个对象或者一个容器和它的子对象。点击对象的层次结构右边的图标将会改变他们是否显示或锁在设计表面上。这些变化是纯粹的设计时的不会影响运行时对象的外观和感觉。 随着你在设计时从不同对象间移动名字和图标#4为你提供了返回到上次编辑空间的能力。让我们谈论使用Blend进行样式设计时我将为你演示如何使用这些控件。 最后在屏幕的左下方的图标5使你能够翻转对象的层次结构顺序。此按钮仅影响如何显示层次结构中的对象和时间轴面板。虽然XAML被编写成自上而下如HTML对象层次结构将顺序的显示。如果你点击图标它会翻转这个顺序。这种相反的顺序对于一些人更容易他们人习惯于使用Photoshop或其他设计工具在那里绘图顺序看起来是自下而上的。 移动到artboard如图5.17artboard的主要元素(# 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创建三个网格LayoutRootTitlePanelContentPanel。如果你展开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 你会经常需要手动在属性窗口操作行列RowSpanColumnSpan对齐和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应用程序应该是类似的但是有些东西却只适用于手机。这些包括ApplicationBarPanorama控件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让你专注于你喜欢的应用程序创作过程的不同部分无论这是用户界面业务逻辑或后端。 尽管这一章的仅仅接触到真正设计的表面希望它给了你一个感觉什么是你需要的使你的愿景在手机上实现。你可能想要使用其他设计资源增加到这本书中以提升你的应用程序真正的体验。转载于:https://www.cnblogs.com/newetms/archive/2012/08/16/2643204.html
