入门篇，关于创建基本的windowsphone 程序及如何用expression blend美化界面

 

                             

 

Hands-On Lab

你好Windows Phone

 

 

实验版本号:  1.1.0

最后更新:       1/30/2012

 

 

目录

概述... 3

练习1:利用MicrosoftVisual Studio 2010 Express为Windows Phone创建Windows Phone应用程序    6

任务 1 –在Visual Studio中创建一个Windows Phone应用程序工程... 6

任务 2 –在Windows Phone Emulator中构建并测试应用程序... 14

任务 3 – 设计用户界面... 19

任务 4 –在用户界面处理事件程序... 25

任务 5 – 验证... 27

练习 2: 使用 Expression Blend 来设计您的Windows Phone 应用程序的UX. 33

任务 1 –在Expression Blend创建一个自定义按钮... 33

任务 2 –为定制控件增加视觉状态效果... 45

任务 3 –创建横幅文本的动画... 49

任务4 – 验证... 59

总结... 60

 

概述

 

这个实验的目的是完成一个经典的“Hello World”应用程序，为您介绍创建和测试一个针对WindowsPhone应用程序的Silverlight所需要的工具和过程。Windows Phone 应用程序平台支持:

·        非常棒的应用程序和游戏。使用Silverlight and XNA 架构为Windows Phone7 打造互动的，引人注目的，高品质的应用程序和游戏。

·        快速，高品质以及功能丰富的应用. Visual Studio 2010和Expression Blend与硬件规格标准化的Windows Phone7相结合，将会在每一台移动设备上使 您美梦成真。

·        更大的机会，更好的伙伴关系.利用您现在的技能和Windows Phone7所提供的工具建立更多应用程序 和游戏，并送达到您的客户而不用考虑他正在使用何种设备。Windows Phone Marketplace 负责销售和分销，您并不用参与进来。仅需编码和赚钱！

 

在这个实验过程中，您将会看到如何利用针对Windows Phone的 Microsoft Visual Studio2010 Express 和Expression Blend 来创建和设计你的Windows phone应用程序。Visual Studio提供了一个面向应用程序开发人员的开发环境，（而Expression Blend 更适合为用户提供体验（UX）的设计师。）这些工具相互补充，推动了设计师/程序开发人员之间更广泛的协作。

这个实验演示了一个典型的开发方案，初始的时候利用Visual Studio来创建Windows  phone应用程序的逻辑，页面的布局和控件，然后利用Expression Blend来设计用户的体验。包括为页面和控件应用何种样式和动画等。在这个实验中，您可以了解一个Windows Phone应用程序的结构，还可以找到如何利用可扩展应用程序标记语言（XAML）来为您的应用程序创建用户接口（UI）的方法。XAML 是一种声明性语言；它是用来声明一个Silverlight用户接口以及接口中元素的主要格式。最后，您还能了解如何在Windows Phone Emulator上去部署和调试您自己的Windows Phone应用程序。

 

目标

这个实验的对象是那些对Microsoft工具例如Visual Studio了解较少，且对Silverlight非常陌生的开发人员。如果您对Silverlight的编程模型感到很适应，且已经开始利用Visual Studio和Microsoft Expression套件进行工作，那么您可以考虑略过 本实验。从另一方面讲，如果您完全对Silverlight不了解，我们强烈建议您查阅一些与Silverlight相关的实验来丰富您的Silverlight技能 ，这些实验的内容可以从下面这个站点找到：http://silverlight.net/learn/.

在这个实验手册中，您将会学到:

·        对Windows Phone 开发人员使用的工具更加熟悉：针对Windows Phone的Microsoft Visual Studio2010 Express版本和Windows Phone Emulator。这些就是您创建和测试任何可被管理的Windows Phone应用程序所需要的工具。

·        利用Microsoft ExpressionBlend为您的Windows Phone应用程序应用样式和动画来增加用户体验。

·        学习针对Windows Phone应用程序的Silverlight的基础结构，同时学到Silverlight和针对Windows Phone的Silverlight之间的不同。

·        利用针对 Windows Phone的Microsoft Visual Studio 2010 Express和Windows Phone Emulator编写、测试、部署和调试WindowsPhone应用程序的Silverlight。

 

先决条件

要完成本动手实验，您需要以下工具：

·        用于Windows Phone的MicrosoftVisual Studio 2010 Express或者是Microsoft Visual Studio 2010

·        用于Windows Phone的Microsoft Expression Blend或者是Microsoft ExpressionBlend 4，它带有针对Windows Phone的Microsoft Expression Blend 插件

·        Windows Phone开发者工具

注释:集成以上所有工具的程序包能从以下地址下载

http://developer.windowsphone.com

 

练习

这个实验指南包含了以下练习:

1.       利用Microsoft Visual Studio 2010 Express开发一个Windows Phone应用程序

2.       利用Expression Blend为您的Windows Phone应用程序设计UX

 

 

完成此实验需耗时: 45 分钟。

 

 

练习1:利用Microsoft Visual Studio 2010 Express为Windows Phone创建Windows Phone应用程序

在这个练习中，您将 学会如何创建、测试、部署和运行您的第一个Silverlight ---Windows Phone应用程序“Hello World” 。您将学会如何使用Windows Phone开发者工具，包括：用于Windows Phone IDE的免费工具Microsoft Visual Studio 2010Express和Windows Phone Emulator。

在这个练习中，您将会为一个Windows Phone项目工程创建新的Silverlight。您将会从创建组成Windows Phone应用程序的基本元素开始，例如为Windows Phone项目模板添加基本的按键和文本处理。由于这一个针对Windows Phone应用程序的Silverlight，您需要按照Silverlight编程的模型并利用XAML来定义您的用户接口。尽管可以利用任何代码来开发一个基于XAML的用户界面（UI），但是充分利用更好更简单的工具来帮助自己完成基于XAML的工作显然能达到事半功倍的目的。

您需要编辑主页面的XAML来填加3个元素：一个文本框、一个按钮、一个文本块，来实现利用XAML为Windows Phone创建一个用户界面的目的。这三个Silverlight控件就被移植到运行在Windows Phone运行环境的Silverlight中。一旦完成，应用程序允许您在文本框中输一些文本信息，然后点击按钮控件，文本信息将会被显示到文本块控件中。

最后，当所有代码都完成后，您可以编译这个程序，然后把它部署到Windows Phone Emulator上，达到测试的目的。您可以通过设置程序运行断点，在模拟器（Emulator）上调试这个应用程序，如利用调试程序一步一步走遍整个程序的源代码并检查程序变量的值。注释:这个实验手册所阐述过程的步骤使用了针对Windows Phone的Microsoft Visual Studio 2010Express版本，但是同样适用于用了集成Windows Phone开发者工具的Microsoft Visual Studio2010 。实验手册中一般涉及到Visual Studio的地方，对这两种产品都是适用的。

 

任务 1 –在Visual Studio中创建一个Windows Phone应用程序工程

这个任务中，您将会利用针对Windows Phone的MicrosoftVisual Studio 2010 Express 工具内嵌的模板来创建一个Windows  Phone应用程序工程的Silverlight，可以把这作为您第一个要开发的Window Phone应用程序的起点。

1.      .从操作系统的Start | All Programs |Microsoft Visual Studio 2010 Express | Microsoft Visual Studio 2010 Express forWindows Phone中启动用于Windows Phone应用程序开发的MicrosoftVisual Studio 2010 Express 。

Visual Studio 2010:从操作系统的Start | All Programs |Microsoft Visual Studio 2010启动Visual Studio 2010。

 

2.      在 File菜单，选择New Project。

Visual Studio 2010: 在 File菜单， 指向 New 然后选择Project。

 

3.      在 New Project对话框，从安装的模板列表里选择Silverlight for Windows Phone类别，然后选择 Windows Phone 应用程序模板。把name栏改为Hello Phone ，同时把location 设为 在实验目录下Source 文件夹中的 Ex1-CreatingWP7AppsWithVisualStudio。更改 solution name 为Begin，然后点击OK。

图表1

在用于Windows Phone的Microsoft Visual Studio2010Express中创建一个新的Windows Phone应用程序

 

4.      在 Solution Explorer中，查看基于Windows Phone 应用程序模板产生的解决方案的结构。Visual Studio解决方案是该解决方案下所有工程项目的容器；本例中的解决方案只包含了一个名为Hello Phone的Silverlight Windows Phone工程项目。

图表 2

SolutionExplorer 包含一个名为 Hello Phone的应用程序

 

注释:SolutionExplorer允许用户在解决方案或工程项目中查看 其包含的项（Item）以及对项进行管理操作。要启动 Solution Explorer, 在键盘上按下CTRL + W, S 或者在View 菜单，选择Other Windows | Solution Explorer.

 

Hello Phone 项目包含以下项 （Item）:

  

Item

   

Description

   

App.xaml / App.xaml.cs

   

定义应用程序的入口点，初始化应用程序范围内的资源,，显示应用程序用户界面

   

MainPage.xaml / MainPage.xaml.cs

   

定义应用程序中的程序页面（带有用户界面的页面）

   

ApplicationIcon.png

   

一种带有图标的图像文件，代表了手机应用程序列表中应用程序的图标

   

Background.png

   

一种带有图标的图像文件，代表了在开始页面上应用程序的图表

   

SplashScreenImage.jpg

   

这个图片会在应用程序第一次被启动时显示。启动画面会给用户一个即时的反馈，告诉用户应用程序正在启动直到成功跳转到应用程序的第一个页面。用户的启动画面可以和应用程序的一个页面设计的非常相似，这样能给使用这一个应用程序被快速加载的感觉。

   

Properties\AppManifest.xml

   

一个生成应用程序包所必需的应用程序清单文件

   

Properties\AssemblyInfo.cs

   

包含名称和版本的元数据，这些元数据将被嵌入到生成的程序集

   

Properties\WMAppManifest.xml

   

一个包含与Windows  Phone Silverlight应用程序相关的特定元数据的清单文件，且包含了用于Windows Phone的Silverlight所具有的特定功能

   

References folder

   

一些库文件（集）的列表，为应用程序的工作提供功能和服务。

 

 

5.      首先，在Solution Explorer中右键单击App.xaml  并选择View Designer。注意这个文件的XAML标记，它有一个叫Application 的根元素，在这个根元素中有一个叫Application.Resources的段。  此处，您可以定义应用程序级别的资源，例如整个应用程序使用的颜色、画笔以及样式对象。

6.      这段XAML代码初始化了Application的ApplicationLifetimeObjects属性，创建了一个PhoneApplicationService 对象。PhoneApplicationService 类提供了应用程序不同生命阶段的访问功能。包含了对应用程序处于空闲状态的管理，也包含了当应用程序处于有效或无效状态时的管理。

图表 3

基于Windows Phone应用程序模板产生的缺省App.xaml文件

 

注释: App.xaml 文件，连同其代码隐藏文件App.xaml.cs，共同定义了Application 类的实例。 这个类封装了用于Windows Phone的Silverlight，并提供了一个入口点。

 

7.      现在，在Solution Explorer 中右键单击App.xaml 并选择View Code 来打开一个代码隐藏文件。请注意，在Application的派生类的构造函数中已经有一个针对UnhandledException事件的句柄。

Application 类的RootFrame 属性标识了应用程序的启动页面。 所有的Windows Phone应用程序都有一个最顶层的容器元素，它的数据类型是PhoneApplicationFrame 。这个框架承载了一个或多个用来标识应用程序内容的PhoneApplicationPage 元素，同时它还被用来处理不同页面之间的导航切换。

图表4

应用程序的代码隐藏文件展示了全局事件句柄

注释:以Windows Phone应用程序模板为基础的Silverlight所生成Application类，除了对上述事件的句柄外，还包含了对Launching和Closing事件的句柄。您可以通过更新这些方法的代码来实现当Windows Phone应用程序启动和关闭过程中执行自己定制过的代码。

 

8.      新生成的工程项目包含一个缺省的文件，该文件里包含了用来定义应用程序主用户界面的XAML标记。如果用户要在designer中查看这个文件，则需要在Solution Explorer中右键单击MainPage.xaml。

默认状态下，designer 会把这个文件用分隔视图显示。一个窗口显示XAML标记，另一个 窗口显示了所见即所得的用户界面元素设计视图。模板中显示的是应用程序的名称和标题，您可以根据需要删除它们。除此之外，XAML文件还可提供给您一个空白的类似画布的操作区域，您可以通过添加控件来创建自己的应用程序的用户界面。

图表 5

XAML 设计工具（designer）展示了应用程序的主用户界面

注释:可扩展的应用程序标记语言 (XAML) 是一种声明性语言。您可以利用声明XAML标记来创建可见的用户界面元素。然后再利用一个代码隐藏文件对XAML中声明的事件做出反应，并操作在XAML中已经声明的对象。用一种基于XAML的声明性语言来创建接口，从原型到生产整个过程都是非常直观的，特别是对那些有网页设计和技术背景的人来说更是如此。

 

9.      ApplicationIcon.png 文件包含的图标文件，就是那些在电话设备上快速启动页面中代表应用程序的图标。您可以在Solution Explorer 上右键单击该项，那么机器上注册的图像编辑应用程序就会自动打开它，例如,Paint.exe.

注释:VisualStudio 2010中，在Solution Explorer 上右键单击图标文件，该文件会在内嵌的图像编辑器中打开

10.  一个Windows Phone应用程序通常需要用到基础平台或者其他类库来提供服务。要先使用这个优势功能，应用程序需要首先引用实现这些服务的程序集。要显示一个项目工程引用的程序集， 在Solution Explorer中展开References节点，然后查看程序集列表。它包含了Silverlight一般的程序集以及具体到Windows Phone平台的程序集。

图表 6

SolutionExplorer 展示了 被项目工程引用的程序集合

 

11.  项目工程的Properties视窗是编辑WP清单文件的唯一方式，正如下表所示。想打开这个窗口，在Solution Explorer中 右键单击Hello Phone 项目然后选择Properties。

图表 7

项目属性窗口

注释: Windows Phone 项目属性窗口允许您更改一些电话程序专用的属性。这些属性关系到应用程序在电话设备上的部署和外观效果。所有相关参数被存储在WMAppManifest.xml 文件中。即使您试图手动更改过这个XML文件，只要在这个对话框中对您的项目进行更改设置并保存，其结果都会自动覆盖您之前的手动更改。

 

任务 2 –在WindowsPhone Emulator中构建并测试应用程序

此时，应用程序并不能做什么，但是它已经做好第一次测试运行的准备。在这个任务中，您会构建一个应用程序，并把它部署到Windows Phone Emulator，然后执行它，通过这些您就能了解一个典型的开发过程。

1.      在 Debug 菜单，指向 Windows 然后通过选择 Output 来打开 Output 窗口。

2.      在Debug菜单选择Build Solution ，或者按键盘上的 SHIFT + F6 组合键来编译解决方案中的项目工程。

Visual Studio 2010: 在Debug菜单选择Build Solution或者按键盘上的CTRL + SHIFT + B组合键来编译解决方案中的项目工程。

 

3.      查看 Output 窗口查看构建编译过程中产生的每条消息记录，包括最后输出的结果信息。

图表 8

在Visual Studio中构建（Build）应用程序

 

4.      眼下您应该不会发现任何错误，但是如果项目包含编译错误，那么这些错误信息将会出现在Output窗口中。要处理这些类型的错误，您可以利用Error List 视窗。这个视窗能够以列表的形式显示错误、警告以及编译器产生的信息，您可以根据错误的严重性来排序或者过滤。此外，你可以通过双击列表中的条目来自动打开相关源代码文件并切换到错误的源点。要打开Error List视窗，在View菜单，指向Other Windows然后选择Error List。

Visual Studio 2010: 点击View 菜单，选择Error List 来打开Error List视窗。

 

图表 9

ErrorList 视窗显示构建过程中的错误

5.      验证部署的目标是Windows Phone Emulator要做到这样，确保在工具栏上Start Debugging按钮旁的Select Target下拉框中的值是Windows Phone 7 Emulator。

图表 10

选择目标设备来部署应用程序

注释:当您从Visual Studio中部署您开发的应用程序时，您既可以选择一个真实的设备或者是 WindowsPhone Emulator。

6.      在Windows Phone Emulator上按F5 来启动应用程序。注意设备模拟器窗口的出现，同时在Visual Studio建立模拟器环境和部署应用程序镜像时会出现一个停顿。

图表11

部署一个应用程序镜像到 Windows Phone Emulator

 

7.      一旦准备就绪， 模拟器会显示开始页面，不久之后，您的应用程序也将会出现在模拟器的窗口中。

图表 12

在 Windows Phone Emulator中运行应用程序

 

8.      直到您完成了创建用户界面以及应用程序逻辑的编程设计，否则您在当前应用程序的页面基本上什么都不能做。按下SHIFT + F5或者工具栏上的Stop按钮来分离调试器并终止调试会话。不要关闭模拟器视窗。

图表 13

终止调试会话

 

提示:当您启动一个调试会话时，它将会花费一些时间来搭建模拟器环境以及启动应用程序。为使您的调试过程简单而有效，当您在用Visual Studio编写源代码的时候，请不要关闭模拟器。如果模拟器一直处于运行状态，它只会用很少的时间来完成停止当前会话、编辑源代码、构建应用程序、部署新应用程序镜像、重新启动调试会话这一整个过程。

 

任务 3 – 设计用户界面

在这个任务中，您会为Hello Phone程序创建UI元素。这个程序非常简单。当设计完成后，这个应用程序的UI将会包含一个标题、一个文本框、以及一个按钮。使用这个应用程序，您需要在文本框中输入一些文本，当您点击按钮，应用程序会显示一个带有您输入字样的横幅。 样图如下 。

图表 14

应用程序的用户界面

 

9.      在Solution Explorer，右键点击 MainPage.xaml 从而在designer（设计工具）中打开这个文件。

注释:Designer 提供了两个分离的视图来编辑XAML文件，Design和XAML视图。在设计模式，在设计工具designer上，您将会看到一个可以进行交互操作的画布，您可以从工具箱中拖拽控件到画布上，然后还可以选中它，移动它，重新设置大小以及为存在的控件设置属性。在XAML模式，有一个标记语言编辑器，它能帮助你编辑页面上的XAML。设计工具窗口上的标签，这将会帮您实现切换模式的功能。您也可以选择分隔模式，选择了此模式编辑窗口将会同时显示两种视图。在分隔模式，您可以使用Expand Pane/Collapse Pane按钮来使当前模式实现视觉最大化。

 

10.  尽管使用IDE您可以实现操作对象图形化，但在这个任务中，您将会主要关注手动编辑XAML。您可以从Design 视图来检查您完成的工作。您可以通过双击设计工具designer视窗右边缘上的XAML标签来设置编辑模式为XAML视图，并最大化视图的可见区域。如果您很难确定哪个是正确需要的标签，只需把鼠标的游标放到每一个标签上，此时将会显示一个工具提示条，这样您就可以正确识别标签。

注释:如果您把设计工具显示为水平分隔的视图，标签设置位于窗口的底部边缘。

 

图表 15

XAML 设计工具展示了XAML 视图

 

11.  在由Windows Phone应用程序模板产生的XAML文件中，找到Grid容器下一个叫做LayoutRoot 的元素。它被用来为页面上的元素排序。在两个已经存在的RowDefinition 属性行中再插入新的一行，并把它的Height 属性值设为Auto 。这一行过一会儿还会包含一个文本框以及一个按钮。

XAML

  ...

  <Grid x:Name="LayoutRoot" Background="Transparent">

    <Grid.RowDefinitions>

      <RowDefinition Height="Auto"/>

      <RowDefinition Height="Auto"/>

      <RowDefinition Height="*"/>

    </Grid.RowDefinitions>

     ...

 

  </Grid>

</phone:PhoneApplicationPage>

 

注释:Grid是一个版面设计元素，它扮演了为其他控件充当容器的角色。它主要被用来定位其中的子控件，并为它们 排版。Several layout controls exist toprovide alternative layout behaviors:几个现有的版面设计控件提供了版面设计：

Canvas:定义了一个区域，在这个Canvas区域中您可以根据需要协调子元素控件的位置。

Grid:定义了一个由列和行组成的灵活的网格区域。

StackPanel:把子控件元素按照水平和垂直排成一线。

更多信息请参阅：SilverlightLayout System.

 

12.  注意 root Grid 元素包含其他嵌入的元素, 这些元素通过定义一个 Grid.Row 属性被分配到外部Grid里的不同行。在Grid元素中找到TitlePanel。把内部Grid中第一个TextBlock元素中Text 属性的值设为“Windows Phone 7”。类似地， 把第二个TextBlock元素中的Text属性值设为” Hello Phone”。

图表 16

为应用程序设置标题说明性文字

 

注释:每一个子元素被分配到容器Grid的一行时，必须为Grid.Row属性指定值，这被认为是一个附加属性。附加属性允许不同的子元素为其父元素中定义的属性指定一个唯一的值；在这种情况下，Row属性属于Grid这个元素。

 

13.  现在，找到Grid元素中的ContentPanel，它的内容应该是空的，请把下面的XAML标记语言（蓝色高亮的）粘贴到该元素中。

XAML

...

<Grid x:Name="LayoutRoot" Background="Transparent">

  ...

  <!--ContentPanel - place additionalcontent here-->

  <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

    <Grid.ColumnDefinitions>

      <ColumnDefinition Width="*" />

      <ColumnDefinition Width="Auto"/>

    </Grid.ColumnDefinitions>

    <TextBox Grid.Column="0"Name="MessageTextBox"FontSize="{StaticResourcePhoneFontSizeExtraLarge}" Margin="20,20,10,20"/>

    <Button Grid.Column="1"Name="ClickMeButton"Content="Click Me"HorizontalAlignment="Right"Padding="4"Margin="10,20,20,20" />

  </Grid>

 

</Grid>

...

 

注释:Grid根据其ColumnDefinitions 集中所定义的每列宽度的值来安排页面上的子控件。注意第一列的宽度被指定为*，这样做的目的是为了保证当所有的其他列都被分配后，第一列能延自动伸展并填满未被使用的行空间；第二列的宽度值被设置为Auto，目的是根据其内容来调整列大小。

 

14.  为了完成整个页面的设计，需要增加一个第三行，此行中会有一个包含用户输入信息的横幅。 要想创建这个行，在外部Grid定义的结束标签前插入如下XAML标记语言（蓝色高亮的）。

XAML

...

<Grid x:Name="LayoutRoot" Background="Transparent">

  ...

 

  <Grid Grid.Row="2">

    <TextBlock Name="BannerTextBlock"Style="{StaticResource PhoneTextExtraLargeStyle}"

               Foreground="#FFFF9A00"HorizontalAlignment="Stretch"

               TextWrapping="Wrap"TextAlignment="Center"FontWeight="Bold" />

  </Grid>

</Grid>

...

 

15.   点击视窗右侧边缘的Design 标签切换到设计模式。检查页面上空间的布局，应该如下图所示。

注释:如果你配置设计开发工具来展示一个水平分隔视图，标签则在窗口下边缘。

 

 

图表 17

在Design模式中查看页面

 

 

任务 4 –在用户界面处理事件程序

在这个任务中，您将定义对应用户界面上操作的事件程序，也就是点击按钮事件。您需要在页面的代码隐藏文件中，编辑代码来定义事件的句柄。

1.      确保设计工具Designer中的模式被设置为Design。要做到这一点，您可以点击Designer视窗右边缘的Design标签。如果您不能顺利识别正确的标签，把鼠标光标移动到标签上，将会出现一个工具提示。

2.      在Designer上点击“Click Me”按钮选中并按下F4，打开Properties窗口。

3.      在Properties面板上，点击Events  标签来显示一个带有事件列表的窗口。找到Click事件 ，然后在旁边的文本框里输入ClickMeButton_Click 。点击ENTER来生成一段事件句柄，打开隐藏代码文件，从这个文件中能够找到Visual Studio针对此事件生成的方法存根。

图表 18

为按钮创建一个事件句柄

 

图表 19

XAML视图显示了与Click事件绑定的句柄

 

注释:有另外一种机制来创建事件句柄。在Visual Studion中，你可以在designer中双击一个控件，并为其缺省事件创建一个句柄。这恰好是按钮控件的Click事件。

 

4.      MainPage.xaml.cs 文件中包含了ClickMeButton_Click方法的实现（现在其内容是空的）。请把下面代码插入到ClickMeButton_Click方法中。

C#

private voidClickMeButton_Click(object sender, RoutedEventArgs e)

{

    BannerTextBlock.Text = MessageTextBox.Text;

    MessageTextBox.Text = String.Empty;

}

 

注释:代码实现从本框中读取用户输入的文本并显示到banner控件中

 

 

任务 5 – 验证

在这个任务中，您将会在Windows phone Emulator上构建、部署和运行应用程序并测试应用程序是否工作正常。另外，您可以通过设置断点，利用调试程序进入到源代码中并检查各个变量的输出值，通过这种方式您可以了解如何利用Visual Studio调试运行在Emulator上的应用程序。

1.      如果需要，用户可以重新打开MainPage.xaml 的隐藏代码文件。为了实现这个目的，在Solution Explorer上找到该文件并右键单击它，然后选择View Code。

2.      现在，为“Click Me”按钮的事件句柄定义一个断点，当程序运行到断点时会停止执行。要设置这个断点，首先定位源文件中ClickMeButton_Click方法的第一行代码，然后点击该行代码所对应的编辑窗口左边的灰色区域。插入断点的位置显示了一个红色的圆圈   。另外一种选择就是在编辑窗口中点击代码行然后按F9。

图表 20

在Visual Sutdion中设置断点

注释:要对断点切换开启或关闭状态，点击空白页面上的  或者在包含断点的代码行处按F9。

3.      按F5键，在Windows Phone Emulator上构建和部署应用程序，并开始调试进程。等待应用程序被启动并显示主页面。

注释: 如果在实验过程中始终保持Emulator处于运行状态的话，那么启动一个应用程序将会只花几秒钟时间；如果您关闭了Emulator，那么则会花费更多的时间。

 

4.      在模拟器窗口，点击文本框使其获得运行焦点。这将导致软件输入面板（SIP）自动打开。 您可以利用面板来输入信息，或者还可以通过按下PAUSE/BREAK 键，然后利用桌面电脑键盘来输入。After完成向文本框的输入后点击旁边的按键。

图表 21

在模拟器上输入

注释:需要按下PAUSE/BREAK 是一个已知问题，并将会在以后的版本中修复[A1] 。

 

5.      运行会回到 Visual Studio中，注意程序在前面设置的断点处停止执行，同时下一句要执行的语句被黄色高亮起来。

图表 22

步进通过在调试器中的代码

 

6.      检查调试器中TextBox现在的内容。 要做到这一点，在源代码窗口，把鼠标光标放到MessageTextBox.Text 这一属性上。一个提示窗口—通常被称为数据提示—弹出并显示当前属性的值，这个值应该和您在模拟器窗口上输入的文本一致。 确保光标落在了Text部分上；否则，数据提示显示的是关于MessageTextBox的信息 。

图表 23

在调试器中检查变量的值

 

注释:目前您可以检查任何对象的状态，只需通过把鼠标光标指向相应变量的范围之内即可。

 

7.      按F10单步跳过当前语句，此时已经把textbox的内容赋给Banner的文本。显示BannerTextBlock.Text属性的数据值，并确定该值与Textbox的值是一致的。

注释:当您使用F10，您就命令调试器跳过当前语句。您也可以使用F11进入到当前语句中。如果是那样的话，且当前语句中有方法调用，调试器会进入到目标方法中并允许您来调试他。

 

8.      再次按下F10执行下一条语句，此时Textbox的内容将会被清空。再一次来显示MessageTextBox.Text 属性的数据提示，确保现在的值是空的。

9.      最后，按F5继续执行应用程序。再一次切回到Windows Phone Emulator 。如果需要，在模拟器窗口解除锁屏。

提示:取决于配置设置，无论什么时候只要应用程序保持一段时间的空闲状态，Windows Phone Emulator就会处于锁屏状态。要恢复这个应用程序，使用“轻弹”的方式—点击您的模拟器窗口表面然后按住鼠标键快速的向上移动鼠标—滑动解除锁屏。检查模拟器窗口中的横幅控件显示了您刚才的输入文本。

 

图表 24

在WindowsPhone Emulator中运行的Hello Phone 应用程序

10.  在模拟器上通过按Back按钮 切换到前一页面。请注意当您做这个操作的时候，调试程序进程将会结束，模拟器也将会显示开始菜单，这是因为你正在离开当前应用程序的第一个页面（且只有一个页面），而且之前也没有处于活动状态的应用程序。

提示:  如果当前会话结束又要求继续调试，需要再次按F5来启动应用程序并重新加载调试器。注意，尽管这个操作再次启动了应用程序，但应用程序以前的状态将不再可用。停止模拟器将会停止应用程序并分离调试器。 当您进行这样的操作，Visual Studio调试器将会与应用程序分离并显示已经和设备失去连接的信息。

图表 25

当你切换离开当前应用程序时调试进程将会结束

 

练习 2: 使用 Expression Blend 来设计您的Windows Phone 应用程序的UX

同样的，如果您使用Expression Blend来为桌面浏览器设计丰富的网络应用程序，您也可用它在Windows Phone上设计具有创造性的，唯一的基于Silverlight的应用程序。用于Windows Phone的Expression Blend允许您为Windows Phone应用程序创建基于XAML的接口，这些接口的行为可以通过Visual Studio被开发人员实现。

用于Window Phone的Microsoft Expression Blend是Windows Phone Developer Tools安装程序中可选的一部分. 作为选择，您可以下载MicrosoftExpression Blend 4 然后安装 Add-inWindows Phone.

任务 1 –在Expression Blend创建一个自定义按钮

一般而言，Silverlight控件会把它们的逻辑与用模板生成的视觉外观进行分离。一个ControlTemplate 指定了一个空间的可视结构和视觉化行为。您可以通过更改ControlTemplate缺省的设置来定制大多数控件的外观。这样做允许您更改控件的外观而不用更改它的功能。例如，您可以把您应用程序中的按钮变成圆边而不是缺省的矩形，而不会影响其触发Click事件的功能。

在这个任务中，用Expression Blend 来打开您在前一个练习中创建的Visual Studio项目，并替换按键的ControlTemplate 来更改它的外观和视觉感受。因为您在XAML创建了一个ControlTemplate，您可以更改一个控件的外观而不用修改任何代码。

图表 26

改变控件的外观和视觉感受

11.  如果还没有打开，从Start | All Programs | Microsoft Visual Studio 2010Express for Windows Phone启动用于 Windows Phone的Microsoft Visual Studio 2010 Express。

Visual Studio 2010: 从Start | All Programs |Microsoft Visual Studio 2010启动 Visual Studio 2010。

 

12.  如果您完成了前一个练习的所有步骤，您可以继续使用为上个练习所创建的解决方案（solution）；否则，要从实验的Source文件夹下的Hello Phone\Ex2-WP7AppUXDesignWithBlend\Begin处打开Begin. sln。

13.  现在，在 Expression Blend中打开当前解决方案。在Visual Studio的Solution Explorer, 右键单击 MainPage.xaml 然后选择 Open in Expression Blend。

如果此时一个有关安全风险的警告弹出，点击Yes来解除警告。

图表 27

在Expression Blend中打开解决方案

 

14.  在Expression Blend中，务必确定在designer窗口打开了MainPage.xaml 文件—如果需要在Projects 面板双击该文件来打开它—当前的工作空间被设置为Design。要查看当前的工作空间，在Window菜单 选择Workspaces 同时确保Design 被选中。

图表 28

在Expression Blend选择当前工作空间

注释:ExpressionBlend 的工作空间包含了所有的视觉界面元素。包含了画板、面板、工具面板、工作空间配置、创作的意见和菜单。

 

15.  In the designer window, 在designer窗口，右键单击 “Click Me” 按钮，指向 EditTemplate 然后选择 Create Empty。

16.  在 Create ControlTemplate Resource 对话框，选择Name且值为FancyButton，在Define in选项中保持当前值"This document"，点击OK。

图表 29

为按钮控件创建一个空的控件模板

注释:资源包中提供了一个简单的方式来复用一般定义的对象和值。您可以为普通常用项包括控件模板、样式、画笔、颜色和动画来创建定义并把它们存入资源字典中。一个资源字典是一个键控的对象字典，您可以同时在XAML和代码中使用它。您可以在应用程序架构中创建不同范围的资源字典，例如允许您创建页面级的资源或者应用程序级的资源。

上面的对话框给您一个能够定义全局应用程序级控件模板的选项，这个模板被存贮在App.xaml您可以在应用程序的其他页面复用该模板，或者把模板存到This document，这样您只能在应用程序的同一页面进行复用。

 

17.  如果Objects and Timeline面板不可见，则要在Window菜单上选择Objectsand Timeline 来显示这个菜单。如果需要，您可以通过选择Window | Reset Current Workspace来重置工作空间为缺省状态。

注释:当您创建一个新的模板时，Expression Blend 会进入一个您可以查看和编辑新模板的模式。在 Objects and Timeline面板，在新元素树根处的模板上的单词会显示您现在进行编辑时所处的范围。

 

18.  更改模板当前根版面设计的容器。在 Objects andTimeline面板，右键单击Template 内的子元素Grid， 指向Change Layout Type,然后选择Border。

图表 30

更改模板根版面设计的容器

 

注释:当您创建了ControlTemplate, 结合 FrameworkElement 对象来构建单一控件。一个ControlTemplate 只能包含一个FrameworkElement 对象来作为其根元素。根元素通常会包含其它FrameworkElement 对象。对象的组合构成了控件的视觉结构。

 

19.  在Objects and Timeline面板 保持Border元素为选中状态, 切换到Appearance下的Properties面板，设置BorderThickness 属性值，每条边都设为2；CornerRadius属性值为15。

图表 31

配置边界元素的外观

20.  现在，在Brushes 部分，选择Background 属性并 挑选 Gradient brush 选项。然后，单击左边渐变区域通过停止鼠标来选中它，把值设定为浅灰色，例如 #FFADADAD。然后选择右边的渐变条设定值为深灰色，例如#FF0A0A0A。      

图表 32

为按钮配置渐变背景

21.  当上述工作完成后，在 Brushes部分，选择 BorderBrush 属性，选择Solid color brush 并选择浅灰色，例如#FFC0C0C0。

图表 33

为按钮边界配置一个固定的颜色

22.  当您完成为按钮创建背景的操作，下一步是添加一个标题。首先，确保Border元素在Objects and Timeline 面板中始终是被选中的。

23.  然后，切换到 Assets 面板，选择 Controls类别，向下滚动列表直到TextBlock 控件被显示出来。然后，通过双击该控件来插入一个控件的实例，该实例被嵌套到模板的Border元素中。

图表 34

工具箱中插入一个TextBlock控件

图表 35

Objectsand Timeline 面板 上显示新的 TextBlock 嵌套在Border元素中

 

24.  现在，在 Tools 面板，选择 Selection工具l   或按 V键来 恢复选择模式。

注释:完成插入TextBlock后， 设计工具designer保存在插入模式，直到退出这个模式您才可以继续添加别的TextBlock元素。

25.  在 Objects and Timeline 面板，选择新添加的TextBlock元素。然后，在Properties 面板，展开Brushes 类别并设置Foreground 画笔颜色为浅色，例如#FFFFFFFF。

图表 36

为按钮控件设置前景色

26.  然后， 展开 Layout 类别并把 HorizontalAlignment 和VerticalAlignment 的属性值设置为Center。然后，Margin 左右两边的属性值都为 10且上下两边的属性值为 4。

图表 37

配置标题控件的margin 和 alignment属性

27.  把模板中TextBox 控件的Text 属性与按键模板化控件中的Content属性关联起来。要做到这点：

◦       展开 Common Properties类别

◦       点击 Advanced property options—属性值旁的一个正方形图标

◦       在模板化控件中选择 Template Binding  来显示可以绑定到该属性的属性列表，

◦       从列表里选择Content属性

注意 Text属性的值变为“ClickMe”——该值当前是设置的是按键控件Content属性——且现在被显示在一个黄色框内，意味着它是一个模板-绑定属性。

 

图表 38

绑定模板中Text属性

注释:模板绑定是把一个空间模板的一个属性值与其他模板化控件的属性值相关联，它允许您设计一个定制的控件，但是当您在应用程序中使用这种控件的时候仍会带来一些变化。

 

28.  按CTRL+S来保存更新后的文件。

您现在可以开始测试新定制的按钮了。用于Windows Phone的 Expression Blend 允许您的Windows Phone应用程序在一个真的的电话设备或者一个模拟器上运行。 注意如果您打开Device面板 （从Window 菜单打开），您可以选择在何处预览您的程序。缺省情况下 Expression Blend 将会使用 Windows Phone Emulator 来部署和运行应用程序。

图表 39

构建模板的Text属性

29.  现在按F5 来构建和运行应用程序。输入一些文本然后点击按钮。

图表 40

从 Expression Blend启动应用程序

 

请注意，即使点击触发预期的行为，但是没有视觉提示来指示该按钮具有焦点或当它被按下。接下来的任务，您将会通过更新模板来实现按钮根据其状态不同而相应更改为不同的外观。

 

任务 2 –为定制控件增加视觉状态效果

在这个任务中，您将对控件模板进行添加不同视觉状态的升级，升级后将会允许：当选择焦点落在按钮控件上时，会出现一个高亮轮廓；当按钮控件被按下时，将会在页面上变换它的位置。

1.      在Objects and Timeline panel面板，选在Border控件。

2.      现在, 切换到States面板并检查按钮 控件可用的视觉状态。

图表 41

States 面板展示了Base状态被选中

注释:在States 面板可以看到控件的所有视觉状态。 Base 状态所定义的元素样式在每个状态下都是一致的。在这个情况下，您可以通过对模板的定制来更改控件的基本外观。然后，对于其它的状态，您同样可以通过这种方式来更改模板，为相应状态提供视觉变化的依据。例如，在Focused状态下，围绕控件将会显示边界线。

 

3.      在FocusStates类别中, 选择 Unfocused 状态来实现当按钮控件失去焦点时触发状态的录制。

当前模式下对模板的更改仅仅被应用到特定的状态下。

图表 42

在Expression Blend中的状态录制

 

注释:当您选择正常状态外的其他状态一些变化将会发生。首先，被选择状态的标签旁亮起一个红色的圆圈，代表该状态正被使用。接着，旁边的设计区域出现了一个红色边框。最后, 设计区域左上角的标题被选中说明状态录制已经启动了。在这个模式下，模板上元素的任何变化都会被录制并记录到XAML文件中。在运行时，当该状态处于活动状态时，这些变化将被应用到基本模板上。

4.      当按钮失去焦点后，围绕按钮的边界线将会被隐藏：

◦       在Objects and Timeline面板，选择Border

◦       在Properties面板，展开Brushes ，选择BorderBrush 属性

◦       点击 Show advanced properties 图表  ，并把画笔的 Opacity 属性值设为 0

图表 43

把Unfocused状态的边界线设置为透明

5.      回到 States 面板 然后从CommonStates类中选择Pressed state，并为鼠标点击触发的操作开启状态录制 。

6.      在Properties面板，展开 Transform 并选择Translate项 。 设置X 和Y 的值为2。

这个更改将会导致当按钮无论何时被点击其位置将会发生一些形变，并以此来表示按钮被按下。

图表 44

按钮处于Pressed状态时，按钮位置发生变化

7.      最后，在States面板上选择Base模板来关掉录制模式。

8.      按CTRL + S来保存更新的文件。

9.      现在您已经完成了对定制控件添加不同的视觉状态，现在可以开始测试这个被更新的按钮：

◦      按F5来构建和运行应用程序

◦      输入一些文本然后按Tab键使输入焦点切换到按钮上。

◦      注意，当焦点切换到按钮上，按钮上将会出现一个边界线来表明按钮被选中

◦      此时，按下空格键或者点击按钮，注意此时按钮位置发生了下沉的形变。

 

 

任务 3 –创建横幅文本的动画

动画是基于关键帧的，这些帧定义了一个平滑的视觉转换的起止点。在Expression Blend中创建一个动画， 你需要创建一个Storyboard，在这个Storyboard中您需要在时间轴上标记每个关键帧属性的变化。 例如，您可以在时间轴0秒时 设置一个关键帧，它记录一个矩形在画板上左边的位置；然后在时间轴1秒时设置另一个关键帧，它记录了同一个矩形在画板上右边的位置。动画的效果是基于矩形的X和Y属性在1秒钟内的变换。当您正在运行一个动画，它会在指定的时间段 引入属性的变化值并把结果显示在您的应用程序上。利用这种方式，您可以在画板上实现一个对象的任何属性的动画，即使是非视觉属性也可以做到这一点。

这个任务中，您将会在Expression Blend中创建一个Storyboard，实现按下按钮后，在横幅控件上文本出现动画效果。

1.      切换当前工作空间到动画工作空间。点击Window菜单按钮，指向Workspaces 并选择Animation。

注意这将会重新调整窗口，其目的是为编辑时间轴留出最大可用空间。

注释:可以通过选择Window | Reset CurrentWorkspace，实现恢复一个工作空间到其缺省状态。

 

2.      如果需要，退出编辑按钮控件模板。要做到这点，点击Objects andTimeline 面板上FancyButton (Button Template)元素旁的Scope Up 按钮   来显示页面的元素树。

注释:当您在编辑一个控件模板的时候，Objects and Timeline 面板仅显示该模板的元素树。要想编辑页面上其他元素，你需要退出当前编辑对象的范围。

 

3.      现在，在Objects and Timeline 面板点击New来创建一段新的脚本。这是一个标有“+”号的按钮，它在面板的右上角位置。

图表 45

Objectsand timeline 面板的Animation模式

4.      在 Create Storyboard Resource 对话框，把 Name值 设为AnimateBanner 然后点击OK。

图表 46

创建一个新的storyboard 为横幅增加动画

 

5.      要在动画中创建关键帧，首先，要找到Objects and Timeline面板上 元素树中的BannerTextBlock元素选中并点击它，如果需要，展开Grid父元素来显示它。

6.       然后, 在时间轴上点击并拖拽播放头（playhead）有1秒的偏移量。

图表 47

改变时间轴播放头的偏移量

注释:播放头是在时间轴的上方的黄色标记线所在位置。现在对页面中元素所作的任何 更改都会被记录为在播放头创建的关键帧。

7.      然后，切换到Properties面板，展开 Transform 类， 然后选择Scale 变形（transform）。 设置X属性值为-1。这个变形反映的是元素水平轴上的改变。

图表 48

为文本应用一个scale变形

8.       切换回到时间轴面板。

注意现在多出一个新的关键帧—用灰色圆圈表示—当时间轴正在录制时，更改元素树中的元素，录制结果会反映在选定的时间偏移量处。

图表 49

在动画storyboard 中创建一个关键帧

9.      现在，改变时间轴的播放头的偏移量为2秒。

10.  再一次， 切换到 Properties 面板, 展开 Transform 类并选择Scale 形变。 更改X 属性值为1，并恢复元素的原始状态 。

注意由于上面的更改第二个关键帧出现在时间轴的storyboard上。

图表 50

Objectsand Timeline 面板展示了关键帧的插补

11.  为了在设计工具designer中测试动画,您需要为横幅控件加入一些文本。首先，点击面板左上角AnimateBanner  左边的红色圆圈来暂时关闭录制功能——因为您也不想把添加文本操作也录制为动画的一部分。

图表 51

关闭录制模式

注释:当您关闭了录制功能，对页面元素的任何操作都不会被加入到动画中。

 

12.  现在， 在designer上的BannerTextBlock 元素上右键单击并选择Edit Text。为横幅控件输入一个合适的文本然后点击ENTER 。

13.  要测试动画，点击 时间轴上的Play键。

注意横幅中的文本如何沿其中轴线水平旋转，在整个动画周期中的动作是如何保持统一的。在接下来的步骤里， 您将会利用一个非常简单的功能来改变关键帧之间的插补动作，并制作一个更加自然的动画。

图表 52

在designer中运行动画

 

14.  通过在时间轴上点击灰色圆圈图标来选择第一个关键帧。

注意当您选择了一个帧，在designer视图上将会自动显示帧中出现的用户界面元素的状态，在本例中，横幅文本会相应显示。

现在， 在 Properties 面板的 Easing 类下， 确保 EasingFunction被选中，展开下拉菜单来显示可用的功能，并选择Cubic Out功能。

这个特定的缓和（easing）功能是快要接近关键帧时降低切换的速率。

图表 53

为关键帧之间的插补操作应用缓和功能

Note:关键帧的插补，描述了如何利用动画显示两个关键帧时间空隙期间属性的改变。您可以通过应用一个缓和功能来更改关键帧的插补值从而或得一个理想的动画。

 

15.  重复前面的步骤为第二帧添加缓和功能。这次选择 Cubic InOut功能 ，使得变换开始处于一个慢速率，逐渐加速，最后在接近结束帧的时候减慢其速度。

图表 54

选择CubicInOut 缓和功能

 

16.  要测试加入了缓和功能的动画效果，需在时间轴上按Play按钮。

注意，横幅控件开始会高速旋转，当镜像的文本出现时减慢速度，接着又加速，最后减速并恢复到原始位置。

17.  到目前为止， 您已经创建了一个针对横幅文本的动画Storyboard，但是它目前只是一个存在于项目中不会被使用的资源。 要播放这个动画，您还需要利用事件来触发这个Storyboard， 这种情况下，利用点击Click Me 按钮来触发。打开这个按钮的Click事件句柄:

◦       切换当前工作空间到设计工作空间。在Window菜单 Window ，指向Workspaces 并选择Design。

◦       在 Projects 窗口, 点击MainPage.xaml旁的箭头 ( ) ，来显示其代码隐藏文件。

◦      双击 MainPage.xaml.cs 打开代码隐藏视图。

 

18.  更新事件句柄来实现播放动画，插入以下高亮区域的代码段到结束括号前的位置。

C#

private void ClickMeButton_Click(object sender, RoutedEventArgs e)

{

  BannerTextBlock.Text = MessageTextBox.Text;

  MessageTextBox.Text = String.Empty;

  this.AnimateBanner.Begin();

}

 

 

任务4 – 验证

在这个任务中, 您将在Expression Blend 中的WindowsPhone Emulator 上运行所设计的应用程序，并在用户界面上查看您所做的更改。

1.      按F5来构建 并把应用程序部署到WindowsPhone Emulator。等待应用程序启动并显示其主页面。

2.      在文本框中输入文本。

3.      再次按下Tab键，检查当按钮获得焦点后，会有一个边界线显示。

4.      Click the button to set thetext of the banner and notice how it shifts its position to indicate that it ispressed.按下按钮为横幅控件添加文本，并注意按钮位置的变化提示它被按下。

当按下按钮后，查看横幅文本播放动画效果。

图表 55

在Windows Phone Emulator 中运行更新过的应用程序

 

5.      当您完成所有测试，点击模拟器窗口右上角的Close 图标来关闭应用程序并停止调试进程。

注释:Shuttingdown the emulator is recommended only if you do not intend to run theapplication again建议只有您不再打算运行应用程序，才去关闭模拟器;如果您仍需要模拟器来部署以及调试更新的应用程序，请让模拟器处于开启状态。

 

 

总结

这个实验手册介绍了如何使用Silverlight为WindowsPhone平台开发应用程序。当完成此实验手册，您将会对创建和测试Windows Phone应用程序时所用到的工具更加熟悉。

在这个实验中，您使用用于Windows Phone 的Microsoft Visual Studio2010 Express 创建了一个新的针对Windows Phone应用程序的Silverlight，并利用免费工具创建了应用程序的逻辑以及用户界面的布局。您学会了如何把应用程序部署到Windows Phone模拟器上，以及如何利用调试器来设置断点，单步运行程序和检查程序变量的值。最后，您还看到如何使用针对Windows Phone的Expression Blend为用户界面上的控件定义样式以及创建动画效果。

---

 [A1]Verify if in the latest bits (LKG8) this workaround is stillrequired, if not remove this note and update the step description.