[翻译]WP7 QuickStart-第一篇-创建第一个Windows Phone应用程序

 

【译者注:这篇文章是翻译自微软官方的wp7 quickstart的第一篇，部分内容加入了自己的理解和表达习惯。而翻译此系列的主要目的一是为了练习英语，二是让自己作为一个bi开发者对wp7的开发有一个了解。部分翻译不当的地方望各位高人指出批评指正】

 

原文地址：

http://create.msdn.com/en-us/education/quickstarts/get_started_creating_a_windows_phone_application

 

windows phone包含很多工具可以让你创建和发布应用程序。此部分主要描述其开发工具，以及如何创建windows phone应用程序。

此部分包含如下内容：

安装开发工具

创建项目

填加一个textblock

运行程序

在手机上运行程序

填加图形

填加按钮

填加动画

发布到marketplace

 

安装开发工具

所有windows phone相关的开发和发布的相关必要工具都可以下载。下面的表格可以根据你的情况来选择，然后选择相关的链接来安装这些工具：

针对于开发人员：

如果你是c#开发人员，需要安装下面的工具：

1. x?familyid=04704acf-a63a-4f97-952c-8b51b34b00ce&displaylang=en" style="color: rgb(26, 139, 200); text-decoration: none; ">windows phone 开发人员工具

2. windows phone 开发人员工具，2011年1月更新版

针对于vb开发人员：

【此部分省略】

 

创建项目

安装完应用包后，最简单的方法创建你的第一个应用程序的方法就是通过visual studio。【译者注：也就是说，也可以不通过vs2010，比如在记事本里写好代码后然后用命令行的形式编译，当然这种方法很少有人用】

1. 单击开始按钮，执行microsoft visual studio 2010 express for windows phone.【译者注：通常我们直接运行vs2010就可以了，原作者这里考虑到了express用户】

2. 单击file，选择new project

这里会打开新建项目对话框。左侧的对话框是不同的项目模版。当选择silverlight for windows phone之后，中间的区域会显示你可以创建的不同的程序类型。

3. 在左侧，选择silverlight for windows phone

4. 在中间选择windows phone application template

5. 命名项目为helloworld_phone然后点击ok【译者注：项目名自己可以随便写】

然后，一个新的silverlight phone项目就被创建了，并且会打开设计模式。

通常来说，visual studio会把界面分成三部分。（根据你的设置不同，你的界面看上去会有点不同）。左侧是设计视图，中间是xaml视图，右侧是解决方案。

在解决方案浏览器中，会有若干个项目文件。你在本文中用到的是mainpage.xaml和mainpage.xaml.cs。其中xaml文件是程序的用户界面定义部分。xaml是一个基于xml的声明式语言，ui的创建和布局就是通过它。关于xaml的更详细的信息可以参考msdn的xaml概览。如果展开这个xaml文件，可以看到一个c#的代码后置文件，名称为：mainpage.xaml.cs。代码后置文件通过partial class的方式跟其xaml文件组织在一起并且包含xaml文件的逻辑。对于代码后置和partial class的更多信息可以参考msdn的这个链接。ui和代码的分离可以让你已声明式标记语言xaml的方式创建用户界面元素，并且用分开的代码后置文件来响应和操作你在xaml里声明的对象。这种分开的方式能让开发人员和设计人员（美工）很容易的在一个项目中协同工作。

 

填加textblock

下面填加一个textblock来显示”hello world”信息。填加它的方式很多，这里使用工具栏和设计视图：

1. 如果mainpage.xaml还没有打开，在解决方案管理器里双击它。

2. 在view菜单中，点击other windows，选择toolbox，这样工具栏就出现了。

3. 调整或者固定工具栏的大小，这样就可以同时看到工具栏和设计视图

4. 在工具栏中，拖拽一个textblock到手机界面的主界面中。

在xaml视图中，可以看到textblock已经被填加到了grid下面.

<!--contentpanel - place additional content here-->

<grid x:name="contentpanel" grid.row="1" margin="12,0,12,0">

<textblock height="30" horizontalalignment="left" margin="12,6,0,0"

name="textblock1" text="textblock" verticalalignment="top" />

</grid>

5. 打开属性窗体，如果界面上没有，点击view菜单，other window，然后选择properties window。

6. 在设计视图中，确保textblock已经是被选中的。

7. 在属性窗体properties windows中，设置text属性为hello world!

8. 设置字体大小fontsize属性为50

9. 设置高度height属性为70

此时设计模式应该是这个样子了。

 

运行你的第一个程序

现在已经创建了你的第一个windows phone silverlight应用程序，然后你就可以运行它了。可是使用内置的windows phone模拟器。借助这个模拟器你可以在不部署到真机的情况下，在桌面上快速的测试和调试你的程序。

启动模拟器，你需要为程序打开一个调试会话。visual studio就可以运行这个模拟器并且把程序加载到模拟器中。

1. 按f5或者debug->start debugging，打开调试模式。

如果程序有错误的话visual studio会在这里告诉你。几分钟后，像下面图片里的浏览器界面就出现了。

第一次打开模拟器总是需要比较长的时间。为了让后面的调试速度更快些，尽量不要关闭模拟器窗体，只要在visual studio里选择debug->stop debugging就可以了。这样模拟器还会运行在那里，所以后续的调试就会更快一些。

2. 点击debug->stop debugging终止调试。

 

在windows phone中运行程序

在windows phone中运行程序，需要用windows phone developer registration tool（wp开发人员注册工具）来给手机解锁。这个工具在开始菜单下的windows phone developer tools下。另外，还需要为app hub付费。

1． 如果没有app hub帐号，就在这里注册一下。

2． 打开zune

3． 连接手机到电脑

4． 执行windows phone developer registration tool，输入windows live id信息以跟app hub帐号关联

5． 在注册向导里，输入电话的标识信息

然后你的电话就被解锁并且可以接收visual studio部署的程序

6． 在visual studio中，通过在deployment target(部署目标) 中选择程序是备份到模拟器还是手机中

7． 

8． 选择windows phone device，就可以把程序部署到已经解锁的设备中。

注意：

zune必须一直在运行，并且手机的是连接到电脑，屏幕是处于解锁状态，这样部署才会成功。

 

填加图形

在silverligh中，可以用shape类来填加各种图形。比如最常见的rectangles，和稍微复杂点的polygon。brushes在silverlight中用来给它们着色。关于graphics和brushes的更多信息可以参考graphics quickstart和brushes quickstart。

下面就给textblock外面套一层stackpanel。panel是一个用来组织ui的容器，每个应用程序最少都应该有一个。stackpanel会依次组织其内部的元素，通过orientation这个属性来决定是横向还是纵向的显示它们。grid和canves元素允许内部的元素自己定义其位置。

这里用到的是ellipse。它会在stackpanel中显示在textblock后面。然后再依次指定它的width,height和fill属性。对于fill属性，必须对其指定brush。

这里用xaml视图来完成。

1. 选择工具栏窗体

2. 在xaml视图中，定位到刚才填加的textblock的部分

3. 用下面的xaml代码替换textblock部分。

xaml

<stackpanel>

<textblock fontsize="50" text="hello, world!" />

<ellipse fill="blue" height="150" width="300"

name="firstellipse" />

</stackpanel>

4. 按f5运行程序

然后会看到如下图的效果，目前还没有定义用户操作，所以看上去还较单一，当然也可以自己尝试填加更多的控件。

5. 选择debug->stop debugging终止调试。

 

填加一个按钮

下一步就是要填加一个按钮。控件是用户和silverlight程序交互的一种方式。目前silverlight已经包含了很多的控件比如button，textbox和listbox等。

填加按钮通常有两个步骤，先在xaml中填加一个button元素，然后再为用户相应事件定义逻辑代码，比如按钮的单击事件。

1. 在xaml中，在<ellipse/>后加入如下代码。

xaml

<button height="150"

width="300"

name="firstbutton" content="tap" />

name属性给的值是firstbutton，这样就可以通过后台代码来访问到这个button实例。content属性指定在按钮上出现的文本。然后又定义了其高度和宽度的属性。

silverlight是一个事件驱动的应用程序模型。当类似按钮单击或者应用程序加载发生时，事件就被触发了。可以通过填加event handler代码，当发生一个事件然后需要做某种处理的时候。这里会为按钮填加一个click事件的处理代码。

在visual studio中可以按照下面的方法填加事件处理代码。

2. 在设计视图中，选择按钮

3. 在属性面板中，点击事件标签，按钮所支持的时间会被显示出来。

4. 双击click事件

这是后置代码文件出现，可以看到firstbutton_click处理代码已经被自动填加。

5. 填加如下代码到按钮单击事件中。

c#

private void firstbutton_click(object sender, routedeventargs e)

{

if (firstbutton.content as string == "tap")

{

firstbutton.content = "tap again";

}

else

{

firstbutton.content = "tap";

}

}

这部分代码定义的操作是，当按钮被单击的时候，按钮上的文本会在“tap”和“tap again”中来回切换。

6. 按f5运行程序。

下面是一个实时演示，可以点击一下按钮看看运行效果。

在xaml视图中，可以看到click属性已经被填加到了button中。

xaml

<stackpanel>

<textblock fontsize="50" text="hello, world!" />

<ellipse fill="blue" height="150" width="300"

name="firstellipse" />

<button height="150"

width="300"

content="tap"

name="firstbutton"

click="firstbutton_click" />

</stackpanel>

 

填加动画

最后一件事就是填加动画。这里为ellipse填加一个非常简单的动画。这里只是简单的介绍一下动画，你可以先不用去理解其中的细节，当然关于动画的更多参考，可以单击这里。

创建动画的三个步骤：创建一个storyboard，创建动画，然后在代码中启动动画。

storyboard是一个组织动画的容器，在storyboard中，动画可以被启动或者终止。

在silverlight中动画通过在一段时间更改某属性值的方法实现。storyboard.targetname属性定义被应用到哪个元素上。storyboard.targetproperty定义哪个属性被定义了动画效果。to属性定义动画完成时这个属性的值【译者注：也就是从属性的一个值变成to所设定的值从而实现动画小姑，比如在1秒内宽度从200到400】，autoreverse指定动画效果是否重复显示。duration属性指定动画完成的时间。比如，1秒的动画是这样定义的---“00:00:01”，0小时0分钟1秒。

1. 在解决方案管理器中，双击mainpage.xaml

2. 在xaml视图中，用下面的代码替换stackpanel部分。

xam中创建了一个stackpanel.resource节来包含storyboard元素。这个storyboard名字叫firststoryboard，这样就可以在代码里访问到它。动画改变ellipse的width属性，它是一个double类型，所以使用的是doubleanimation。storyboard的targetname属性设置成了firstellipse对象。targetproperty设置成了ellipse的width属性。to设置成了1，这样动画运行的时候宽度属性就会从200变成1。autoreverse属性设置成了true，这样动画就会被重复播放。duration设置成了1秒。

然后，在代码中通过调用storyboard的begin方法来启动动画。

3. 在mainpage.xaml.cs中，在按钮单击事件中调用firststoryboard的begin方法。

c#

private void firstbutton_click(object sender, routedeventargs e)

{

if (firstbutton.content as string == "tap")

{

firstbutton.content = "tap again"

}

else

{

firstbutton.content = "tap";

}

firststoryboard.begin();

}

4. 按f5运行程序。

下面是程序的一个实时演示。

 

发布到marketplace

完成程序之后，你或许会考虑把程序发布出来供别人免费下载或者出售。可以通过marketplace来实现。关于如何发布，请。

 

来自博客园的aspnetx宋卫东