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

世界上許多 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>