目录
PageTurnDemo 应用程序
使用翻页框架
XAML 结构
框架内部
两年前，我在雷蒙德的一条走廊里遇到了一个朋友，
Silverlight：翻页化繁为简
。他说：“我有些东西你需要看看。 ”他打开他的便捷式计算机给我做了一个演示，这一演示给我带来了很大的震动。他演示是 SilverlightTM 早期版本的翻页示例（现在可通过 silverlight.net/samples/1.0/Page- Turn/default.html 查看）。我无法相信自己的眼睛，因为该演示是在浏览器中运行的！更令人 吃惊的是，它不需要 Microsoft® .NET Framework，不需要 Internet Explorer®，并且相信总 有一天它会连也 Windows® 也不再需要了。
PageTurn 是最典型的 Silverlight 1.0 演示。 如果希望初次接触 Silverlight 的人留下深刻印象，我总是会用到它。但是通过深入了解 PageTurn，您 会发现构建自己的翻页应用程序并非易事。PageTurn 依赖于转换、剪辑区域、动态创建的 XAML 对象等 功能，并且需要大量时间和精力（以及精通 Silverlight）才能理解源代码。它灵巧地展示了 Silverlight 的一些最丰富的功能，但它没有考虑到反复使用这一因素。
所以我构建了一个常用 翻页框架，它使将翻页功能集成到 Silverlight 1.0 应用程序中变得极为简单。通过借助此框架，仅使 用几行 JavaScript. 就可构建整个应用程序。它不需要精通 Silverlight，并且由于整个框架包括约 500 行 JavaScript,，因此可深入了解其工作原理，而不必埋头苦读成千上万行代码。当然，您还可根据需要 进行修改。
PageTurnDemo 应用程序
在介绍此框架之前，让我们先来研究一个围绕它构建 的应用程序。通过使用图 1 中所示的 PageTurnDemo 应用程序，可翻阅 Microsoft Systems Journal（ 现在称为《MSDN® 杂志》）1988 年 11 月刊的前几页。（从杂志复制页面时如何避免出现版权问题 ？使用对应杂志的页面，并且使用自己撰写的文章，这是起码条件！）每个页面都是一个扫描图像，但其 中一个即最后一页使用可扩展应用程序标记语言 (XAML) 文本来覆盖图像。我还要强调：应用于框架的页 面不仅限于图像；对它的限制很少，可包含任意 XAML（包括 Image、TextBlock、MediaElement 等等） 。
图 1PageTurnDemo 显示部分翻开的页面
可通过下载源代码并从 Visual Studio® 2008 将其启动 来运行此演示，或者可在 wintellect.com/silverlight/pageturndemo 中查看此演示。出现杂志封面后 （一个进度条会通知您下载进度，此下载会检索应用程序中使用的所有图像），按下鼠标左键在封面上从 右到左拖动来向前翻页。继续向左拖动右边页面会显示更多页面，从左向右拖动左边页面会向后翻页。
创建此示例的难度如何？除扫描、剪切、确定图像大小以及将它们打包到 ZIP 文件中外，根本就 不难。三个关键源代码文件（可在本专栏随附的下载中找到）为 HTML 文件、相关 JavaScript. 文件以及 XAML 文件。除去使用 Silverlight 下载器对象来下载图像的代码，基本就没什么源代码了。实际上，仅 有大约 10 行是翻页功能专用的。
使用翻页框架
PageTurnDemo 展示了使用翻页框架所需 完成的四个基本步骤。第一步是将 PageTurn.js（包含框架实现的脚本文件）加入 HTML 文件中。以下是 Default.html 中的相关代码行：
第二步是实例化框架。由于翻页框架 封装在名为 PageTurnFramework 的 JavaScript. 类中，Default.html.js 中的以下语句将实例化框架：
_ptf = new PageTurnFramework(_control,
_control.content.findName ('PageTurnCanvas'));
传递给 PageTurnFramework 构造函数的第一个参数是对 Silverlight 控件的引用。第二个参数是对包含页面的画布的引用。在 PageTurnDemo 的 XAML 文档中， 该画布称为“PageTurnCanvas”。
第三步是向框架注册页面。每个页面都由一块画布 表示，并且 PageTurnFramework 公开了一个 addPage 方法，可调用此方法来注册页面。AddPage 接受两 个参数：
_ptf.addPage(_control.content.findName('EvenPage0'),
_control.content.findName('OddPage0'));
第一个参数是对代表对页中左边页 面的画布的引用；而第二个参数则是对代表右边页面的画布的引用。可任意多次调用 addPage 以注册所 有的页面对。最后一次调用 addPage 之后必须接着调用 initializeFramework：
_ptf.initializeFramework();
initializeFramework 方法初始化框架的内部状态。此外，它创建了用于剪辑和旋转页面的多个 XAML 对象，并且它还注册了关键事件的处理程序。
使用框架的第四个也是最后一个需求为确保正确执行清理。为避免内存泄漏，通过编程方式注册事件 处理程序且基于浏览器的应用程序还应取消注册这些处理程序。PageTurnFramework 包括一个 dispose 方法来注销 addPage 和 initializeFramework 所注册的事件处理程序。在 PageTurnDemo 中，当卸载页 面时，
元素中的 onunload 属性会调用本地 dispose 函数：Default.html.js 中的本地 dispose 函数将调用框架的 dispose 方法：
if (_ptf != null)
_ptf.dispose();
我使用了一个 DOM 事件来触发对 dispose 的调用，因为 Silverlight 不会引发卸载事件。如果愿意 ，使用 window.unload 事件也一样轻松。
PageTurnFramework 类公开了六个公共方法，可调用它们来将翻页功能添加到应用程序中（请参阅图 2）。PageTurnDemo 使用了其中三个：addPage、initializeFramework 和 dispose。其他方法可用于添 加更多功能。例如，如果希望在应用程序中包括由页面略缩图组成的一个导航栏（就像 Silverlight PageTurn 演示的一样），可在单击缩略图时调用 PageTurnFrame. work.goToPage 来直接导航到对应页面 。
Figure2翻页框架 API
方法 说明 addPage 向框架注册页面对。 Dispose 释放框架所占用的资源以完成适当的清理。 getCurrentPageIndex 返回当前显示页面对的基于 0 的索引。 getPageCount 返回使用 addPage 添加的页面对数。 goToPage 显示指定页面对。 initializeFramework 初始化翻页框架。XAML 结构
翻页框架对 XAML 文档结构强加了一些基本要求。这些要求包括：
使用 XAML 画布（页面画布）代表页面对中的每个页面。
包括一个“翻页”画布，作为所有页面画布的容器。
指定根画布的宽度、高度和背景颜色（即使它为 Transparent）。
产生第三个要求的原因是在初始化时，框架将注册根画布所引发的 MouseLeave 事件处理程序。当光 标离开 Silverlight 控件而页面部分打开时，这些事件将用于完成翻页功能。
出于最佳实践方面的考虑，捕获鼠标的所有 Silverlight 1.0 应用程序（就像开始翻动时翻页框架的 动作一样）应处理从根画布发出的 MouseLeave 事件并利用该机会释放鼠标。为使元素可接收鼠标事件（ 如 MouseEnter 和 MouseLeave），元素在 Silverlight 中必须为“可点击测试”。其实现方法为确保元 素（在本例中为“画布”）具有尺寸且具有“非空”背景。
请记牢这些要求，图 3 显示了与翻页框架配用的 XAML 文档常规结构。翻页画布是传递给 PageTurnFramework 类构造函数的画布。页面画面传递给 PageTurnFramework.addPage。翻页画布和页面 画布通常应标记有显式宽度和高度，从而确保可正确引发框架所使用的鼠标事件，无论画面包含的是何种 XAML 内容。剩下的全都是 XAML 了。
Figure3XAML 结构
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Background="color" Width="width" Height="height">