菜鸟学Windows Phone 8开发(1)——创建第一个应用程序

原文 /article/5664248.html

本系列文章来源MSDN的 面向完全新手的 Windows Phone 8 开发 主要是想通过翻译本系列文章来巩固下基础知识顺带学习下英语和练习下自己的毅力（因为打算每天翻译一篇，但是发现翻译这篇花费了好多时间，所以可能后面可能会两天翻译一篇，希望多与大家交流）

原文地址：http://channel9.msdn.com/Series/Windows-Phone-8-Development-for-Absolute-Beginners/Part-3-Writing-your-First-Windows-Phone-8-App
源代码：http://aka.ms/absbeginnerdevwp8

[align=left]现在我们已经安装好了开发工具，我们能创建我们的第一个wp8应用。[/align]
[align=left] [/align]
[align=left]以下是我们的计划：[/align]
[align=left]1、我们将创建一个新的Windows Phone应用项目；[/align]
[align=left]2、我们做一些简单的编辑，例如删除注释并且添加一个MediaControl和一个Button并添加style(style it up)；[/align]
[align=left]3、写一个Button的Click事件处理；[/align]
[align=left]4、在Button的Click事件里面我们将播放一段wav文件。[/align]
[align=left] [/align]
[align=left]第一步：创建一个新的Windows Phone项目，命名为PetSounds[/align]
[align=left] [/align]
[align=left]我希望你已经在channel9上看其他菜鸟系列文章的时候已经掌握了新建项目、文件等技巧。接下来我不回花时间解释这些，如果有不熟悉的你可以去复习C# for Absolute Beginners系列。[/align]



[align=left]1、文件[/align]
[align=left]2、新建[/align]
[align=left]3、项目[/align]
[align=left] [/align]
[align=left]新建项目对话框：[/align]



[align=left]1、确保你是在Windows Phone项目模版开发中；[/align]
[align=left]2、选择Windows Phone应用模版[/align]
[align=left]3、重命名为：PetSounds[/align]
[align=left]4、确保项目解决方案的名字也是PetSounds[/align]
[align=left]5、点击OK[/align]
[align=left] [/align]
[align=left]接下来你能看到下面的对话框：[/align]



[align=left]因为这个系列讲的是WP8开发，如果你想要项目支持以前的版本的话你可以选择不同的目标版本。[/align]
[align=left] [/align]
[align=left]第二步：删除无用的注释使我们更容易阅读（navigate through）我们的代码[/align]
[align=left]过 一会儿，这新建的项目就加载在解决方案窗口中，MainPage.xaml呈现在Visual Studio的主窗口中，注意这个screen是叫做page，在MainPage.xaml中，在我们的第一个应用中只有一个页面，但是在以后的应用中 我们将会增加多个页面并且在相互之间导航。[/align]
[align=left] [/align]
[align=left]我假设你没有在项目模板中做任何修改，你将在设计器中看到下面的内容：[/align]



[align=left]1、在左边，你将看到一个可视化的设计器，然而我们能用它作为我们布局和添加控件的主要工具，用他来展现我们在里面做的所有事情。。[/align]
[align=left]2、XAML编辑窗口在右边，我我们通常手写XAML代码，我们在XAML中做的修改将会反应在可视化设计器中，反之（vice versa）也是这样的，他们是两个视角（perspectives），但是代表着同样的东西。[/align]
[align=left] [/align]
[align=left]在窗口下方（beneath the panes）有许多工具：[/align]



[align=left]和中间位置：[/align]



[align=left]随时可以实验他们，他们是自己扩展的，你需要花时间去学习了解他们，然而这不是我们这次课程的重点，我们快速过这些，在XAML窗口，我想要删除大段的注释，以便我们能更好的阅读代码，我已经发现了他们的位置如图所示：[/align]



[align=left]你可以毫无疑问的删除他们，但是确保他们是以<!--开始-->结尾；[/align]
[align=left]你的XAML应该看起来像这样：[/align]



[align=left]在这节课中我们将集中关注在36行的ContentPanel，添加新的XAML代码在Grid元素中。[/align]
[align=left] [/align]
[align=left]第三步：在ContentPanel中添加一个Button并且给他添加Style[/align]
[align=left]添加下面的代码在Grid中：[/align]



[align=left]一旦你添加了<Button>Quack</Button>代码，你就可以在可视化设计器中看到改变：[/align]



[align=left]按钮几乎占据(take up practically)整个屏幕，这不是我们想要的，我们需要通过设置他的Width和Height属性来限制他的尺寸。[/align]



[align=left]200代表200像素[/align]
[align=left]可视化设计器也变为同样的尺寸。[/align]



[align=left]我们移动Button到左上角（标题的下面）并且修改他的背景颜色为红色[/align]



[align=left]我们也给Button命名了一个名字，这样的话我们就能在后台c#代码中访问他，命名是可选的，我们只需要命名我们需要在c#代码中访问的元素，现在我们知道等下我们需要用到所以我们给他命名一个程序化（programmatic）的名字。[/align]
[align=left]现在可视化设计器将变为以下效果：[/align]



[align=left]这是一个伟大的开始，我们能通过设置元素的属性来操纵对象的视觉效果（manipulate the visual qualities of objects）[/align]
[align=left] [/align]
[align=left]第四步：添加一个MediaElement控件[/align]
[align=left] [/align]
[align=left]接下来让我们在Button下面添加一个MediaELement控件：[/align]



[align=left]你能注意到我们能添加空白和空行在我们的XAML代码中，并且他不会有任何影响，Visual Studio会自动缩进（indent）和空个代码来增加可读性，但是他不会影响页面的渲染（rendered）。[/align]
[align=left]我们还没有设置MediaElemen控件的Source属性，因为我们的项目没有任何可选的源（即 媒体元素，像声音文件）。[/align]
[align=left] [/align]
[align=left]第五步：添加一个wav文件作为项目的资产[/align]
[align=left]确定你已经下载好了这个音乐伴奏文件，你能从下载这个文档或者观看这个视频的地方下载。[/align]
[align=left]我已经解压这个文件C9Phone8文件在我的文档目录下面，包括3个子文件夹：[/align]



[align=left]我们想要用包含在PetSounds_Assets文件夹里面的资产，在这个文件目录下有两个子文件，我们把Audio子文件复制到我们的项目：[/align]



[align=left]复制到我们项目的Assets目标文件夹下面：[/align]



[align=left] [/align]
[align=left]将我们需要复制的文件拖拽到目标问价夹Assets后：[/align]



[align=left] [/align]
[align=left]在应用中有很多声音文件，我们将要访问一个指定的文件Duck.wav，我们将它的值赋值给MediaElement控件的Source属性。[/align]



[align=left] [/align]
[align=left]首先，注意我们填写的路径是相对MainPage.xaml根目录的相对路径，[/align]
[align=left]第二，注意我们设置的其他两个属性的值，我设置了Volume为1，意思是最大音量，在Windows Phone API中许多设置都是0.0最小1.0最大0.5中间，这些值一般都是double类型。[/align]
[align=left]第三，我们需要在后台代码中访问这个控件来触发播放这个声音当有人点击Button的时候，因此我们需要给Media控件命名，你可能想知道x:前缀（prefix）什么意思，我在后面的课程将会讲到，现在你只需要有个印象就可以了。[/align]
[align=left]最后，我设置了AutoPlay属性为false，如果我设置为true，当我们的程序加载完成后声音会立刻播放。这不是我想要的，我想要当我点击Quack按钮的时候，接下来我将写代码来实现它。[/align]
[align=left] [/align]
[align=left]第六步：给Button添加Click事件处理[/align]
[align=left]在Button的XAML代码中我们添加Click=“”属性后Visual Studio的自动感知功能会提示我们创建一个新的事件。[/align]



[align=left] [/align]
[align=left]确保这个选项是高亮的，我将点击Enter键来输入一个事件名称。[/align]



[align=left]我想要写代码来执行点击事件，因此我将导航到后代代码中的PlayAudioButton_Click方法。[/align]
[align=left]在Click属性那一行任何地方点击右键选择导航到事件。[/align]



[align=left]这样将会打开一个叫MainPage.xaml.cs的文件。[/align]
[align=left]如 果你是在Visual Studio新建Windows，WEB，Phone应用程序，你将会发现我们创建的Page包括两部分，XAML设计器窗口允许我们编写XAML代码， 关联的cs文件代码允许我们写C#代码。这是两个相同的概念，以后会越来越多，在Visual Studio中，你的光标（cursor）将会在打开和关闭PlayAudioButton_Click事件的大括号中。[/align]



因为这个代码块将执行每当有人点击按钮的时候触发MediaElement播放我们设置在其Source属性上的声音,即Quack.wav文件。



[align=left]我们用MediaElment元素的名字QuackMediaElement访问它，我想访问他的Play方法来启动（kick off）播放源，也即Quack.wav文件。[/align]
[align=left]现在，让我们来测试这个应用程序。[/align]
[align=left] [/align]
[align=left]第七步：启动应用程序[/align]
[align=left]是的，这对于你来说已经很熟悉了，你可以使用像控制台程序那样调用Debug方法来运行程序，通过点击工具栏上的那个播放按钮或者按F5.[/align]



[align=left]接下来你将看到Windows Phone模拟器，他是一个运行wp8系统的虚拟机。你也可以认为他是一个真实的设备。然而虚拟在在这个层面上是微软用软件模拟硬件的方式。[/align]
[align=left]在本系列课程中我们将广泛使用模拟器，因为这样比使用物理设备更容易。你将会了解更多关于手机模拟器的使用。[/align]



[align=left] [/align]
[align=left]通过鼠标模拟手指在屏幕上操作，当你点击Quack按钮的时候电脑将会播放声音文件，然后你将通过耳机（headset）或扬声器（speakers）听到声音。[/align]
[align=left] [/align]
[align=left]通过点击工具条上的红色正方形按钮来停止调试。[/align]



[align=left] [/align]
[align=left]回顾：[/align]
[align=left]在 这节课中，我们创建了一个简单的播放声音应用。我们学习了如何创建Windows Phone 项目。学习了如何通过修改XAML代码来添加和配置控件，学习了如何添加资源到项目中并在代码中调用他们。以及如何添加事件来处理用户的相应。学习了 MainPage.xaml和MainPage.xaml.cs文件如何关联的。我们将学习更多在接下来的课程中，我们学习了如何触发方法来控制声音播 放。最后我们学习了如何在虚拟环境下用模拟器来测试我们的应用。[/align]
[align=left] [/align]
[align=left]然 而，有太多的想谈论，。。如果你是一个新手学习XAML，牢固的XAML基础是特别重要的，接下来的课程我将讨论XAML的功能，来建立接下来系列课程的 贯穿体系。正如我前面（at the outset）所说，接下的课程都将转移到API的调用和XAML的运用，例如WPF和Windows Stor应用程序。[/align]
[align=left] [/align]