一個(gè)
關(guān)鍵組件，就是名為 Microsoft? Silverlight? 的新技術(shù)，原代號為“WPF/E”。Silverlight 將 Windows? Presentation Foundation 體驗帶到 Web 中，提供豐富又令人陶醉的內容，與包括 ASP.NET AJAX 在內的其他 Web 開(kāi)發(fā)環(huán)境實(shí)現無(wú)縫連接。
為了與 Web 社區盡可能地融合，Silverlight 需要在多個(gè)流行的操作系統和最常見(jiàn)的瀏覽器中成功運行。其結果是，最初發(fā)行的版本支持在 Mac OS X 上運行的 Firefox 和 Safari 瀏覽器，以及在 Windows 上運行的 Firefox 和 Internet Explorer?。隨著(zhù)產(chǎn)品的發(fā)展，會(huì )支持更多的操作系統和瀏覽器。除這些功能外，Silverlight 也是完全獨立的，不需要依靠其他產(chǎn)品，比如它不需要 Windows Media? Player 進(jìn)行視頻播放，也不需要 Microsoft .NET Framework 3.0 進(jìn)行 XAML 分析。
本文既是對 Silverlight 體系結構的高度概述，又可讓您通過(guò)構建幾個(gè) Silverlight 應用程序獲得親身體驗，這一切從一個(gè)基本的“Hello World”應用程序開(kāi)始。之后我將引導您構建簡(jiǎn)單的媒體播放器。您還將知道作為客戶(hù)端技術(shù)的 Silverlight，如何融入更大的、面向服務(wù)器的環(huán)境，包括在運行 PHP 或 Java 的服務(wù)器上應用的能力。
Silverlight 簡(jiǎn)介
從核心上說(shuō)，Silverlight 是呈現 XAML 的瀏覽器插件，以可編寫(xiě)腳本的方式，向瀏覽器提供其內部的文檔對象模型 (DOM) 和事件模型。因此，設計人員可以將含有圖形、動(dòng)畫(huà)、時(shí)間線(xiàn)的 XAML 文檔整合在一起，以便開(kāi)發(fā)人員將它們關(guān)聯(lián)到頁(yè)面代碼，實(shí)現其功能。由于 XAML 基于 XML，定義下載至客戶(hù)端的 UI 是基于文本的，因此對搜索引擎和防火墻都很友好。此外，XAML 可以由服務(wù)器應用程序在運行時(shí)組裝和發(fā)出，因此不僅提供了豐富的圖形體驗，而且是高度可自定義和動(dòng)態(tài)的。
圖 1 是對簡(jiǎn)單 Silverlight 應用程序的分析，它使用靜態(tài)的 XAML 文件定義其 UI 和處理事件的 JavaScript。瀏覽器會(huì )實(shí)例化插件，并且作為處理過(guò)程的一部分，加載 XAML 文件。文件內部的事件（例如單擊按鈕）將由瀏覽器捕獲并通過(guò) JavaScript 處理。由于 Silverlight 內容的 DOM 已公開(kāi)，JavaScript 代碼也可以動(dòng)態(tài)地更新 Silverlight 內容，改變已呈現內容的狀態(tài)。
圖 1 示例應用程序
圖 2 顯示了支持 Silverlight 應用程序的體系結構。主編程接口是 JavaScript DOM API。它允許對 Silverlight XAML 內部觸發(fā)的事件作出反應（比如內容加載完成或動(dòng)畫(huà)結束時(shí)）。也可以調用方法操作表示層（比如啟動(dòng)動(dòng)畫(huà)或暫停視頻播放）。在它下方是 XAML 分析引擎。分析器創(chuàng )建內存中的 XAML DOM 供表示核心使用，該核心負責處理 XAML 定義的圖形和動(dòng)畫(huà)呈現。此外，運行時(shí)間包含了播放 WMV、WMA 和 MP3 多媒體內容所需的 Codec。
圖 2 Silverlight 體系結構
最后，運行庫包含了管理呈現過(guò)程的表示核心。此顯示運行時(shí)間內置于支持多種風(fēng)格 Windows 和 Mac OS X 的瀏覽器插件中，使用之前討論的任意瀏覽器。最終產(chǎn)生了一個(gè)可以插入瀏覽器并通過(guò) JavaScript 編寫(xiě)腳本的獨立圖形和媒體呈現引擎。
XAML 概述
XAML 是一種基于 XML 語(yǔ)言，可用于定義圖形資源、用戶(hù)界面、行為、動(dòng)畫(huà)等。微軟將它作為在 Windows Presentation Foundation 中使用的標記語(yǔ)言推出。Windows Presentation Foundation 是一種面向桌面的技術(shù)，屬于 .NET Framework 3.0 的一部分，旨在幫助協(xié)調設計人員和開(kāi)發(fā)人員在創(chuàng )建應用程序時(shí)的工作。
一直以來(lái)，設計人員使用一套工具和資源創(chuàng )建應用程序，而開(kāi)發(fā)人員則使用自己的另一套工具。工具集的不匹配可能對最終的應用程序產(chǎn)生負面影響。微軟推出新的 Expression 工具套件，主要是 Microsoft Expression? Design 和 Microsoft Expression Blend，讓專(zhuān)業(yè)設計人員可以分別將圖形項目和用戶(hù)界面放在一起，將最終結果表述為 XAML，以便開(kāi)發(fā)人員用此構建應用程序。
首次發(fā)布的 Silverlight 所使用的 XAML 不同于 Windows Presentation Foundation 使用的 XAML，前者是可用于桌面的完整 XAML 的面向 Web 子集。因此，如果您熟悉 Windows Presentation Foundation XAML，您可能會(huì )注意到缺失一些東西，比如 <Window> 標記、頁(yè)面資源、數據綁定和豐富控件模型。
在 XAML 中，元素是用 XML 標記定義的。每個(gè) Silverlight 文檔的根級別都是 Canvas 標記，它定義繪制 UI 元素的空間。該 Canvas 應包含 Silverlight 需要的 XML 命名空間聲明。
<Canvasxmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”></Canvas>
一個(gè) Canvas 可以有一或多個(gè)子項，子 Canvases 又可以創(chuàng )建它們自己的子項。Canvas 子項有相對于其父項的位置，而不是對根 Canvas。下面的示例中，一個(gè) Canvas 包含一個(gè)矩形 (Rectangle)，該矩形放在距其父項左上角 25 像素的位置。
<Canvas Width=”250” Height=”200”><Rectangle Canvas.Top=”25” Canvas.Left=”25”Width=”200” Height=”150” Fill=”Black” /></Canvas>
XAML 內部
Silverlight XAML 支持多種形狀，能夠合成復雜的對象。支持的基本圖形包括矩形、橢圓、線(xiàn)條、多邊形、復合線(xiàn)和路徑。它們大多數都是不解自明的。復合線(xiàn)允許定義一系列相連的線(xiàn)段。路徑允許定義一個(gè)通過(guò) Canvas 的非線(xiàn)性路徑（如同涂鴉）。
畫(huà)筆決定如何在屏幕上繪制對象。用 Fill 繪制內容，用 Stroke 繪制輪廓。畫(huà)筆分純色畫(huà)筆、漸變畫(huà)筆和圖像畫(huà)筆幾種。純色畫(huà)筆通過(guò) fill 屬性（如前例使用的 Fill="Black"）的固定色、或使用 SolidColorBrush 作為附加屬性實(shí)現（如下所示）：
<Rectangle Canvas.Top=”25” Canvas.Left=”25”Width=”200” Height=”150”><Rectangle.Fill><SolidColorBrush Color=”Black” /></Rectangle.Fill><Rectangle>
顏色可以通過(guò)名稱(chēng)（支持 141 種命名的顏色）或十六進(jìn)位 RGB 定義。
漸變畫(huà)筆通過(guò)在規范化空間中定義漸變域和若干漸變停留來(lái)實(shí)現。舉例來(lái)說(shuō)，假設在灰色陰影中，需要一個(gè)線(xiàn)形漸變，從右至左，從黑變白。指定漸變停留 0（規范化線(xiàn)的開(kāi)端）為黑色、漸變停留 1（規范化線(xiàn)的結束）為白色。Silverlight 就將為您繪制這個(gè)漸變。漸變也可以在二維空間中用規范化矩形定義空間來(lái)繪制（0,0 為左上，1,1 為右下）。要定義一個(gè)二維的填充矩形，左上為紅色，右下為黑色，中間是流暢的漸變，使用 XAML 如下：
<Rectangle Width=”200” Height=”150” ><Rectangle.Fill><LinearGradientBrush StartPoint=”0,0” EndPoint=”1,1”><LinearGradientBrush.GradientStops><GradientStop Color=”Red” Offset=”0” /><GradientStop Color=”Black” Offset=”1” /></LinearGradientBrush.GradientStops></LinearGradientBrush></Rectangle.Fill></Rectangle>
用 ImageBrushes 也可以繪制對象，圖像將被適當地剪切或拉伸。因此，例如可以指定使用 ImageBrush 填充橢圓，使用的 XAML 如下：
<Ellipse Width=”200” Height=”75” ><Ellipse.Fill><ImageBrush ImageSource=”http://.../logo.jpg” /></Ellipse.Fill></Ellipse>
在 XAML 中，文本可以用 TextBlock 標記呈現。這樣您可以控制文本的各個(gè)方面，如內容、字體、字號、折行等等。以下是一些示例：
<TextBlock>Hello</TextBlock><TextBlock FontSize=”18”>Hello</TextBlock><TextBlock FontFamily=”Courier New”>Hello</TextBlock><TextBlock TextWrapping=”Wrap” Width=”100”>Hello there, how are you?</TextBlock>
此外，Silverlight 支持用于實(shí)現文本輸入的鍵盤(pán)事件。在根元素上可以定義鍵盤(pán)事件（KeyDown 或 KeyUp），并使用事件參數獲知按下的是哪個(gè)鍵。
轉換、媒體和動(dòng)畫(huà)
XAML 允許在對象上定義多種轉換。RotationTransform 以定義的角度旋轉元素，ScaleTransform 可以用來(lái)拉伸或縮小對象，SkewTransform 使其在定義的方向上扭曲定義的量，TranslateTransform 根據定義的矢量移動(dòng)對象，MatrixTransform 則結合了以上所有轉換。
轉換可以分組，這樣，通過(guò)將轉換定義為組的一部分，可以將多個(gè)轉換置于對象之上。
圖 3 就是一個(gè)很好的示例。在此情況下，Canvas 中有 3 個(gè)橢圓。由于轉換在 Canvas 層次中定義，因此每個(gè)橢圓都將被旋轉和縮放。
使用 MediaElement 標記控制音頻和視頻內容。此標記具有源屬性，指向即將播放的媒體。使用此標記定義的對象提供了許多控制媒體播放的方法和事件。在文章稍后部分中，您將看到用 XAML 構建的簡(jiǎn)單媒體播放器示例，其中 JavaScript 實(shí)現了播放、暫停、停止等用戶(hù)交互。定義 MediaElement 非常簡(jiǎn)單：
<Canvas xmlns=”...” xmlns:x=”...”><MediaElement Source=”xbox.wmv” /></Canvas>
在 XAML 中實(shí)現動(dòng)畫(huà)的方式是定義屬性應該如何根據時(shí)間線(xiàn)逐漸發(fā)生變化。動(dòng)畫(huà)定義包含在 Storyboard 中。動(dòng)畫(huà)有各種不同的類(lèi)型，包括變化數字屬性的 DoubleAnimation、變化顏色和畫(huà)筆的 ColorAnimation、變化二維值的 PointAnimation。這些動(dòng)畫(huà)可以是線(xiàn)性的，也可以是基于關(guān)鍵幀的。在線(xiàn)性動(dòng)畫(huà)中，動(dòng)畫(huà)沿著(zhù)定義的時(shí)間線(xiàn)發(fā)生流暢的變化?；陉P(guān)鍵幀的動(dòng)畫(huà)可在離散的值之間移動(dòng)。
圖 4 顯示了一個(gè)隨時(shí)間改變圓形寬度的簡(jiǎn)單動(dòng)畫(huà)示例。AutoReverse 屬性設為 True，指示引擎繼續動(dòng)畫(huà)，在進(jìn)行過(guò)程中逆轉，使得圓形從寬到窄再到寬，而不是重復從寬到窄的轉換。
簡(jiǎn)單的 Silverlight 應用程序
在 Visual Studio 2005 中，您可以使用 Silverlight 應用程序模板（Silverlight SDK 下載的一部分），輕松構建 Silverlight 應用程序。本文中我使用了 Visual Web Developer? Express 應用程序，可以
從 MSDN? 下載。
本示例是個(gè)簡(jiǎn)單的媒體播放器，播放 WMV 視頻內容。它使用 Channel 9 視頻（
channel9.msdn.com），但您可以更改為播放您喜歡的任何視頻。XAML 十分簡(jiǎn)單，在
圖 5 中可以完整地看到。為簡(jiǎn)單起見(jiàn)，TextBlock 元素用于“Play”（播放）、“Stop”（停止）和“Pause”（暫停）按鈕。
MediaElement 標記用于定義視頻。它的名稱(chēng)是 mPlayer，其像素設為 640×400?！癝ource”標記指向一個(gè)微軟網(wǎng)站提供下載的 WMV 視頻。
接下來(lái)是三個(gè) TextBlock 元素，用于定義“Play”（播放）、“Stop”（停止）和“Pause”（暫停）按鈕。這些按鈕垂直排列在畫(huà)布左上方。注意 Canvas.Left 尚未設置，默認為 0。這些 TextBlock 元素定義了單擊 (MouseLeftButtonDown) 時(shí)引發(fā)的 JavaScript 事件處理程序。在它們上面按下鼠標按鈕時(shí)，Silverlight 將事件傳送至瀏覽器，由 JavaScript 捕獲和處理。
現在讓我們組合成一個(gè)應用程序：它使用此 XAML，并使用 Visual Web Developer Express 實(shí)現 JavaScript 事件處理程序。要使它工作，需要一個(gè) silverlight.js 文件，該文件可以從 Silverlight SDK 下載中得到，也可以在 MSDN 示例下載網(wǎng)站的任意 Silverlight 示例中得到。
使用 Visual Web Developer Express，創(chuàng )建新的 Web 站點(diǎn)。在該站點(diǎn)中創(chuàng )建名為 \js 的文件夾，在其中添加 silverlight.js 文件。右鍵單擊 \js 文件夾并選擇“Add New Item”（添加新項）。在新建文件對話(huà)框中選擇 JScript 文件，并將其稱(chēng)為 eventhandlers.js。
然后，右鍵單擊 Solution Explorer 中的項目，單擊“Add New Item”（添加新項），創(chuàng )建一個(gè)新的 XML 文件，名為 videoplayer.xaml。用
圖 5 列出的 XAML 填充。
最后，在項目中添加一個(gè)新的 HTML 頁(yè)面，命名為 Default.htm。編輯 HTML 頁(yè)面，使其加載 JavaScript 庫，并用它們創(chuàng )建一個(gè) Silverlight 播放器實(shí)例以呈現 XAML 內容。
圖 6 顯示了 Default.htm 的完整源代碼。
頁(yè)面頂端的腳本標記可導入 JavaScript 庫、silverlight.js 和 eventhandlers.js。silverlight.js 庫管理 Silverlight 插件的下載和實(shí)例化。它有瀏覽器和 OS 抽象，所以您毋須擔心；您只需利用 Sys.Silverlight.createObjectEx 函數實(shí)現新的 Silverlight 控件。Silverlight 插件本身應該位于分配了 ID 的 DIV 塊內部。在這種情況下，包含插件的 DIV 稱(chēng)為 AgControl1Host。實(shí)例化 Silverlight 內容時(shí)會(huì )用到此 ID。
Silverlight 插件的實(shí)例化方式是創(chuàng )建新的 Silverlight 控件實(shí)例，傳入大量參數以構造它。有關(guān)這些參數的詳細信息，請參見(jiàn) Silverlight SDK。
最后一步是實(shí)現 JavaScript 函數，該函數處理單擊“Play”（播放）、“Stop”（停止）和“Pause”（暫停）按鈕時(shí)觸發(fā)的事件。這些代碼應放入 eventhandlers.js。
function PlayVideo(sender,args){var mPlayer = sender.findName(“mPlayer”);mPlayer.Play();}function PauseVideo(sender,args){var mPlayer = sender.findName(“mPlayer”);mPlayer.Pause();}function StopVideo(sender,args){var mPlayer = sender.findName(“mPlayer”);mPlayer.Stop();}
在 XAML 中，Stop TextBlock 將 MouseLeftButtonDown 屬性定義為指向 JavaScript:StopVideo。通過(guò)創(chuàng )建接受 sender 和 args 參數的同名 JavaScript 函數實(shí)現此函數。使用 Silverlight 中的 findName 函數，可以在 DOM 內找到與已命名參數匹配的元素。因此，要停止正在播放的視頻，可以使用 findName API 來(lái)查找 MediaElement。在 XAML 中，該元素稱(chēng)為 mPlayer。findName API 將返回該對象的引用，可以將其載入 JavaScript var?，F在有了引用之后，您可以簡(jiǎn)單地調用它的 Stop 方法以停止視頻播放。播放和暫停功能與之相似。
就是這樣！簡(jiǎn)單的視頻播放器能立即與 Silverlight 組合在一起。運行應用程序，可以看到類(lèi)似于圖 7 所示的結果。
圖 7 簡(jiǎn)單的視頻播放器 (單擊該圖像獲得較大視圖)
當然如果希望硬編碼視頻 URI 到 XAML 里也是可以的，但這不是最可行的方式。讓我們看一下將其從靜態(tài) HTML 頁(yè)面更改為活動(dòng) Web 窗體，以將視頻作為參數接受。
第一步，從 XAML 中刪除對媒體文件的引用。更改 XAML 中的 MediaElement，刪除 Source 屬性。完成后應該如下所示：
<MediaElement x:Name=”mPlayer” Width=”640” Height=”400”/>
然后，在應用程序中創(chuàng )建一個(gè)名為 VideoPlayer.aspx 的新 Web 窗體 (ASPX)。此窗體應實(shí)體化一個(gè)源于 videoplayer.xaml 的 Silverlight 控件，如
圖 6 所示。此外，它應包含以下 JavaScript 代碼：
<script type=”text/javascript”>function root_Loaded(sender,args) {var mPlayer = sender.findName(“mPlayer”);mPlayer.Source =“<% Response.Write(Request.Params[“VideoURI”]); %>”;mPlayer.Play();}</script>
XAML 含有一個(gè)事件聲明，加載 Canvas 時(shí)引發(fā)該事件。這是由 JavaScript 中的 root_Loaded 事件處理程序捕獲的。該函數利用 ASP.NET 將 VideoURI 從服務(wù)器上的 HTTP 請求中提取出來(lái)，用 VideoURI 填入 JavaScript 函數，從而設置視頻源。頁(yè)面執行時(shí)，視頻（VideoURI 參數指定）將由 Silverlight 呈現。請注意，這個(gè)一個(gè)非常簡(jiǎn)單的示例，沒(méi)有任何錯誤處理或過(guò)濾，如果您希望自己的應用程序有此類(lèi)功能，則需要進(jìn)行添加。
注意，在使用如下 URI 調用此頁(yè)面時(shí)：
http://localhost/MSDN1/VideoPlayer.aspx?videouri=xbox.wmv
ASP.NET 將產(chǎn)生一個(gè)包含 JavaScript 塊的頁(yè)面，如下所示：
<script type=”text/javascript”>function root_Loaded(sender,args){var mPlayer =sender.findName(“mPlayer”);mPlayer.Source = “xbox.wmv”;mPlayer.Play();}</script>
之后此 JavaScript 將 xbox.wmv 文件載入 MediaElement，Silverlight 將播放視頻。以上說(shuō)明使用服務(wù)器端活動(dòng)頁(yè)面（ASPX、PHP 或 Java）可以通過(guò)增加靈活性，大大改善 Silverlight 最終用戶(hù)體驗。
Silverlight 服務(wù)器應用程序
如果說(shuō)把 Silverlight 只看作一種在瀏覽器中嵌入豐富內容的客戶(hù)端技術(shù)，并不十分公平。這些豐富的功能已經(jīng)可以通過(guò)使用封閉插件獲得，如 Java Applets、ActiveX? 控件或 Flash 應用程序。相比較而言，由于用戶(hù)界面是以基于文本的 XAML 定義，而且通過(guò)使用 JavaScript 達到可編程性，因此 Silverlight 是一種開(kāi)放的技術(shù)。它允許開(kāi)發(fā)人員輕易地構建與后端服務(wù)器交互的應用程序。
以天氣預報應用程序為例。如果想在客戶(hù)端創(chuàng )建天氣預報應用程序，可以構建一個(gè)使用 Web 服務(wù)的 Java 小程序、ActiveX 控件或 Flash 應用程序，將其部署入客戶(hù)端。然而，這增加了客戶(hù)端和服務(wù)器通信的需要。如果數據源是付費訂閱服務(wù)，該怎么辦？應用程序部署人員必須驗證所有數據服務(wù)訪(fǎng)問(wèn)者的許可證，這將占用構建域特定業(yè)務(wù)邏輯的時(shí)間。
然而，如果應用程序可以在服務(wù)器端組裝，并且所有數據傳回客戶(hù)端，問(wèn)題就迎刃而解了。使用 Expression Blend 這樣的工具，應用程序用戶(hù)界面的模板可以組裝和表達為 XAML。開(kāi)發(fā)人員在運行時(shí)就可以收集相關(guān)數據并將其插入模板，將最終的 XAML 返回至客戶(hù)端并呈現?？蛻?hù)端不需要任何邏輯或連接（當然啟動(dòng)時(shí)與服務(wù)器的初始連接除外），部署和管理客戶(hù)端也因此會(huì )相對容易。
構建天氣預報應用程序
這一部分將介紹如何構建簡(jiǎn)單的 XAML 文件以實(shí)現天氣預報應用程序（請參見(jiàn)圖 8）。完成后的天氣預報應用程序，將為特定的郵政編碼呈現三日的氣溫預報。該郵政編碼作為瀏覽器內陸址的參數傳送至應用程序。它還會(huì )呈現天氣的圖形表現形式、正確的日期、郵政編碼所在地名稱(chēng)，以及天氣數據的動(dòng)畫(huà)。天氣預報應用程序的所有 XAML 清單都可以在《MSDN 雜志》網(wǎng)站中找到。
圖 8 Silverlight 天氣預報應用程序 (單擊該圖像獲得較大視圖)
文檔頂端是打開(kāi)的 Canvas 標記。這是個(gè)基本容器，在上面可以繪制對象。Canvas 不只限于一個(gè)，而且用 Canvas 組合相關(guān)元素是有用的。因此，舉例來(lái)說(shuō)，每一天可以包括圖解、最高氣溫、最低氣溫和各種標簽，所有這些都收集到一個(gè) XAML 模板中。
圖 9 是某天的示例。在這種情況下，Canvas 包含了許多 TextBlocks 和 Image 控件。此 canvas 的給定名稱(chēng)為 cnv2，置于屏幕中，不透明度為 0（意味著(zhù)最初不可見(jiàn)）。它的高度、寬度、左邊界和上邊界設置使其處于屏幕上特定的位置。
TextBlock 用于在 Silverlight 中呈現文本。這里有許多 TextBlock，有的用作硬編碼標簽，比如存儲在名為 lblDegHigh2 和 lblDegLow2 的 TextBlock 中的“°F”標簽。在 x:Name 屬性中可以找到名稱(chēng)。
名為 lblDate2、lblHigh2 和 lblLow2 的 TextBlock 包含占位符信息—目前它們都硬編碼為特定的數據和溫度，但您的 ASP.NET 代碼將用指定郵政編碼的實(shí)時(shí)日期和溫度覆蓋它們。
定義淡入動(dòng)畫(huà)
Canvas 節點(diǎn)支持觸發(fā)器，觸發(fā)響應事件的操作。在這種情況下，Canvas.Triggers 被設置為在頁(yè)面加載（如下所示）時(shí)觸發(fā)：
<Canvas.Triggers><EventTrigger RoutedEvent=”FrameworkElement.Loaded”><BeginStoryboard>...
這樣，當頁(yè)面加載時(shí)，觸發(fā)器觸發(fā)，動(dòng)畫(huà) Storyboard 啟動(dòng)。動(dòng)畫(huà) Storyboard 定義動(dòng)畫(huà)行為。以下是用在 Canvas （包括特定日期天氣的文本占位符和圖形）上的動(dòng)畫(huà)，名為 cnv1：
<DoubleAnimationUsingKeyFrames BeginTime=”00:00:00”Storyboard.TargetName=”cnv1”Storyboard.TargetProperty=”(UIElement.Opacity)”><SplineDoubleKeyFrame KeyTime=”00:00:00” Value=”0”/><SplineDoubleKeyFrame KeyTime=”00:00:01” Value=”1”/></DoubleAnimationUsingKeyFrames>
動(dòng)畫(huà)類(lèi)型為 DoubleAnimationUsingKeyFrames。您將在 0 至 1 之間修正 Canvas 及其子項的不透明度（由 UIElement.Opacity 定義），使其在一段時(shí)間內淡入。該時(shí)間由與動(dòng)畫(huà)相關(guān)聯(lián)的關(guān)鍵幀決定。
當 XAML 呈現時(shí)，Storyboard 將啟動(dòng)，使第一個(gè)元素在呈現開(kāi)始（0 秒時(shí)）至 1 秒之后由不透明度 0 淡入至不透明度 1。觀(guān)察 XAML 您就會(huì )發(fā)現，其他的 Canvas 將在 1 至 2 秒之間以及 2 至 3 秒之間分別淡入，產(chǎn)生一種逐漸出現的效果。
XAML 是一種有效的 XML，因此元素可以由其屬性命名，并通過(guò)該名稱(chēng)找到它們。因此，舉例來(lái)說(shuō)，第一天的高溫圖形占位符元素將如下所示：
<TextBlock x:Name=”lblHigh1” Width=”67” Height=”59”Canvas.Left=”112” Canvas.Top=”30” FontFamily=”Tahoma”FontSize=”48” FontWeight=”Bold” Foreground=”#FFF64F12”Text=”27” TextWrapping=”Wrap”/>
此 TextBlock 被命名為 lblHigh1。服務(wù)（您將在下一步看到）使用 XMLDocument 加載模板 XAML，找到此名稱(chēng)的節點(diǎn)，利用如下所示的 C# 代碼改變其文本屬性：
string xpath = “//d:TextBlock[@x:Name=’lblHigh1’]”;xNode = xmlDoc.SelectSingleNode(xpath, mng);string high = myResults[n - 1].MaxTemperatureF;xNode.Attributes[“Text”].Value = high;
創(chuàng )建 XAML 服務(wù)
當您在網(wǎng)頁(yè)上使用 Silverlight 時(shí)，控件采用的參數之一是 XAML 呈現的位置。在這種情況下，XAML 是動(dòng)態(tài)的，根據請求天氣的郵政編碼而變化。因此，您將創(chuàng )建一個(gè) Web 應用程序，產(chǎn)生并返回 XAML，而呈現它的頁(yè)面將指向此頁(yè)面。這是構建此 Silverlight 應用程序的第一步。
使用 Visual Studio ? 創(chuàng )建新的 Web 項目。添加一個(gè)包含 silverlight.js 的 \js 目錄，方法與您處理前面的視頻播放器相同。為項目添加新的 Web 引用，引用如下定義的 Web 服務(wù)：
http://www.webservicex.net/WeatherForecast.asmx?WSDL
將服務(wù)命名為 weatherservice。為項目添加新的 Web 窗體并稱(chēng)之為 Web Form XAMLSource.aspx。選擇“添加代碼”作為一個(gè)獨立頁(yè)面選項。確保代碼頁(yè)頂端有如下一套 using 指令：
using System;using System.Data;using System.Configuration;using System.Collections;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;using System.Xml;using System.Xml.XPath;
在本節的余下部分，您將為 XAMLSource.aspx 上的 Page_Load 事件處理程序添加代碼。首先，將名為 Scene.xaml 的模板加載到一個(gè) XMLDocument 對象：
XmlDocument xmlDoc = new XmlDocument();xmlDoc.Load(Server.MapPath(“Scene.xaml”));
然后，設置讀取參數。您將使用查詢(xún)字符串參數（指定了要求的郵政編碼）來(lái)調用頁(yè)面：
http://server/XamlSource.aspx?ZIP=<something>
要檢索參數，可使用以下代碼：
string strZip = “98052”;if (Request.Params[“ZIP”] != null)strZip = Request.Params[“ZIP”];
這將啟動(dòng)本地保存參數化郵編的字符串，并且當它未作為 HTTP 請求的一部分傳入時(shí)，設置其默認值。下一步，創(chuàng )建對處理天氣信息的 Web 服務(wù)的調用：
weatherservice.WeatherForecast myWeather = newweatherservice.WeatherForecast();weatherservice.WeatherForecasts myForecast =myWeather.GetWeatherByZipCode(strZip);weatherservice.WeatherData[] myResults = myForecast.Details;
此代碼創(chuàng )建了一個(gè) Web 服務(wù)代理（當添加服務(wù)的 WSDL 的引用時(shí)，由 Visual Studio 為您創(chuàng )建）的實(shí)例，稱(chēng)為 myWeather。Web 服務(wù)在 WeatherForecasts 數據結構內返回數據，因此通過(guò)調用服務(wù)中的 GetWeatherByZipCode 方法（并對其傳遞一個(gè)字符串）創(chuàng )建此數據結構的一個(gè)實(shí)例（稱(chēng)為 myForecast）。預報對象的 Details 成員是一個(gè) WeatherData 類(lèi)型的數組，因此 myResults 變量被設置為其實(shí)例。
下一步是初始化 XMLDocument 以便用 XPath 進(jìn)行搜索。由于 XML 使用 XAML 架構作為部分元素的命名空間（用 x 做前綴，例如 x:Name），您將需要為頁(yè)面上的所有元素（包括沒(méi)有前綴的元素）定義命名空間。例如，您不能搜索與 XPath //TextBlock 匹配的節點(diǎn)，但您可以指定默認的命名空間采用一個(gè)新的前綴（此情形下使用 d 表示虛擬），然后搜索使用這個(gè)前綴的默認節點(diǎn)，即 //d:TextBlock。代碼如下：
NameTable myn = new NameTable();XmlNamespaceManager mng = new XmlNamespaceManager(new NameTable());mng.AddNamespace(“d”,“http://schemas.microsoft.com/winfx/2006/xaml/presentation”);mng.AddNamespace(“x”, “http://schemas.microsoft.com/winfx/2006/xaml”);
現在您已可以使用 XPath，接下來(lái)您可以找到包含城市名稱(chēng)的節點(diǎn)，以及將其 Text 屬性更改為該郵政編碼所標識的服務(wù)所在的城市名稱(chēng)。
XmlNode xNode = xmlDoc.SelectSingleNode(“//d:TextBlock[@x:Name=’lblTownName’]”, mng);xNode.Attributes[“Text”].Value =myForecast.PlaceName + “,” + myForecast.StateCode;
類(lèi)似地，您可以在其后的三天里循環(huán)，找到包含所需位置的占位符節點(diǎn)，并得到其值，把正確的值置于 XML 中，代碼如
圖 10 所示。
現在您使用模板和正確的數據完整填充了您的 XML 文檔，最后一步是將其返回給調用方。要完成這一步，需要設置 MIME 類(lèi)型，將 XMLDocument 對象的內容直接寫(xiě)入響應流，按如下所示：
Response.ContentType = “text/xml”;Response.Write(xmlDoc.InnerXml);
下一步，刪除 Visual Studio 在 ASPX 頁(yè)面中給您的占位符 HTML。刪除 ASPX 文件中第一行之外的所有內容。完成后應該如以下代碼所示：
<%@ Page Language=”C#” AutoEventWireup=”true”CodeFile=”XamlSource.aspx.cs” Inherits=”_Default” %>
最后一步是在解決方案中添加一個(gè)新的 XML 文件，稱(chēng)為 Scene.xaml。在早先代碼中曾提及此文件。得到完整的天氣 XAML，并將其粘貼至此文件?，F在就可以執行頁(yè)面了，在瀏覽器中應該能看到 XAMLSource.aspx 頁(yè)面返回的 XAML。
將 XAML 傳送至 Silverlight 前端
前面幾步構建了模板 XAML，然后構建了使用該 XAML 的 Web 窗體，使用 Web 服務(wù)，將 Web 服務(wù)調用的結果放入 XAML 中正確的位置。下一步是提供包含 Silverlight 控件的頁(yè)面，并使其指向此 XAML 服務(wù)。
打開(kāi)前幾部分使用的站點(diǎn)，添加一個(gè)新的 Web 窗體，稱(chēng)為 Default.aspx。在 Default.aspx 中修改 HTML 代碼，如
圖 11 所示。
重要部分在于調用 Silverlight.createObjectEx，在此靜態(tài)的 videoplayer.xaml 已經(jīng)由對 XAML 源應用程序的調用取代，在調用中傳遞 Default.aspx 頁(yè)面為郵政編碼接收的參數：
“WeatherSite/XamlSource.aspx?ZIP=<%if (Request.Params[“ZIP”] == null)Response.Write(“98052”);elseResponse.Write(Request.Params[“ZIP”]);%>”
此操作將請求參數放入頁(yè)面，并將其附加到一個(gè) URL，后者會(huì )調用最后一步創(chuàng )建的 XamlSource 頁(yè)面。隨后將對 XamlSource 進(jìn)行調用，傳遞郵政編碼，獲得由 Silverlight 呈現的 XAML 文件。Default.aspx?ZIP=90210 的運行結果見(jiàn)圖 8。
摘要
本文深入介紹了 Silverlight。您也看到一些應用程序，它們不僅僅是鸚鵡學(xué)舌式地說(shuō)“Hello, World”，而是展示了諸如如何用 XAML 構造用戶(hù)界面，如何與 JavaScript 關(guān)聯(lián)進(jìn)行交互，如何從單純的客戶(hù)端模式轉為基于服務(wù)器的模式，從而讓?xiě)贸绦蚋哽`活性。這種方法讓您了解到如何創(chuàng )建簡(jiǎn)單的視頻播放器，能接受視頻流的 URI 并回放，在博客等環(huán)境下使用非常理想。
此外，通過(guò)天氣監視器（有非常簡(jiǎn)單的客戶(hù)端分布模型）的形式，您學(xué)會(huì )了如何構建可感知數據的應用程序。只需要讓 Silverlight 組件調用服務(wù)器，獲得正確的 XAML 并呈現它，從而形成豐富的瘦客戶(hù)端。
雖然 ASP.NET 和微軟堆棧為構建這樣的 Web 應用程序提供了高效率的平臺，本文的下載部分也包含了此應用程序的 Java 版本。此版本提供了與 ASP.NET 版本同樣的功能，即使用 Web 服務(wù)獲取數據，然后將 XAML 加載到 XML Document DOM 中。它隨后找出模板數據的適當節點(diǎn)，在將完成的 XAML 寫(xiě)出成為 URI 之前，將他們的值替換為來(lái)自 Web 服務(wù)的值。隨即構造 JSP（未列出），引用此 servlet 的 URL 以使用 Silverlight 呈現 XAML。
