Silverlight：翻页化繁为简

Silverlight：翻页化繁为简2011-09-23 msdn.microsoft.com Jeff Prosise目录

PageTurnDemo 应用程序

使用翻页框架

XAML 结构

框架内部

总结

两年前，我在雷蒙德的一条走廊里遇到了一个朋友。他说：“我有些东西你需要看看。 ”他打开他的便捷式计算机给我做了一个演示，这一演示给我带来了很大的震动。他演示是 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 行是翻页功能专用的。