非常ASP.NET: 使用ASP.NET控件封装Silverlight

非常ASP.NET: 使用ASP.NET控件封装Silverlight2011-12-13 msdn Fritz Onion世界上许多 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 处理程序设置标题文本并调用动画。

Figure 1 Sphere.xaml File

<！-- File: Sphere.xaml --><Canvas  xmlns="http://schemas.microsoft.com/client/2007"  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  Width="300" Height="300"  Background="White"  > <Canvas.Resources>  <Storyboard x:Name="growAnimation">   <DoubleAnimation    Storyboard.TargetName="ellipse"    Storyboard.TargetProperty="（Ellipse.Width）"    To="250" Duration="0:0:2" />   <DoubleAnimation    Storyboard.TargetName="ellipse"    Storyboard.TargetProperty="（Ellipse.Height）"    To="250" Duration="0:0:2" />  </Storyboard>  <Storyboard x:Name="shrinkAnimation">   <DoubleAnimation    Storyboard.TargetName="ellipse"    Storyboard.TargetProperty="（Ellipse.Width）"    To="200" Duration="0:0:2" />   <DoubleAnimation    Storyboard.TargetName="ellipse"    Storyboard.TargetProperty="（Ellipse.Height）"    To="200" Duration="0:0:2" />  </Storyboard> </Canvas.Resources> <TextBlock x:Name="titleText" Width="200" Height="24"    Canvas.Left="94" Text="[Title]" TextWrapping="Wrap" /> <Ellipse Width="200" Height="200"   x:Name="ellipse" Canvas.Left="47" Canvas.Top="41">  <Ellipse.Fill>   <RadialGradientBrush GradientOrigin="0.75,0.25"     Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">    <GradientStop Color="Yellow" Offset="0" />    <GradientStop Color="Green" Offset="1" />   </RadialGradientBrush>  </Ellipse.Fill> </Ellipse></Canvas>