*這篇文章基于 Silverlight 的預(yù)發(fā)布版。文中包含的所有信息均有變更可能。
本文討論:

Silverlight 和 XAML 簡(jiǎn)介 構(gòu)建簡(jiǎn)單的 Silverlight 應(yīng)用程序 在服務(wù)器上動(dòng)態(tài)生成 Silverlight 應(yīng)用程序 創(chuàng)建 XAML 服務(wù)

本文使用了以下技術(shù): Silverlight, XAML, JavaScript

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

NEW: Explore the sample code online! - or - 代碼下載位置: Silverlight2007_06.exe (300KB)

轉(zhuǎn)載于:https://www.cnblogs.com/RuiLei/archive/2007/08/05/843952.html

總結(jié)

以上是生活随笔為你收集整理的Silverlight Expression[转]的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。