WP7有约（三）：课堂重点

      那么，我们如何触发这些动画？前面说过，当用户单击Application Bar上的按钮时，ListBox将会显示，这个比较简单，只需在按钮的事件处理程序里调用ShowTagsStoryboard的Begin方法就可以了：

代码 4

　　而当用户选好标签之后，ListBox将会隐藏，这个可以通过Expression Blend提供的ControlStoryboardAction来实现。打开Assets面板，选择Behaviors，然后把ControlStoryboardAction拖到Objects and Timeline面板的ListBox上：

图 12

　　此时，Objects and Timeline面板将会变成这样：

图 13

　　确保ControlStoryboardAction处于选中状态，在Properties面板上把EventName和Storyboard两个属性的值分别改为MouseLeftButtonUp和HideTagsStoryboard：

图 14

　　这样，当用户在ListBox里选好标签并松开手时就会触发HideTagsStoryboard。看到这里，你可能会问，为什么前面不直接在Application Bar的按钮上使用ControlStoryboardAction？这是因为Application Bar并非Silverlight的一部分，你不可以把它和我们平时接触到的Silverlight对象等同起来。事实上，如果你试图把ControlStoryboardAction拖到ApplicationBarIconButton上，Expression Blend会提示你"Not a valid drop target"：

图 15

　　接下来，我们将会为两个ListBox定制数据模板。

      首先，通过Data面板导入以下两个XML文件：

代码 5

代码 6

　　此时，Data面板将会变成这样：

图 16

　　把Data面板上的NoteCollection拖到显示笔记的ListBox上，然后进入列表项模板的编辑状态，把StackPanel的Margin属性、TextBlock的FontSize属性和TextBlock的TextWrapping属性分别设为PhoneTouchTargetOverhang、PhoneFontSizeNormal和Wrap：

图 17

　　好了之后退出列表项模板的编辑状态。接着，把TagCollection拖到显示标签的ListBox上，然后进入列表项模板的编辑状态，把StackPanel的Margin属性、TextBlock的FontSize属性和TextBlock的TextWrapping属性分别设为PhoneTouchTargetOverhang、PhoneFontSizeLarge和Wrap：

图 18

　　接下来干嘛？你懂的！

      打开MainPage.xaml，添加一个菜单项，并让它导航至NoteBookPage页：

图 19

　　好了，按F5吧：

图 20

　　单击笔记本：

图 21

　　单击Application Bar上的按钮：

图 22

　　啊！忘记把ListBox的Background设成不透明了！

      退出应用程序。把ListBox的Background改为PhoneBackgroundBrush。而动画方面，0.5秒感觉有点长，我们可以把它改为0.25秒：

代码 7

　　此外，还有一个地方值得改善的，我希望ListBox出来的时候能够有一种逐渐慢下来的感觉，而离开的时候则相反，逐渐快起来。这可以通过缓动函数（easing function）来实现。单击Objects and Timeline面板上的Open a Storyboard按钮，然后选择ShowTagsStoryboard：

图 23

　　展开ListBox节点，确保下面的RenderTransform处于选中状态：

图 24

　　然后在Properties面板上把EasingFunction设为Cubic Out：

图 25

　　好了之后仿照上述步骤把HideTagsStoryboard的EasingFunction设为Cubic In。现在，你可以按F5看看修改后的效果了。

      接下来，是时候考虑一下笔记本的相关操作了。我们知道，课程表通常都是整个创建的，而作业通常也一次过把一门课当天要做的都记下来，对于这种集中式批量操作来说，提供保存所有更改和撤销所有更改是有必要的，但笔记本就不同了，里面的内容很可能分散在不同的时间点记录，没有太明显的集中式批量操作，如果我们遵循课程表和作业本的套路，要么用户不得不在每次记笔记时都额外执行一次保存操作，要么用户不得不承担最后可能忘记统一保存而丢失数据的风险。因此，我打算把五项操作简化为新建、编辑和删除三项，并在用户执行每项操作之后自动保存数据，其中，新建将会以ApplicationBarIconButton的方式放在Application Bar上：

图 26

　　而编辑和删除则放在上下文菜单里：

代码 8

　　根据之前的经验，我们需要一个新的页面来处理新建和编辑操作：

图 27

　　那么，我们应该如何设计这个页面呢？

      想想看，Note类的哪些属性和用户无关？Id。哪些属性无需劳烦用户处理？CourseName。那么剩下的Content和Tags两个属性就应该出现在这里了。毫无疑问，TextBox完全能够胜任显示和编辑这两个属性的工作：

图 28

　　值得注意的是，这里不再通过普通的Button控件来提供"确定"和"取消"两项功能，而是通过Application Bar上的按钮来提供，为什么呢？当用户输入完毕之后，软键盘可能处于开启状态，它会遮盖普通的Button控件，这意味着用户就不得不先单击一下页面上的空白处关闭软键盘，再单击Button控件关闭页面，而Application Bar不会被软键盘遮盖，这意味着用户可以在输入完毕之后直接单击上面的按钮关闭页面。你知道吗，这个小小的简化可以极大地提升用户体验，之前测试课程表和作业本的时候，这个不必要的步骤曾多次让我误触TimePicker/DatePicker控件的有效范围，导致新的页面被打开，我对此深感厌恶，你知道，当用户对软件的操作感到厌恶时，后果将会很严重！