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

原文地址:  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页面,让我们把注意力放在该页的布局上。如果您回想一下用户界面的草图,我们设想了一个卷盘图像,它会进行旋转以指示应用程序正在录音。会有一个按钮启动录音,一个按钮进行回放。最后,会有一个应用程序栏负责保存声音并对声音命名。在本课中,我们将讨论页面的布局,声音录制功能和动画将在后续课程中进行讨论。

所以本简短课程的计划非常明确:

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

1. 执行简单的品牌更改

我将从修改应用程序顶部的文本开始:

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

这将产生以下结果:

2. 执行主控件的基本布局

我将在名称为ContentPanel的Grid中添加以 下XAML:

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

这将产生以下结果:

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

上述大部分代码是自我解释的。我们使用一系列对齐和边距以在主椭圆上定位这些形状。

如果一切顺利,结果应如下所示:

3. 添加应用程序栏

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

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

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

运行应用程序并导航到该页面时将显示该应用程序栏,在它上面有一个标题为"save"的小磁盘图像。

回顾

综上所述,本课没有十分重要的内容,只是使用我们以前学过的技术来实现页面的特定布局。您见到的唯一新的控件是ToggleButton,它将可以被选中或取消选中而不是像按钮只能被点击/单击。

Windows Phone 8初学者开发—第19部分:设置RecordAudio.xaml页面的更多相关文章

  1. Windows Phone 8初学者开发—第13部分:设置LongListSelector中磁贴的样式

    原文 Windows Phone 8初学者开发—第13部分:设置LongListSelector中磁贴的样式 第13部分:设置LongListSelector中磁贴的样式 原文地址: http://c ...

  2. Windows Phone 8初学者开发—第6部分:设置应用程序的样式

    原文 Windows Phone 8初学者开发—第6部分:设置应用程序的样式 Source Code: http://aka.ms/absbeginnerdevwp8  PDF Version: ht ...

  3. Windows Phone 8初学者开发—第21部分:永久保存Wav音频文件

    原文 Windows Phone 8初学者开发—第21部分:永久保存Wav音频文件 第21部分:永久保存Wav音频文件 原文地址:http://channel9.msdn.com/Series/Win ...

  4. Windows Phone 8初学者开发的翻译终于过半

    从2013年7月19日开始,到2013年12月9日,一共花了143天时间完成了18篇Windows Phone 8初学者开发的翻译,还剩下17篇文章需要翻译,看到了完成的希望! I love Wind ...

  5. Windows Phone 8初学者开发—第14部分:在运行时绑定到真实的数据

    原文 Windows Phone 8初学者开发—第14部分:在运行时绑定到真实的数据 第14部分:在运行时绑定到真实的数据 原文地址: http://channel9.msdn.com/Series/ ...

  6. Windows Phone 8初学者开发—第12部分:改进视图模型和示例数据

    原文 Windows Phone 8初学者开发—第12部分:改进视图模型和示例数据 第12部分:改进视图模型和示例数据 原文地址:http://channel9.msdn.com/Series/Win ...

  7. Windows Phone 8初学者开发—第11部分:设置SounBoard应用程序

    原文 Windows Phone 8初学者开发—第11部分:设置SounBoard应用程序 原文地址: http://channel9.msdn.com/Series/Windows-Phone-8- ...

  8. Windows Phone 8初学者开发—第10部分:数据绑定应用程序和透视应用程序项目模板简介

    原文 Windows Phone 8初学者开发—第10部分:数据绑定应用程序和透视应用程序项目模板简介 原文地址: http://channel9.msdn.com/Series/Windows-Ph ...

  9. Windows Phone 8初学者开发—第9部分:Windows Phone 8模拟器概述

    原文 Windows Phone 8初学者开发—第9部分:Windows Phone 8模拟器概述 第9部分:Windows Phone 8模拟器概述 原文地址: http://channel9.ms ...

随机推荐

  1. samba服务器上文件名大小写

    samba服务器上文件名大小写 如果给HP_UX配置samba之后,通过windows访问有时候会发现文件名大小写不对时,请注意下述配置信息是否正确.在/etc/opt/samba/smb.conf中 ...

  2. 我的第一个REST客户端程序!

    Delphi:XE8 看了好几天的资料了,也没有弄出来一个REST程序,尝试了XE8中带的例子,也都没有搞懂.我在网上不断搜索,看是否能够找到适合自己的文章,希望能够做出来一个REST的小例子,万幸, ...

  3. LeapMotion 简介

    Leap Motion Overview Leap Motion是一种检测和跟踪hands, fingers and finger-like tools的设备.该设备在一个较近的环境中操作,精度高,跟 ...

  4. Sass入门——简介+语法格式及编译调试

    本文来自慕课网大漠. Sass简介 Sass和SCSS区别 1.后缀名不同,很好理解 2.Sass以严格的缩进语法规则书写,不带大括号和分号:而SCSS的语法规则和CSS的语法很类似. Sass: $ ...

  5. python切片练习

    这块儿没什么难的,细心一点就好 L = [] n = 1 while n <= 99: L.append(n) n = n + 2 print(L) #但是在Python中,代码不是越多越好,而 ...

  6. new[] class deconstructor

    Class class(); Class *class1=new class; class1=&class; delete class1;   // Assert 指针指向的是一个栈中的对象, ...

  7. django开发简易博客(五)

    这一节将讲述如何添加comments库与ajax的支持. 一.添加comments库 comments库是是django框架内置的一个评论库,可以快速的搭建岀一个评论系统,不过再自定义方面有些麻烦,不 ...

  8. HTML5 总结-视频-1

    HTML5 视频 视频格式 当前,video 元素支持三种视频格式: 格式 IE Firefox Opera Chrome Safari Ogg No 3.5+ 10.5+ 5.0+ No MPEG ...

  9. asp.net 开发注意的几点

    WIN7中组件服务中的DCOM配置找不到Microsoft Excel应用程序的解决办法: 这主要是64位系统的问题,excel是32位的组件,所以在正常的系统组件服务里是看不到的 可以通过在运行里面 ...

  10. WebRTC–getUserMedia & Canvas

    下面是一个使用getUserMedia接口和Canvas的drawImage方法实现的截图功能(截取视频中的一帧). 基本思路是这样子的: getUserMedia获取一个MediaStream, s ...