WP7有约（四）：课程全景 2
2012-01-13 15:15:02 作者：sandy 来源： 浏览次数：0
一般情况下，我们通过Click事件处理程序来实现单击操作的，然而，正如代码24所示的那样，列表项的最外层容器是StackPanel，它没有Click事件，怎么办？有三种可能的方案，第一种是通过StackPanel的MouseLeftButtonUp事件模拟单击操作，这种方案最简单，但不够精确，因为Click事件本身是由MouseLeftButtonDown和MouseLeftButtonUp两个事件组成的，如果你想获得更加精确的效果，可以使用Windows Phone 7 Developer Guide – Code Samples里面提供的FrameworkElementClickCommand，它不但正确处理了MouseLeftButtonDown和MouseLeftButtonUp两个事件，还提供了命令对象的绑定，最后一种是使用SL for WP Toolkit的GestureService/GestureListener组件，由于Click事件本质上是Tap手势操作，我们可以通过GestureService/GestureListener组件监听并处理这个手势操作。下面将会示范如何通过GestureService/GestureListener组件处理Tap手势操作。 首先，打开CourseTimetablePage.xaml文件，在courseCollectionItemTemplate数据模板里添加GestureService/GestureListener组件，并把GestureListener的Tap事件处理程序设为CourseItem_Tap：
代码 21
接着，在CourseTimetablePage.xaml.cs文件里创建这个事件处理程序：
代码 22
需要说明的是，sender参数指向的并非GestureListener对象本身，而是包含它的StackPanel，我们可以通过StackPanel的DataContext属性获取目标课程的课程名称，以便作为查询字符串的coursename参数的值传给CourseHubPage页。
好了，终于可以按F5了：
图 14
单击主菜单上的"课程表"进入课程表，在星期一、星期二和星期五这三天里分别创建一节"organizational behavior"课程：
图 15
值得注意的是，当你单击"上课地点"下面的编辑框，使之变成编辑状态时，整个页面会稍稍向上平移，这样做是为了避免软键盘打开时把编辑框挡住，这个特性是系统自带的，我们不必做任何事情就能拥有。不过，由于"确定"和"取消"两个功能还沿用着旧的设计，即通过传统的Button控件来实现，因此无可避免地被软键盘挡住了，我们应该改用上节课的新设计，即通过Application Bar按钮来实现，以便用户在输入完毕之后随时可以关闭页面，而不用先单击页面空白处关闭软键盘再单击确定按钮关闭页面，嗯，改造页面的工作就留给你当课后作业吧……
创建好课程之后，单击课程表上的任意一个课程打开CourseHubPage页：
图 16
从上图可以看出，哪天有课已经正确显示了，下节课的上课日期也正确计算出来了。接着，我们来看看"今天笔记"：
图 17
在编辑框里输入一条笔记，然后单击旁边的新建按钮：
图 18
再新建两条看看：
图 19
嗯，很好，前面创建的笔记在下面，后面创建的笔记在上面。接下来，我们看看"今天作业"：
图 20
创建三项作业，并通过旁边的CheckBox控件把其中一项标记为已完成：
图 21
现在，按两次Back键回到主菜单，然后单击"笔记本"进入笔记本：
图 22
长按第二条笔记打开上下文菜单，然后单击编辑菜单项打开编辑笔记的页面：
图 23
修改一下笔记内容，然后按确定保存并关闭页面：
图 24
好了之后按Back键回到主菜单，然后单击"作业本"进入作业本：
图 25
从上图可以看出，作业的起止时间、完成状态都正确设置了。现在，长按第一项作业打开上下文菜单，然后单击编辑菜单项打开编辑作业的页面，把这项作业标记为已完成，并按确定关闭页面：
图 26
好了之后按Back键回到主菜单，然后单击"课程表"进入课程表，接着单击课程表上的任意一个课程打开CourseHubPage页，嗯，笔记内容和作业的完整状态都正确地更新了：
图 27
图 28
嗯，非常好，只是还有一个小小的地方需要改进的，前面输入数据的时候我是手动输入每个字符的，你知道，Windows Phone 7的模拟器不支持通过电脑的键盘进行输入，因此在测试的时候需要输入大量数据会很痛苦，我希望软键盘能够提供词条联想，比如说，当我输入"Org"三个字母时，它可以提示"Organizantion"给我选择，怎样才能做到呢？很简单，把编辑框的InputScope属性设为Text就可以了：
图 29
这样，当你在编辑框里输入数据时，软键盘上方就会显示相关的词条联想了：
图 30
至此，Course Hub已经实现完毕了，但是，你有没有觉得它有点儿单调？
动起来
单调吗？那就来点儿动感吧！首先是给课程表的课程列表添加Tilt Effect，它可以为控件交互产生一种特别的视觉反馈，感觉上就像控件后面垫了一层柔软的海绵，当你单击控件时，看起来就像你把控件放后面推了一下，当你释放控件时，它会自动复原。MSDN提供了Tilt Effect的示范代码以及把它移植到你的应用的教程，不过，如果你和我一样嫌这麻烦（说到底就是懒），可以直接使用SL for WP Toolkit Feb 2011提供的Tilt Effect组件，不过，它还没修复我在第二节课里提到的bug，因此在使用之前我们需要按照那节课提到的办法修改一下SL for WP Toolkit的源代码。一切准备就绪之后我们就可以应用Tilt Effect了。打开CourseTimetablePage.xaml文件，找到pivotItemContentTemplate数据模板，然后在ListBox里添加TiltEffect.IsTiltEnabled附加属性：
代码 23
这样就行了，是不是很简单呢，如果你希望把Tilt Effect应用到页面上的所有控件，你只需在PhoneApplicationPage里设置这个属性就可以了。
接下来是Page Transitions，如果你有留意Windows Phone 7的相关视频，那么你应该已经看过Windows Phone 7的翻页效果，这是其中一种Page Transitions，怎么把它应用到我们的页面呢？非常简单，在你想应用翻页效果的页面根元素里添加如下代码：
代码 24
我们可以把这段代码分别添加到CourseTimetablePage.xaml和CourseHubPage.xaml两个页面里。不过，仅仅这样还看不到效果，因为应用程序的RootFrame还只是一个普通的PhoneApplicationFrame，我们需要把它换成TransitionFrame。打开App.xaml.cs文件，在InitializePhoneApplication方法里把RootFrame初始化为TransitionFrame：
代码 25
这样，当用户单击课程表上的某个课程打开CourseHubPage页时，就会看到翻页效果了。除了翻页效果（Turnstile），SL for WP Toolkit还提供了滚动（roll）、旋转（rotate）、滑动（slide）和回旋（swivel）等四种效果，你可以通过SL for WP Toolkit附带的示范程序看看这些效果应用到页面时会是怎样的。
最后是FluidMoveBehavior，你知道吗，我第一次看到它产生的效果时就被它深深地吸引住了，我想，用"一见钟情"来描述这种感觉一点儿都不过分！你玩过新浪微博吗，当你发一条新的微博时，现有的微博会向下平移，与此同时，新的微博会在最上面逐渐显现出来，我希望为"今天笔记"实现这样的效果。右击"今天笔记"上的ListBox，选择Edit Additional Templates\Edit Layout of Items (ItemsPanel)\Create Empty：
图 31
在弹出的Create ItemsPanelTemplate Resource对话框里输入模板名字，然后按OK关闭对话框：
图 32
进入模板的编辑状态之后，你会看到一个空的StackPanel，从Assets面板把FluidMoveBehavior拖到StackPanel里，确保FluidMoveBehavior处于选中状态，在Properties面板上把AppliesTo和Duration两个属性分别设为"Children"和"0.5"：
图 33
这样就行了，是不是很简单呢，如果你希望为"今天作业"实现同样的效果，你不必重新创建一个模板，直接应用刚才那个就行了：
图 34
那么，如何让新的笔记会在最上面逐渐显现出来呢？如果你看过刚才那个视频，你可能会说，用最后介绍那个办法不就行了？非常遗憾，不行哦，LayoutStates这组可视状态是Silverlight 4的新特性，而Silverlight for Windows Phone 7是基于Silverlight 3的，尚未支持它们，因此无法通过它们实现我们想要的效果，怎么办？
想想看，这个效果的本质是什么？一个动画！这个动画只做一件事情，使新的笔记逐渐呈现出来，换句话说，使它的Opacity属性的值从0逐渐变成1。现在，右击"今天笔记"上的ListBox，选择Edit Additional Templates\Edit Generated Items (ItemTemplate)\Edit Current：
图 35
在Objects and Timeline面板上选中StackPanel，并在Properties面板上把它的Opacity属性的值设为0，因为新的笔记最初是不显示的。接着，在Objects and Timeline面板上创建一个名为FadeIn的动画，并把播放指针拖到0.5秒处：
图 36
然后在Properties面板上把StackPanel的Opacity属性的值设为100：
图 37
需要说明的是，Opacity属性的类型是double，Expression Blend为了免除输入小数点的麻烦在界面上把这个值扩大了100倍，换句话说，在Properties面板上设100相当于在XAML里设1。好了之后关闭动画，然后在Assets面板上把ControlStoryboardAction拖到Objects and Timeline面板的StackPanel上：
图 38
最后，在Properties面板上把EventName和Storyboard两个属性的值分别设为Loaded和FadeIn：
图 39
这样就大功告成了。虽然这可以实现我们想要的效果，却无可避免地带来了一个新的问题：我怎样把这个效果应用到"今天作业"呢？
最直接的办法是在"今天作业"上重做一遍上面的步骤，额，这显然不是一个办法，我不想重复劳动！这个时候，我们可以创建一个Behavior，把上面的逻辑封装起来，然后直接应用到StackPanel上，从而实现重用。现在，右击Utils文件夹，然后选择Add New Items，在弹出的New Item对话框里选择Behavior，并把它命名为FadeInWhenLoading：
图 40
我们知道，FrameworkElement类是整个继承体系里最先同时拥有Opacity属性和Loaded事件的，因此，我们需要把FadeInWhenLoading类的声明改成这样：
代码 26
接着，在OnAttached方法里把Opacity属性的值设为0，并订阅Loaded事件：
代码 27
而AssociatedObject_Loaded方法所做的事情仅仅是创建并播放使Opacity属性的值从0逐渐变成1的动画：
代码 28
最后，在OnDetaching方法里取消订阅Loaded事件：
代码 29
好了之后，重新编译一下，然后右击"今天笔记"上的ListBox，选择Edit Additional Templates\Edit Generated Items (ItemTemplate)\Edit Current进入模板编辑状态，撤销前面所做的操作（包括设置Opacity属性的值、创建动画以及应用ControlStoryboardAction），然后在Assets面板上把FadeInWhenLoading拖到Objects and Timeline面板的StackPanel上：
图 41
大功告成！现在，你可以把FadeInWhenLoading直接应用到"今天作业"上了。
动画效果是Windows Phone 7用户体验的一个重要组成部分，它使得应用程序不再单纯地从某个状态突然跳到另一个状态，比如Tilt Effect，它使得控件不再只有按下和释放两种状态，当你单击控件时，它会向你单击的那个地方倾斜，非常有趣；又比如Page Transitions，前进到一个页面和返回相同页面会产生不同的动画效果，想象你看书的时候翻到下一页和回到上一页的情景，这使你不会在这个过程中迷失；再比如FluidMoveBehavior，它使你清楚的了解到当前查看的内容是如何变化的，所有这些，目的只有一个，提高用户体验，当然，前提是运用得当。
下课了……
特别感谢PRO为本系列文章精心打造了一个WP7手机外壳，并合成了上面这幅图。
分类: Mobile
"||谢谢分享
|||学习之
代码 21
接着，在CourseTimetablePage.xaml.cs文件里创建这个事件处理程序：
代码 22
需要说明的是，sender参数指向的并非GestureListener对象本身，而是包含它的StackPanel，我们可以通过StackPanel的DataContext属性获取目标课程的课程名称，以便作为查询字符串的coursename参数的值传给CourseHubPage页。
好了，终于可以按F5了：
图 14
单击主菜单上的"课程表"进入课程表，在星期一、星期二和星期五这三天里分别创建一节"organizational behavior"课程：
图 15
值得注意的是，当你单击"上课地点"下面的编辑框，使之变成编辑状态时，整个页面会稍稍向上平移，这样做是为了避免软键盘打开时把编辑框挡住，这个特性是系统自带的，我们不必做任何事情就能拥有。不过，由于"确定"和"取消"两个功能还沿用着旧的设计，即通过传统的Button控件来实现，因此无可避免地被软键盘挡住了，我们应该改用上节课的新设计，即通过Application Bar按钮来实现，以便用户在输入完毕之后随时可以关闭页面，而不用先单击页面空白处关闭软键盘再单击确定按钮关闭页面，嗯，改造页面的工作就留给你当课后作业吧……
创建好课程之后，单击课程表上的任意一个课程打开CourseHubPage页：
图 16
从上图可以看出，哪天有课已经正确显示了，下节课的上课日期也正确计算出来了。接着，我们来看看"今天笔记"：
图 17
在编辑框里输入一条笔记，然后单击旁边的新建按钮：
图 18
再新建两条看看：
图 19
嗯，很好，前面创建的笔记在下面，后面创建的笔记在上面。接下来，我们看看"今天作业"：
图 20
创建三项作业，并通过旁边的CheckBox控件把其中一项标记为已完成：
图 21
现在，按两次Back键回到主菜单，然后单击"笔记本"进入笔记本：
图 22
长按第二条笔记打开上下文菜单，然后单击编辑菜单项打开编辑笔记的页面：
图 23
修改一下笔记内容，然后按确定保存并关闭页面：
图 24
好了之后按Back键回到主菜单，然后单击"作业本"进入作业本：
图 25
从上图可以看出，作业的起止时间、完成状态都正确设置了。现在，长按第一项作业打开上下文菜单，然后单击编辑菜单项打开编辑作业的页面，把这项作业标记为已完成，并按确定关闭页面：
图 26
好了之后按Back键回到主菜单，然后单击"课程表"进入课程表，接着单击课程表上的任意一个课程打开CourseHubPage页，嗯，笔记内容和作业的完整状态都正确地更新了：
图 27
图 28
嗯，非常好，只是还有一个小小的地方需要改进的，前面输入数据的时候我是手动输入每个字符的，你知道，Windows Phone 7的模拟器不支持通过电脑的键盘进行输入，因此在测试的时候需要输入大量数据会很痛苦，我希望软键盘能够提供词条联想，比如说，当我输入"Org"三个字母时，它可以提示"Organizantion"给我选择，怎样才能做到呢？很简单，把编辑框的InputScope属性设为Text就可以了：
图 29
这样，当你在编辑框里输入数据时，软键盘上方就会显示相关的词条联想了：
图 30
至此，Course Hub已经实现完毕了，但是，你有没有觉得它有点儿单调？
动起来
单调吗？那就来点儿动感吧！首先是给课程表的课程列表添加Tilt Effect，它可以为控件交互产生一种特别的视觉反馈，感觉上就像控件后面垫了一层柔软的海绵，当你单击控件时，看起来就像你把控件放后面推了一下，当你释放控件时，它会自动复原。MSDN提供了Tilt Effect的示范代码以及把它移植到你的应用的教程，不过，如果你和我一样嫌这麻烦（说到底就是懒），可以直接使用SL for WP Toolkit Feb 2011提供的Tilt Effect组件，不过，它还没修复我在第二节课里提到的bug，因此在使用之前我们需要按照那节课提到的办法修改一下SL for WP Toolkit的源代码。一切准备就绪之后我们就可以应用Tilt Effect了。打开CourseTimetablePage.xaml文件，找到pivotItemContentTemplate数据模板，然后在ListBox里添加TiltEffect.IsTiltEnabled附加属性：
代码 23
这样就行了，是不是很简单呢，如果你希望把Tilt Effect应用到页面上的所有控件，你只需在PhoneApplicationPage里设置这个属性就可以了。
接下来是Page Transitions，如果你有留意Windows Phone 7的相关视频，那么你应该已经看过Windows Phone 7的翻页效果，这是其中一种Page Transitions，怎么把它应用到我们的页面呢？非常简单，在你想应用翻页效果的页面根元素里添加如下代码：
代码 24
我们可以把这段代码分别添加到CourseTimetablePage.xaml和CourseHubPage.xaml两个页面里。不过，仅仅这样还看不到效果，因为应用程序的RootFrame还只是一个普通的PhoneApplicationFrame，我们需要把它换成TransitionFrame。打开App.xaml.cs文件，在InitializePhoneApplication方法里把RootFrame初始化为TransitionFrame：
代码 25
这样，当用户单击课程表上的某个课程打开CourseHubPage页时，就会看到翻页效果了。除了翻页效果（Turnstile），SL for WP Toolkit还提供了滚动（roll）、旋转（rotate）、滑动（slide）和回旋（swivel）等四种效果，你可以通过SL for WP Toolkit附带的示范程序看看这些效果应用到页面时会是怎样的。
最后是FluidMoveBehavior，你知道吗，我第一次看到它产生的效果时就被它深深地吸引住了，我想，用"一见钟情"来描述这种感觉一点儿都不过分！你玩过新浪微博吗，当你发一条新的微博时，现有的微博会向下平移，与此同时，新的微博会在最上面逐渐显现出来，我希望为"今天笔记"实现这样的效果。右击"今天笔记"上的ListBox，选择Edit Additional Templates\Edit Layout of Items (ItemsPanel)\Create Empty：
图 31
在弹出的Create ItemsPanelTemplate Resource对话框里输入模板名字，然后按OK关闭对话框：
图 32
进入模板的编辑状态之后，你会看到一个空的StackPanel，从Assets面板把FluidMoveBehavior拖到StackPanel里，确保FluidMoveBehavior处于选中状态，在Properties面板上把AppliesTo和Duration两个属性分别设为"Children"和"0.5"：
图 33
这样就行了，是不是很简单呢，如果你希望为"今天作业"实现同样的效果，你不必重新创建一个模板，直接应用刚才那个就行了：
图 34
那么，如何让新的笔记会在最上面逐渐显现出来呢？如果你看过刚才那个视频，你可能会说，用最后介绍那个办法不就行了？非常遗憾，不行哦，LayoutStates这组可视状态是Silverlight 4的新特性，而Silverlight for Windows Phone 7是基于Silverlight 3的，尚未支持它们，因此无法通过它们实现我们想要的效果，怎么办？
想想看，这个效果的本质是什么？一个动画！这个动画只做一件事情，使新的笔记逐渐呈现出来，换句话说，使它的Opacity属性的值从0逐渐变成1。现在，右击"今天笔记"上的ListBox，选择Edit Additional Templates\Edit Generated Items (ItemTemplate)\Edit Current：
图 35
在Objects and Timeline面板上选中StackPanel，并在Properties面板上把它的Opacity属性的值设为0，因为新的笔记最初是不显示的。接着，在Objects and Timeline面板上创建一个名为FadeIn的动画，并把播放指针拖到0.5秒处：
图 36
然后在Properties面板上把StackPanel的Opacity属性的值设为100：
图 37
需要说明的是，Opacity属性的类型是double，Expression Blend为了免除输入小数点的麻烦在界面上把这个值扩大了100倍，换句话说，在Properties面板上设100相当于在XAML里设1。好了之后关闭动画，然后在Assets面板上把ControlStoryboardAction拖到Objects and Timeline面板的StackPanel上：
图 38
最后，在Properties面板上把EventName和Storyboard两个属性的值分别设为Loaded和FadeIn：
图 39
这样就大功告成了。虽然这可以实现我们想要的效果，却无可避免地带来了一个新的问题：我怎样把这个效果应用到"今天作业"呢？
最直接的办法是在"今天作业"上重做一遍上面的步骤，额，这显然不是一个办法，我不想重复劳动！这个时候，我们可以创建一个Behavior，把上面的逻辑封装起来，然后直接应用到StackPanel上，从而实现重用。现在，右击Utils文件夹，然后选择Add New Items，在弹出的New Item对话框里选择Behavior，并把它命名为FadeInWhenLoading：
图 40
我们知道，FrameworkElement类是整个继承体系里最先同时拥有Opacity属性和Loaded事件的，因此，我们需要把FadeInWhenLoading类的声明改成这样：
代码 26
接着，在OnAttached方法里把Opacity属性的值设为0，并订阅Loaded事件：
代码 27
而AssociatedObject_Loaded方法所做的事情仅仅是创建并播放使Opacity属性的值从0逐渐变成1的动画：
代码 28
最后，在OnDetaching方法里取消订阅Loaded事件：
代码 29
好了之后，重新编译一下，然后右击"今天笔记"上的ListBox，选择Edit Additional Templates\Edit Generated Items (ItemTemplate)\Edit Current进入模板编辑状态，撤销前面所做的操作（包括设置Opacity属性的值、创建动画以及应用ControlStoryboardAction），然后在Assets面板上把FadeInWhenLoading拖到Objects and Timeline面板的StackPanel上：
图 41
大功告成！现在，你可以把FadeInWhenLoading直接应用到"今天作业"上了。
动画效果是Windows Phone 7用户体验的一个重要组成部分，它使得应用程序不再单纯地从某个状态突然跳到另一个状态，比如Tilt Effect，它使得控件不再只有按下和释放两种状态，当你单击控件时，它会向你单击的那个地方倾斜，非常有趣；又比如Page Transitions，前进到一个页面和返回相同页面会产生不同的动画效果，想象你看书的时候翻到下一页和回到上一页的情景，这使你不会在这个过程中迷失；再比如FluidMoveBehavior，它使你清楚的了解到当前查看的内容是如何变化的，所有这些，目的只有一个，提高用户体验，当然，前提是运用得当。
下课了……
特别感谢PRO为本系列文章精心打造了一个WP7手机外壳，并合成了上面这幅图。
分类: Mobile
"||谢谢分享
|||学习之