目录 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 
s Journal(现在称为
MSDN® 杂志
)1988 年 11 月刊前几页(从杂志复制页面时如何避免出现版权问题？使用对应杂志页面并且使用自己撰写文章这是起码条件！)每个页面都是个扫描图像但其中个即最后页使用可扩展应用标记语言 (XAML) 文本来覆盖图像我还要强调:应用于框架页面不仅限于图像；对它限制很少可包含任意 XAML(包括 Image、TextBlock、MediaElement 等等)
图 1PageTurnDemo 显示部分翻开页面可通过下载源代码并从 Visual Studio® 2008 将其启动来运行此演示
或者可在 w
ellect.com/silverlight/pageturndemo 中查看此演示出现杂志封面后(个进度条会通知您下载进度此下载会检索应用中使用所有图像)按下鼠标左键在封面上从右到左拖动来向前翻页继续向左拖动右边页面会显示更多页面从左向右拖动左边页面会向后翻页创建此举例
难度如何？除扫描、剪切、确定图像大小以及将它们打包到 ZIP 文件中外根本就不难 3个关键源代码文件(可在本专栏随附下载中找到)为 HTML 文件、相关 JavaScript 文件以及 XAML 文件除去使用 Silverlight 下载器对象来下载图像代码基本就没什么源代码了实际上仅有大约 10 行是翻页功能专用使用翻页框架
PageTurnDemo 展示了使用翻页框架所需完成
4个基本步骤第步是将 PageTurn.js(包含框架实现脚本文件)加入 HTML 文件中以下是 Default.html 中相关代码行:<script ... src="PageTurn.js"></script>第 2步是例子化框架
由于翻页框架封装在名为 PageTurnFramework JavaScript 类中Default.html.js 中以下语句将例子化框架:_ptf = 
PageTurnFramework(_control,
_control.content.findName('PageTurnCanvas'));传递给 PageTurnFramework 构造
第个参数是对 Silverlight Control控件引用第 2个参数是对包含页面画布引用在 PageTurnDemo XAML 文档中该画布称为“PageTurnCanvas”第 3步是向框架注册页面
每个页面都由块画布表示并且 PageTurnFramework 公开了个 addPage 思路方法可
此思路方法来注册页面AddPage 接受两个参数:_ptf.addPage(_control.content.findName('EvenPage0'),
_control.content.findName('OddPage0'));第
个参数是对代表对页中左边页面画布引用；而第 2个参数则是对代表右边页面画布引用可任意多次 addPage 以注册所有页面对最后次 addPage 的后必须接着 initializeFramework:_ptf.initializeFramework
;initializeFramework 思路方法
化框架内部状态此外它创建了用于剪辑和旋转页面多个 XAML 对象并且它还注册了关键事件处理使用框架
第 4个也是最后个需求为确保正确执行清理为避免内存泄漏通过编程方式注册事件处理且基于浏览器应用还应取消注册这些处理PageTurnFramework 包括个 dispose 思路方法来注销 addPage 和 initializeFramework 所注册事件处理在 PageTurnDemo 中当卸载页面时<body> 元素中 _disibledevent="Silverlight 翻页化繁为简" /> 图 6用于描述翻页剪辑区域和转换RotateTransform 和 TranslateTransform
起用于对页面进行定位和定向(是还涉及到很多 3角学！)当鼠标向左移动时想象黄色矩形滑向左边且旋转到垂直位置再结合在红色 3角形逐渐变窄时蓝色 3角形尺寸变大您就会明白翻页工作原理整理总结
在结束本专栏的前
我想到了 PageTurnFramework API 其他有用添加项例如如果每次翻页时框架都引发个事件将非常有用这样可编写更新页面上其他内容处理并且公开控制关键翻页参数属性也非常有用(如翻页后阴影宽度以及未完成翻动动画步长)如有必要
可在您项目中自由使用此框架并对其进行修改如有反馈敬请告知；并且如果想到功能集和 API 有用添加内容也请并告知我会综合利用您建议和我想法从而确保翻页框架版本 2.0 优于版本 1.0请将您想向 Jeff 询问
问题和提出意见发送至[email protected]. Jeff Prosise 是对
MSDN 杂志贡献很大编辑以及多本书籍作者这些书籍中包括Programming Microsoft .NET他还是 Wellect (www.wellect.com) 公司共同创始人该公司专门从事 .NET Framework 软件Software咨询和教育想对本专栏发表评论吗？您可以通过 [email protected] 和 Jeff 联系 
最新评论