您的位置:知识库 » 手机开发

WP7有约(三):课堂重点

作者: Allen Lee  来源: 博客园  发布时间: 2011-01-16 18:16  阅读: 3285 次  推荐: 0   原文链接   [收藏]  

      那么,我们如何触发这些动画?前面说过,当用户单击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控件的有效范围,导致新的页面被打开,我对此深感厌恶,你知道,当用户对软件的操作感到厌恶时,后果将会很严重!

0
0
标签:WP7

手机开发热门文章

    手机开发最新文章

      最新新闻

        热门新闻