【IT168技术文档】
世界上许多 ASP.NET 开发人员都想知道如何将 SilverlightTM 整合到其应用程序中,以及整合到其应用程序的什么位置。显然,回答该问题并不是那么容易,因为可以采用的方法多种多样。您可以将整个页面作为一个 Silverlight 控件并在此页面上执行任何操作,也可以在页面上确定 Silverlight 作用到的部分,并在更能体现许多 UI 元素作用的地方集成这些 UI 元素,您更有可能采取后一种方法。
有时将后一种方法称为在页面上“添加丰富多彩的岛屿”。而有了 Silverlight,这些岛屿就可能通过可编写脚本的方法和事件与周围内容联系起来。
在本月的专栏中,我将研究用于生成封装 Silverlight 内容的自定义服务器控件的方法。将 Silverlight 内容封装到自定义 ASP.NET 控件有多个优点,正是这些优点,使其成为备受关注的技术。该技术使集成的 Silverlight 内容使用起来就像使用其他任何服务器端控件一样简单,从而极大增加了被采用的机会。在 Silverlight 控件上添加处理程序、设置属性和调用方法的过程与在其他任何控件上的处理过程完全相同。而且此方法可保持页面的简洁,不会受混乱的 Silverlight 特定的 JavaScript 所影响,从而可轻松进行维护和部署。
使用 Silverlight
在详细介绍生成自定义控件以承载 Silverlight 内容之前,应先介绍将 Silverlight 内容呈现给客户时需要些什么。因此,一开始我会介绍如何在 ASP.NET 页面上承载 XAML 文件以及在页面和呈现的 Silverlight 内容之间添加交互。在我的页面展示最终要通过控件封装的行为之后,您就会对如何将控件的各部分结合在一起更加清楚。
第一步,编写 Silverlight 呈现的 XAML 文件。我的目标是,既要使 XAML 在呈现控件时尽可能简单,不花哨,又要使其内容足以能引起读者的兴趣。因此,我选择呈现带有标题的单个球体。图 1 所示的 XAML 定义一个用作标题的 TextBlock 和一个用光线渐变画笔绘制的椭圆。此 XAML 还在 Canvas 的资源部分定义两个 Storyboard,分别绘制两个将球体变大和变小的动画,每个持续时间为两秒。最后,我想在 Silverlight 中承载此 XAML,然后当用户在呈现的球体上单击时,使用 JavaScript 处理程序设置标题文本并调用动画。
要将此 XAML 集成到网页,首先需要创建 Silverlight 插件。最简单的创建方法是添加一个指向 Silverlight 1.0 SDK 随附的 Silverlight.js 脚本文件的引用。此文件定义了一个名为 Silverlight.createObject 的方法,可以使用此方法创建插件。Silverlight 插件需要与页面上的 HTML 元素(通常是 <div>)相关联,因此通常的做法是定义 <div> 元素,并将对嵌入脚本块中 createObject 的调用放在 <div> 中。
图 2 说明了如何创建 Silverlight 控件的实例并将其与 <div> 元素关联。此页面假定图 1 所示的 Sphere.xaml 文件与页面本身位于同一目录。在 Web 浏览器中查看时,此页面显示一个如图 3 所示的可爱的绿球。

接下来的任务是与 XAML 交互,以便可通过编程更改标题文本,并启动上文所述的可变大变小的动画。最简单的交互方法是以声明的方式将处理程序分配给 XAML 中定义对象的事件。在本例中,用户单击球体会出现变大变小的动画——而运行哪个动画取决于球体的当前大小。
首先,我将处理程序添加到定义球体的 Ellipse 的 MouseLeftButtonDown 事件,然后在页面上放置用 JavaScript 编写的相应方法。按类似的方式处理 TextBlock 的 Loaded 事件,以将球体上显示的文本设置为自定义的字符串。添加到 XAML 的处理程序与下面的形式类似:
手动将 Silverlight 内容集成到 ASP.NET 页面的所有步骤就是这些。在浏览器中显示此页时,标题文本会显示“My Growing Sphere”。当用户第一次单击球体时,球体变大,第二次单击,球体变小。如您所见,将 Silverlight 内容集成到 ASP.NET 页面相对容易,而且易于操作,因为其整个对象模型都向页面上的脚本公开。<Ellipse MouseLeftButtonDown="javascript:onSphereButtonDown" ... <TextBlock Loaded="javascript:onTextLoaded" ...
但是,对于诸如球体之类的简单元素,您可能希望将其打包成自定义控件,这样只需将其控件拖放到页面的设计图面,就可以集成到应用程序。这便是封装 Silverlight 发挥作用的地方。