第一个WindowsPhone7程序教程.docx

第一个WindowsPhone7程序教程.docx

《第一个WindowsPhone7程序教程.docx》由会员分享，可在线阅读，更多相关《第一个WindowsPhone7程序教程.docx（78页珍藏版）》请在冰豆网上搜索。

第一个WindowsPhone7程序教程

Hands-OnLab

构建您第一个WindowsPhone7应用程序

实验版本号:

1.1.0

最后更新:

9/20/2018

目录

概述3

练习1:

利用MicrosoftVisualStudio2010Express为WindowsPhone创建WindowsPhone应用程序6

任务1–在VisualStudio中创建一个WindowsPhone应用程序工程6

任务2–在WindowsPhoneEmulator中构建并测试应用程序14

任务3–为主页设计用户界面19

任务4–在应用程序中处理错误23

任务5–验证26

练习2:

在VisualStudio中创建拼图板28

任务1–创建用户界面29

任务2–编程实现应用程序逻辑34

任务3–增加Multi-Touch支持43

任务4–创建动画效果52

任务5–验证56

练习3:

使用独立的存储保存游戏的状态58

任务1–添加程序集引用以及其他Assets58

任务2–更新PuzzleUI60

任务3–验证65

总结68

概述

本实验手册向您介绍为WindowsPhone应用程序构建和测试一个Silverlight所需要的工具和过程。

实验手册通过一个简单的益智游戏开发的全过程以及其不同阶段：

开始一个新的项目、添加控件、代码隐藏、测试和调试，来向您展示开发WindowsPhone应用程序的基本原则。

这个实验涵盖了WindowsPhone平台几个关键的特性，包括：

导航功能，多点触摸和独立存储。

目标

这个实验的对象是那些对Microsoft工具，例如VisualStudio了解较少，且对Silverlight非常陌生的开发人员。

如果您对Silverlight的编程模型感到很适应，且已经开始利用VisualStudio和MicrosoftExpression套件进行工作，那么您可以考虑略过本实验。

从另一方面讲，如果您完全对Silverlight不了解，我们强烈建议您查阅一些与Silverlight相关的实验来丰富您的Silverlight技能，这些实验的内容可以从下面这个站点找到：

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

WindowsPhone开发人员使用的工具更加熟悉：

针对WindowsPhone的MicrosoftVisualStudio2010Express版本和WindowsPhoneEmulator。

这些就是您创建和测试任何可被管理的WindowsPhone应用程序所需要的工具。

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

利用针对WindowsPhone的MicrosoftVisualStudio2010Express和WindowsPhoneEmulator编写、测试、部署和调试WindowsPhone应用程序的。

先决条件

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

用于WindowsPhone的MicrosoftVisualStudio2010Express或者是MicrosoftVisualStudio2010WindowsPhoneDeveloperTools

WindowsPhone开发者工具

注释:

您可从该网址下载工具

安装

为了方便，本实验手册中的大部分代码以VisualStudio代码段的形式提供。

要安装代码段:

在lab's下的Source\Setup文件夹，执行.vsi安装程序。

注释:

如果你在执行代码片段的安装程序时遇到问题，你可以通过拷贝Source\Setup\CodeSnippets文件夹下的所有.snippet文件到目录:

\MyDocuments\VisualStudio2010\CodeSnippets\VisualC#\MyCodeSnippets来进行手动安装代码段

使用代码段

利用这些代码段，您实际上已经获得了编程操作所会用到的所有代码。

这个实验文档将会准确的告诉您何时使用这些代码。

例如

图表1

使用VisualStudio代码段把代码插入到你的工程里

为了把代码段添加到VisualStudio中，你只要把光标放在你想插入的代码上.开始输入段的名字（没有空格和连字号），看到IntelliSense显示的段名，然后当你想要的段名被选中时，敲击Tab键两次，代码将会被插入到光标的位置。

图表2

开始输入段名

图表3

敲击Tab键来选中高亮的段

图表4

再次敲击Tab键来展开段

使用鼠标而不是键盘来插入代码段：

在你想插入代码段的地方点右键，选择MyCodeSnippets下的InsertSnippet，然后从列表中挑选相关的代码段。

想学习更多的VisualStudio代码段，包括如何创建自己的代码段，请参考

练习

本实验手册包含以下练习:

1.利用MicrosoftVisualStudio2010Express为WindowsPhone创建WindowsPhone应用程序

2.在VisualStudio中创建拼图板

3.利用独立存储来保持游戏状态

完成此实验需耗时:

60分钟。

练习1:

利用MicrosoftVisualStudio2010Express为WindowsPhone创建WindowsPhone应用程序

在这个练习中，您将学会如何创建、测试、部署和运行您的第一个WindowsPhone应用程序。

您将会学会如何使用WindowsPhone开发者工具，包括：

用于WindowsPhoneIDE的免费工具MicrosoftVisualStudio2010Express和WindowsPhoneEmulator。

任务包括为WindowsPhone工程创建一个新的Silverlight，设计应用程序的起始页面，提供一些基础的容错处理。

您同样将会把应用程序运行在工作站的WindowsPhoneEmulator上。

注释:

本次动手实验的步骤阐明了WindowsPhone上MicrosoftVisualStudio2010Express的使用过程，但是它们同样适用于带WindowsPhone开发工具的MicrosoftVisualStudio2010。

通常，操作指南里提到的VisualStudio，对这两个产品都适用。

任务1–在VisualStudio中创建一个WindowsPhone应用程序工程

这个任务中，您将会利用针对WindowsPhone的MicrosoftVisualStudio2010Express工具内嵌的模板来创建一个WindowsPhone应用程序工程的Silverlight，可以把这做为您第一个要开发的WindowPhone应用程序的起点。

4.从操作系统的Start|AllPrograms|MicrosoftVisualStudio2010Express|MicrosoftVisualStudio2010ExpressforWindowsPhone中启动用于WindowsPhone应用程序开发的MicrosoftVisualStudio2010Express。

VisualStudio2010:

从操作系统的Start|AllPrograms|MicrosoftVisualStudio2010启动VisualStudio2010。

5.在 File菜单，选择NewProject。

VisualStudio2010:

在 File菜单，指向New然后选择Project。

6.在 NewProject对话框，从安装的模板列表里选择SilverlightforWindowsPhone类别，然后选择WindowsPhone应用程序模板。

把name栏改为WindowsPhonePuzzle，同时把location设为在实验目录下Source文件夹中的Ex1-CreatingWP7Apps。

更改solutionname为Begin，然后点击OK。

图表5

在用于WindowsPhone的MicrosoftVisualStudio2010Express中创建一个新的WindowsPhone应用程序

注释:

如果您已经完成培训教材中HelloPone的实验，您可能已经对下面的材料非常熟悉，可能会直接创建一个begin解决方案执行这个练习中任务3的操作。

7.在SolutionExplorer中，查看基于WindowsPhone应用程序模板产生的解决方案的结构。

VisualStudio解决方案是该解决方案下所有工程项目的容器；本例中的解决方案只包含了一个名为WindowsPhonePuzzle的SilverlightWindowsPhone工程项目.

图表6

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

注释:

SolutionExplorer允许用户在解决方案或工程项目中查看其包含的项（Item）以及对项进行管理操作。

要启动SolutionExplorer，在键盘上按下CTRL+W,S或者在View菜单，选择OtherWindows|SolutionExplorer。

WindowsPhonePuzzle项目包含以下项（Item）:

项

描述

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

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

Referencesfolder

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

8.首先，在SolutionExplorer中右键单击App.xaml并选择ViewDesigner。

注意这个文件的XAML标记，它有一个叫Application的根元素，在这个根元素中有一个叫Application.Resources的段。

此处，您可以定义应用程序级别的资源，例如整个应用程序使用的颜色、画笔以及样式对象。

这段XAML代码初始化了Application的ApplicationLifetimeObjects属性，创建了一个PhoneApplicationService对象。

PhoneApplicationService类提供了应用程序不同生命阶段的访问功能。

包含了对应用程序处于空闲状态的管理，也包含了当应用程序处于有效或无效状态时的管理。

图表7

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

注释:

App.xaml文件，连同其代码隐藏文件App.xaml.cs，共同定义了Application类的实例。

这个类封装了用于WindowsPhone的Silverlight，并提供了一个入口点。

9.现在,在SolutionExplorer中右键单击App.xaml并选择ViewCode来打开一个代码隐藏文件。

请注意，在Application的派生类的构造函数中已经有一个针对UnhandledException事件的句柄。

在后面的实验中，您将会更新模板生成的句柄来实现跳转到一个错误页面及显示错误信息的功能。

Application类的RootFrame属性标识了应用程序的启动页面。

所有的WindowsPhone应用程序都有一个最顶层的容器元素，它的数据类型是PhoneApplicationFrame。

这个框架承载了一个或多个用来标识应用程序内容的PhoneApplicationPage元素，同时它还被用来处理不同页面之间的导航切换。

图表8

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

注释:

以WindowsPhone应用程序模板为基础的Silverlight所生成Application类，除了对上述事件的句柄外，还包含了对Launching和Closing事件的句柄。

您可以通过更新这些方法的代码来实现当WindowsPhone应用程序启动和关闭过程中执行自己定制过的代码。

10.新生成的工程项目包含一个缺省的文件，该文件里包含了用来定义应用程序主用户界面的XAML标记。

用户如果要在designer中查看这个文件，则需在SolutionExplorer中右键单击MainPage.xaml。

默认状态下，designer会把这个文件用分隔视图显示。

一个窗口显示XAML标记，另一个窗口显示了所见即所得的用户界面元素设计视图。

模板中显示的是应用程序的名称和标题，您可以根据需要删除它们。

除此之外，XAML文件还可提供给您一个空白的类似画布的操作区域，您可以通过添加控件来创建自己的应用程序的用户界面。

图表9

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

注释:

可扩展的应用程序标记语言（XAML）是一种声明性语言。

您可以利用声明XAML标记来创建可见的用户界面元素。

然后再利用一个代码隐藏文件对XAML中声明的事件做出反应，并操作在XAML中已经声明的对象。

用一种基于XAML的声明性语言来创建接口，从原型到生产整个过程都是非常直观的，特别是对那些有网页设计和技术背景的人来说更是如此。

11.ApplicationIcon.png文件包含的图标文件，就是那些在电话设备上快速启动页面中代表应用程序的图标。

您可以在SolutionExplorer上右键单击该项，用在你机器上注册的图像编辑应用程序来打开它，例如,Paint.exe。

注释:

VisualStudio2010中,在SolutionExplorer上右键单击图标文件，该文件会在内嵌的图像编辑器中打开。

12.一个WindowsPhone应用程序通常需要用到基础平台或者其他类库来提供服务。

要先使用这个优势功能，应用程序需要首先引用实现这些服务的程序集。

要显示一个项目工程引用的程序集，在SolutionExplorer中展开References节点，然后查看程序集列表。

它包含了Silverlight一般的程序集以及具体到WindowsPhone平台的程序集。

图表10

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

13.项目工程的Properties视窗是编辑WP清单文件的唯一方式，正如下表所示。

想打开这个窗口，在SolutionExplorer中右键单击WindowsPhonePuzzle项目然后选择Properties。

图表11

项目属性窗口

注释:

WindowsPhone项目属性窗口允许您更改一些电话程序专用的属性。

这些属性关系到应用程序在电话设备上的部署和外观效果。

所有相关参数被存储在WMAppManifest.xml文件中。

即使您试图手动更改过这个XML文件，只要在这个对话框中对您的项目进行更改设置并保存，其结果都会自动覆盖您之前的手动更改。

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

此时，应用程序并不能做什么，但是它已经做好第一次测试运行的准备。

在这个任务中，您会构建一个应用程序，并把它部署到WindowsPhoneEmulator然后执行它，通过这些您就能了解一个典型的开发过程。

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

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

VisualStudio2010:

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

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

图表12

在VisualStudio中构建（Build）应用程序

17.眼下您应该不会发现任何错误，但是如果项目包含编译错误，那么这些错误信息将会出现在Output窗口中。

要处理这些类型的错误，您可以利用ErrorList视窗。

这个视窗能够以列表的形式显示错误、警告以及编译器产生的信息，您可以根据错误的严重性来排序或者过滤。

此外，你可以通过双击列表中的条目来自动打开相关源代码文件并切换到错误的源点。

要打开ErrorList视窗，在View菜单，指向OtherWindows然后选择ErrorList。

VisualStudio2010:

点击View菜单，选择ErrorList来打开ErrorList视窗。

图表13

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

18.验证部署的目标是WindowsPhoneEmulator要做到这样，确保在工具栏上StartDebugging按钮旁的SelectTarget下拉框中的值是WindowsPhone7Emulator。

图表14

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

注释:

当您从VisualStudio中部署您开发的应用程序时，您既可以选择一个真实的设备或者是.WindowsPhoneEmulator。

19.在WindowsPhoneEmulator上按F5来启动应用程序。

注意设备模拟器窗口的出现，同时在VisualStudio建立模拟器环境和部署应用程序镜像时会出现一个停顿。

图表15

部署一个应用程序镜像到WindowsPhoneEmulator

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

图表16

在WindowsPhoneEmulator中运行应用程序

21.直到您完成了创建用户界面以及应用程序逻辑的编程设计，否则您在当前应用程序的页面基本上什么都不能做。

按下SHIFT+F5或者工具栏上的Stop按钮来分离调试器并终止调试会话。

不要关闭模拟器视窗。

图表17

终止调试会话

提示:

当您启动一个调试会话时，它将会花费一些时间来搭建模拟器环境以及启动应用程序。

为使您的调试过程简单而有效，当您在用VisualStudio编写源代码的时候，请避免关闭模拟器。

如果模拟器一直处于运行状态，它只会用很少的时间来完成停止当前会话、编辑源代码、构建应用程序、部署新应用程序镜像、重新启动调试会话这一整个过程。

任务3–为主页设计用户界面

在这个任务中您将会为应用程序的主页面创建用户界面。

这个页面显示一个版权页。

它包含一个代表应用程序的图片以及离开版权页导航进入到游戏页面的按钮。

22.首先，在工程里新建一个文件夹来保存应用程序中所使用的图片。

在SolutionExplorer窗口中，右键单击WindowsPhonePuzzle工程节点，指向Add并选择NewFolder。

为创建好的文件夹命名为Assets。

注释:

当您添加了一个新的文件夹，SolutionExplorer窗口中将会显示一个以占位符命名的文件夹，您可以通过输入一个新的名称来替换占位符。

如果您意外的放弃编辑模式，您可以按F2重新回到编辑模式。

图表18

SolutionExplorer窗口展示了新Assets文件夹

23.现在，向工程中添加应用程序所需的图片。

在SolutionExplorer窗口上，右键点击Assets，选中Add然后选择ExistingItem。

在AddExistingItem对话框，点击browse并定位到实验目录下Source文件夹中的Assets，然后按住CTRL键不放，鼠标点击SplashImage.jpg和Puzzle.jpg，选中这两个文件后点击Add。

注释:

在VisualStudio中，您可以为自己在WindowsPhone工程中创建的Silverlight添加资源文件，然后可以通过设置BuildAction的值来完成对这些文件的部署。

项目工程中每个被添加的图片BuildAction值都要被设为Resource，这些图片在进行工程汇编时会被嵌入文件中。

24.试图查看某个图片，您可以在SolutionExplorer上右键单击该项，用在你机器上注册的图像编辑应用程序来打开它，例如Paint.exe。

注释:

VisualStudio2010中,在SolutionExplorer上右键单击图标文件，该文件会在内嵌的图像编辑器中打开

图表19

应用程序包中的图像嵌入资源

25.打开应用程序的主页面，在SolutionExplorer窗口，右键单击MainPage.xaml将其加载到designer中。

26.在Design视图，选择TextBlock并将其命名为ApplicationTitle然后按F4。

在Properties窗口，更改Text属性——将所有属性按照类排序后，其位置在Common分类中——为其添加值‘WINDOWSPHONEPUZZLE’。

图表20

在Properties窗口配置UI元素

注释:

您可以通过点击Properties窗口工具条上的图标来为所有属性进行按照类别或者属性排序。

27.接下来，选择名为PageTitle的TextBlock并替换其Text属性值为‘start’。

28.在由WindowsPhone应用模板产生的XAML标记程序中，定位名为LayoutRoot的Grid容器元素。

它是用来布置页面上的元素。

注意rootGrid元素包含其他嵌入的元素,这些元素通过定义一个Grid.Row属性被分配到外部Grid里的不同行。

找到名为C