课程内容
Ø 幻灯片效果的切换
最近有人问我如何来写一个幻灯片的应用程序,在这个应用程序中,他们可以在不同的页面之间切换,就像在Pictures hub或者Facebook应用程序中浏览一个图片集一样。我仔细思考后发现,当前并没有可用的panel或者其他UI元素来实现这种交互的效果。一个简单的scroll viewer并不行,因为我们需要每个图片具有“魔力”,而且所有剩余的图片视图不能处于不对齐的位置。
虽然Pivot和Panorama控件要比这个任务的需求更具特色,但是它们提供了最简单的方法来创建这种交互模式。我们只需要隐藏title 和 header,对布局做一些调整就可以了。由于具备LoadingPivotItem和UnloadingPivotItem事件,Pivot控件更加适合记录的动态加载/卸载;但是,Panorama使得我们可以用切换的方式来浏览前一张或后一张图片,因此,它更加适合模仿幻灯片的效果。
因此,Alphabet Flashcards应用程序采用Panorama控件来提供26个字母中每个卡片的幻灯片浏览效果。父母可以使用这个应用程序来教孩子认识英文字母。
注意,不要在Panorama中放置太多的记录!
Panorama的设计初衷并不是用来放置太多的记录。对于本应用程序的27个记录来说,性能还可以接受。但是如果加入更多更复杂的记录,会导致应用程序的性能明显下降,并且占用更多的内存。
The User Interface
Alphabet Flashcards使用了27个Panorama Item的Panorama控件:一个用来作为标题页面,另外26个页面用来展示26个英文字母。图28.1显示了从第一个页面(标题)切换到第二个页面(字母A)的用户体验。
图28.1 从第一个Panorama页面切换到第二个页面的效果
为了获得全屏幻灯片的效果,本页面的Panorama和它的Item并不使用任何Title和Header。Item还利用负的页面上边距来占用那些浪费的空间。控件右边的48像素空间由以下两个部分组成:页边距占用12像素,下一个页面中左边部分的内容占用36像素。因为我们不想在本应用程序中加入预览的功能,所以只要确保每个页面中的内容有36像素宽度的左边距。本应用程序在用户切换图片之前,不仅需要将下一个页面的内容缓冲,而且要把内容进行居中布局。但是,在横屏模式下,它确实强制内容的最大宽度为384(480 - 48×2)。图28.2清楚地展示了这种情景,它将Panorama的背景设置为橙色,第一个页面的背景为绿色,第二个为蓝色,第三个为紫色。
图28.2 页面切换中Panorama的背景
如果我们想要在边距上留较小的空间,可以将Panorama的边距设置为“0,0,-48,0”。如果我们想要进一步丰富Panorama的外观,可以给Panorama应用一个新的风格,并且给Panorama Item一个经过调整的控件模板。
注意:
我们并不是在XAML布局中加入27个Panorama Item,而是在使用代码将Panorama 的ItemsSource设置为一组图片的URI字符串。Panorama使用Item模板把每个图片嵌入到Grid中去,为了得到如图28.1所示的效果,需要留出一些页边距。
Panorama包含的东西要比PanoramaItem更多,例如本应用程序中使用的字符串,而每个Item的主要内容和Header用来显示记录的详细信息。因此,应用程序明确将每个Item的HeaderTemplate设置为空,这样就可以避免text block中使用的每个URI显示在每个图片的上方。
本应用程序中使用的图片,其Build Action属性设置为Resource,使得Panorama控件和背景图片在程序运行时同时加载。
The Code-Behind
除了为Panorama填充Item以外,cs代码还为应用程序保存并恢复用户已选择的Item,使得应用程序可以恢复它之前的状态。
这里,DefaultItem用得恰当好处。在本应用程序中,将不再受到前一章所讨论的DefaultItem问题的困扰,因为这里没有明显的Panorama标题或者是背景。
本文转自施炯博客园博客,原文链接:http://www.cnblogs.com/dearsj001/archive/2012/08/16/101App4WP7_Flashcards.html,如需转载请自行联系原作者