《101 Windows Phone 7 Apps》读书笔记-Alphabet Flashcards

课程内容

Ø 幻灯片效果的切换

 

    最近有人问我如何来写一个幻灯片的应用程序，在这个应用程序中，他们可以在不同的页面之间切换，就像在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标题或者是背景。