非常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>