Windows Phone 8初学者开发—第19部分：设置RecordAudio.xaml页面

zhouandtao

　　原文地址:  http://channel9.msdn.com/Series/Windows-Phone-8-Development-for-Absolute-Beginners/Part-19-Setting-up-the-RecordAudioxaml-Page
　　系列地址: http://channel9.msdn.com/Series/Windows-Phone-8-Development-for-Absolute-Beginners
　　源代码: http://aka.ms/absbeginnerdevwp8
　　PDF版本: http://aka.ms/absbeginnerdevwp8pdf
　　现在我们已经可以导航到新的RecordAudio.xaml页面，让我们把注意力放在该页的布局上。如果您回想一下用户界面的草图，我们设想了一个卷盘图像，它会进行旋转以指示应用程序正在录音。会有一个按钮启动录音，一个按钮进行回放。最后，会有一个应用程序栏负责保存声音并对声音命名。在本课中，我们将讨论页面的布局，声音录制功能和动画将在后续课程中进行讨论。
　　所以本简短课程的计划非常明确：

• 我们将通过绑定到本地资源对品牌进行更改。
  
• 我们将添加按钮和椭圆(ellipse)，然后在椭圆上添加一些形状以使它看上去像一个老式的卷盘。
  
• 我们将添加一个应用程序栏，在前面课程中我们已经学会了这方面技能。
  

1. 执行简单的品牌更改
　　我将从修改应用程序顶部的文本开始：

• 我们将通过之前已经多次使用并已熟悉的语法从LocalResources.resx文件获取应用程序的名称。
  
• 目前我将文本属性硬编码为"record audio"。
  

　　这将产生以下结果：

2. 执行主控件的基本布局
　　我将在名称为ContentPanel的Grid中添加以 下XAML：

• 我们将使用StackPanel以垂直方式堆叠控件。
  
• 我们将使用ToggleButton(切换按钮)，它有两个状态：选中和取消选中。我们的想法是希望能够打开和关闭录音。当ToggleButton切换状态时，我们希望能够处理引发开始或结束录音过程的事件。
  
• 我们将创建一个用于定位Ellipse的Grid。我们将设置Ellipse的颜色为内置的PhoneAccentBrush颜色，它指当前手机中设定的主磁贴的颜色。
  
• 我们将添加最后一个按钮，它用于播放最近录制的声音。
  

　　这将产生以下结果：

　　这里的Ellipse控件还不完整，我们希望它看上去像一个老式的盘式录音机。我们可以通过在XAML中使用几个较小的形状(一个位于中心的小椭圆以及与位于外部主椭圆的不同位置对齐的四个小矩形)完成这项工作。

　　上述大部分代码是自我解释的。我们使用一系列对齐和边距以在主椭圆上定位这些形状。
　　如果一切顺利，结果应如下所示：

3. 添加应用程序栏
　　我们将取消由文件模板提供的代码的注释以启用页面上的应用程序栏。在RecordAudio.xaml.cs文件中：

　　上述代码对您来说并非是新东西。我之前已经解释过其中大部分代码，但是具体到这个应用程序栏：

• 取消对BuildLocalizedApplicationBar()调用的注释。
  
• 取消BuildLocalizedApplicationBar()方法模板的注释 。
  
• 创建一个新的ApplicationBarIconButton，并设置其IconUri属性为save.png文件，设置其text属性为AppBarSave，它位于AppResources.resx文件中并在本系列前面被创建。
  
• 为Click事件创建并关联一个新的事件处理程序方法(见#7)，当输入+=字符时，忽略建议的名称而使用自己命名的名称，然后使用悬停于蓝色虚线上的技术显示上下文菜单选项以生成一个方法存根。
  
• 向应用程序栏添加recordAudioAppBar按钮。
  
• 使应用程序栏可见。
  
• 这是您在步骤4中创建的事件处理程序存根。
  

　　运行应用程序并导航到该页面时将显示该应用程序栏，在它上面有一个标题为"save"的小磁盘图像。
回顾
　　综上所述，本课没有十分重要的内容，只是使用我们以前学过的技术来实现页面的特定布局。您见到的唯一新的控件是ToggleButton，它将可以被选中或取消选中而不是像按钮只能被点击/单击。