• 《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)的用户体验。

    image

    图28.1 从第一个Panorama页面切换到第二个页面的效果

        为了获得全屏幻灯片的效果,本页面的Panorama和它的Item并不使用任何Title和Header。Item还利用负的页面上边距来占用那些浪费的空间。控件右边的48像素空间由以下两个部分组成:页边距占用12像素,下一个页面中左边部分的内容占用36像素。因为我们不想在本应用程序中加入预览的功能,所以只要确保每个页面中的内容有36像素宽度的左边距。本应用程序在用户切换图片之前,不仅需要将下一个页面的内容缓冲,而且要把内容进行居中布局。但是,在横屏模式下,它确实强制内容的最大宽度为384(480 - 48×2)。图28.2清楚地展示了这种情景,它将Panorama的背景设置为橙色,第一个页面的背景为绿色,第二个为蓝色,第三个为紫色。

    image

    图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标题或者是背景。

  • 相关阅读:
    取得窗口大小和窗口位置兼容所有浏览器的js代码
    一个简单易用的导出Excel类
    如何快速启动chrome插件
    网页表单设计案例
    Ubuntu下的打包解包
    The source file is different from when the module was built. Would you like the debugger to use it anyway?
    FFisher分布
    kalman filter
    Group delay Matlab simulate
    24位位图格式解析
  • 原文地址:https://www.cnblogs.com/dearsj001/p/101App4WP7_Flashcards.html
Copyright © 2020-2023  润新知