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



      本文转自施炯博客园博客,原文链接:http://www.cnblogs.com/dearsj001/archive/2012/08/16/101App4WP7_Flashcards.html,如需转载请自行联系原作者

相关文章
|
13天前
|
Linux C++ Windows
【Azure 应用服务】Azure App Service(Windows)环境中如何让.NET应用调用SAP NetWeaver RFC函数
【Azure 应用服务】Azure App Service(Windows)环境中如何让.NET应用调用SAP NetWeaver RFC函数
【Azure 应用服务】Azure App Service(Windows)环境中如何让.NET应用调用SAP NetWeaver RFC函数
|
13天前
|
Java 应用服务中间件 开发工具
[App Service for Windows]通过 KUDU 查看 Tomcat 配置信息
[App Service for Windows]通过 KUDU 查看 Tomcat 配置信息
|
13天前
|
Java 应用服务中间件 Windows
【App Service for Windows】为 App Service 配置自定义 Tomcat 环境
【App Service for Windows】为 App Service 配置自定义 Tomcat 环境
|
13天前
|
PHP Windows
【Azure App Service for Windows】 PHP应用出现500 : The page cannot be displayed because an internal server error has occurred. 错误
【Azure App Service for Windows】 PHP应用出现500 : The page cannot be displayed because an internal server error has occurred. 错误
|
14天前
|
PHP 开发工具 git
【Azure 应用服务】在 App Service for Windows 中自定义 PHP 版本的方法
【Azure 应用服务】在 App Service for Windows 中自定义 PHP 版本的方法
|
16天前
|
Java Windows 容器
【应用服务 App Service】快速获取DUMP文件(App Service for Windows(.NET/.NET Core))
【应用服务 App Service】快速获取DUMP文件(App Service for Windows(.NET/.NET Core))
|
13天前
|
网络安全 API 数据安全/隐私保护
【Azure App Service】.NET代码实验App Service应用中获取TLS/SSL 证书 (App Service Windows)
【Azure App Service】.NET代码实验App Service应用中获取TLS/SSL 证书 (App Service Windows)
|
13天前
|
Shell PHP Windows
【Azure App Service】Web Job 报错 UNC paths are not supported. Defaulting to Windows directory.
【Azure App Service】Web Job 报错 UNC paths are not supported. Defaulting to Windows directory.
|
13天前
|
存储 Linux Windows
【应用服务 App Service】App Service For Windows 如何挂载Storage Account File Share 示例
【应用服务 App Service】App Service For Windows 如何挂载Storage Account File Share 示例
|
13天前
|
应用服务中间件 nginx Windows
【Azure 应用服务】在App Service for Windows中实现反向代理
【Azure 应用服务】在App Service for Windows中实现反向代理
下一篇
DDNS