http://nibblestutorials.net/


Silverlight 是一種新的 Web 呈現技術，能在各種平臺上運行。借助該技術，您將擁有內容豐富、視覺效果絢麗的交互式體驗，而且，無論是在瀏覽器內、在多個設備上還是在桌面操作系統（如 Apple Macintosh）中，您都可以獲得這種體驗。Microsoft .NET Framework 3.0（Windows 編程基礎結構）中的呈現技術 XAML（可擴展應用程序標記語言）遵循 WPF (Windows Presentation Foundation)，它是 Silverlight 呈現功能的基礎。

本白皮書將逐步引導您了解 Silverlight 的基本情況，以及如何使用 Microsoft 的眾多工具（包括 Microsoft Expression Blend、Microsoft Visual Studio 2005 和 XAML）來構建內容豐富的圖形站點。首先，讓我們了解一下 Silverlight 發展歷程的相關背景信息，以及它在開發領域所處的位置。

Web 開發的演變：轉向 Web.Next

CERN 的 Tim Berners-Lee 發明現代 Web 時，初衷是將其作為允許在基于網絡的系統上存儲和鏈接靜態文檔的系統。之后的數年間，隨著創新的發展和成熟，“活動”文檔自然而然地成為了現代 Web 發展的新階段，這些文檔在收到訪問請求時即會生成，文檔中包含特定于時間或用戶的信息。CGI 之類的技術成為了這一階段的實現基礎。隨著時間的推移，在 Web 上生成文檔的功能變得極為重要，技術上的發展也歷經 CGI、Java、ASP，到達 ASP.NET 階段。

在使開發人員擁有采用服務器開發模式并使用 Visual Studio 系列產品中的同類最佳工具快速開發高質量 Web 應用程序的能力這一方面，ASP.NET 樹立了一個里程碑。

事實證明，用戶體驗是 Web 應用程序中的一大障礙，在這方面，技術上的限制使 Web 應用程序無法提供與使用本地數據的客戶端應用程序同樣豐富的用戶體驗。

XMLHttpRequest 對象（2000 年由 Microsoft 作為 Internet Explorer 5 的一部分發布）成為了異步 JavaScript 和 XML (AJAX) 技術的基礎，該技術使 Web 應用程序能夠更加動態地響應用戶輸入，因為采用該技術時只會刷新網頁的一小部分，并不需要重新加載所有內容。基于 AJAX 構建的創新型解決方案（如 Windows Live Local 映射）使 Web 應用程序更進一步，已經能夠提供與客戶端類似的用戶體驗。

Silverlight 是應用程序開發人員和設計人員可以向其客戶呈現潛在用戶體驗豐富性的下一個發展階段。為了實現此目的，它允許設計人員展現其創造力并以能夠直接對 Web 產生影響的格式保存其工作。過去，設計人員會使用提供了豐富輸出功能的工具來設計網站和用戶體驗，但在這些設計的實現能力方面，開發人員會受到 Web 平臺的限制。在 Silverlight 模型中，設計人員可以構建所需的用戶體驗，并將其表示為 XAML。隨后，開發人員可以使用 Silverlight 運行時直接將該 XAML 合并到網頁中。因此，兩者的合作可以比以往任何時候都更加緊密，從而提供豐富的客戶端用戶體驗。

由于 XAML 屬于 XML，因此它是基于文本的，能夠為這些豐富的內容提供與防火墻兼容的、易于檢查的說明。盡管其他技術（如 Java 小程序、ActiveX 和 Flash）可用來部署比 DHTML/CSS/JavaScript 更豐富的內容，但它們都會向瀏覽器發送二進制內容。這就導致難以進行安全性審核，更不用說還有更新上的困難，因為進行任何更改后都必須重新安裝整個應用程序，而這并不是友好的用戶體驗，并且可能導致頁面停滯。如果使用 Silverlight，則需要更改豐富的內容時，服務器端會生成新的 XAML 文件。用戶下次瀏覽到該頁面時，會下載該 XAML 并更新體驗，而不需要進行任何重新安裝。

Silverlight 的核心是瀏覽器增強模塊，其作用是呈現 XAML 并在瀏覽器界面上繪制生成的圖形。它的下載體積較小（不到 2 MB），可以在用戶點擊包含 Silverlight 內容的站點時進行安裝。該模塊向 JavaScript 開發人員公開 XAML 頁面的底層框架，以便實現頁面級的內容交互，這樣，開發人員就可以進行自己的工作，例如編寫事件處理程序或使用 JavaScript 代碼來處理 XAML 頁面內容。

不過，理論方面的探討已經夠多的了！我們還是通過實踐來看一看我們的第一個 Silverlight 項目。

構建一個簡單的 Silverlight 應用程序

我們先來看一看 Microsoft Expression Blend，使用該工具創建一個 XAML 格式的非常簡單的應用程序，以供 Silverlight 使用。要在 Blend 中創建 Silverlight 應用程序，請選擇 File（文件）->New project（新建項目），此時會打開“New Project”（新建項目）對話框。請參見圖 1。

選擇 OK（確定），即會創建一個新項目。該項目將包含一個默認 HTML 頁面、該頁面的一些 JavaScript 源代碼、一篇 XAML 文檔和該 XAML 文檔的 JavaScript 源代碼及 Silverlight.js。

Silverlight.js 包含用于下載和實例化 Silverlight 控件的代碼。它作為 Silverlight SDK 的一部分提供給用戶。

Default.html 是標準的 HTML 網頁。該網頁包含三個 JavaScript 腳本引用，分別指向 Silverlight.js、Default.html.js（其中包含特定于應用程序的用于安裝 Silverlight 的代碼）和 Scene.xaml.js（其中包含在 XAML 中定義的應用程序事件的事件處理程序）。

它被設計為一個獨立的頁面 (default.html)，與實例化邏輯 (default.html.js)、設計 (Scene.xaml) 和事件代碼 (Scene.xaml.js) 分開。不過，理論方面的探討已經夠多了，現在我們開始開發一個簡單的應用程序。

創建供視頻播放器使用的 UI

在項目中添加視頻文件。為此，請右鍵單擊屏幕右上方 Project Files（項目文件）窗口中的項目文件，然后選擇 Add Existing Item...（添加現有項目）。

選擇某個 WMV 文件并將其添加到項目時，項目瀏覽器中將顯示該文件，同時在視圖中添加了一個媒體元素。

現在即可運行您的項目，瀏覽器將啟動并播放您的視頻！

通過編輯 XAML 可以停止自動播放視頻。您會看到 XAML 設計器右側有兩個選項卡：Design（設計）和 XAML。選擇“XAML”選項卡，會打開 XAML 編輯器，如圖 3 中所示。使用該編輯器為媒體元素編輯 XAML 文本，添加屬性 AutoPlay=False。

現在，如果您運行該應用程序，會看到 Silverlight 內容雖然呈現了視頻的第一幀，但并不播放。

在視頻播放器中添加控件

為該應用程序添加兩個文本塊，文本內容分別為 Play 和 Stop，名稱分別為 txtPlay 和 txtStop。完成后，XAML 應如下所示：

<Canvas    xmlns="http://schemas.microsoft.com/client/2007"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    Width="640" Height="480"    Background="White"    >    <MediaElement AutoPlay="False" x:Name="Movie_wmv" Width="320" Height="240" Canvas.Left="128" Canvas.Top="56" Source="Movie.wmv" Stretch="Fill"/>    <TextBlock x:Name="txtPlay" Width="72" Height="24" Canvas.Left="136" Canvas.Top="336" Text="Play" TextWrapping="Wrap"/>    <TextBlock x:Name="txtStop" Width="80" Height="24" Canvas.Left="136" Canvas.Top="368" Text="Stop" TextWrapping="Wrap"/></Canvas>

接下來，為文本塊在 XAML 中添加事件處理程序聲明。為此，可以使用 MouseLeftButtonDown 屬性聲明單擊鼠標的處理程序。在 txtPlay 文本塊中，添加對 DoPlay 的事件處理程序；在 txtStop 文本塊中，添加對 DoStop 的事件處理程序。完成后，XAML 應如下所示：

<TextBlock x:Name="txtPlay" Width="72" Height="24" Canvas.Left="136"        Canvas.Top="336" Text="Play" TextWrapping="Wrap"         MouseLeftButtonDown="javascript:DoPlay"/><TextBlock x:Name="txtStop" Width="80" Height="24" Canvas.Left="136"        Canvas.Top="368" Text="Stop" TextWrapping="Wrap"        MouseLeftButtonDown="javascript:DoStop"/>

現在，如果用戶單擊其中一個文本塊，將觸發一個事件，您可通過 JavaScript 功能捕獲并處理該事件。

在 JavaScript 中處理事件

模板創建的 Scene.xaml.js 可用于在 JavaScript 中捕獲并處理用戶事件。由于您在 XAML 內指定了 DoPlay 和 DoStop 事件處理程序，因此應在此處付諸實施。相應的代碼如下所示：

function DoPlay(sender, eventArgs){    var theHost = document.getElementById("SilverlightControl");    var theMedia = theHost.content.findName("Movie_wmv");    theMedia.Play();}function DoStop(sender, eventArgs){    var theHost = document.getElementById("SilverlightControl");    var theMedia = theHost.content.findName("Movie_wmv");    theMedia.Stop();}

在本例中，將 Silverlight 控件稱為 SilverlightControl，將引用該控件的 JavaScript 變量稱為 theHost。稍后查找媒體元素（在本例中稱為 Movie_wmv）時，將用到上述名稱。在項目中添加電影時，為您創建了此媒體元素，該元素的名稱是根據電影名稱命名的。因此，如果電影的名稱是 Movie.wmv，則此媒體元素就稱為 Movie_wmv。如果使用其他電影，則控件也會相應地采用其他名稱。

該媒體元素有 Play 和 Stop 兩個方法，分別用于啟動或停止媒體播放。

由于存在對該媒體元素的引用，因而可以調用上述方法，電影將隨之停止或啟動，如圖 4 中所示。

至此，您已構建了自己的第一個 Silverlight 應用程序！有關 Silverlight 的更多資源，請查看新的 Silverlight 開發人員中心和 http://www.silverlight.net/。

了解 Silverlight 調用

HTML 頁面會調用 Default.html.js 源代碼頁中的 createSilverlight()。

Sys.Silverlight.createObjectEx({       source: "Scene.xaml",       parentElement: document.getElementById("SilverlightControlHost"),       id: "SilverlightControl",       properties: {          width: "100%",          height: "100%",          version: "0.9"       },       events: {          onLoad: Sys.Silverlight.createDelegate(scene, scene.handleLoad)       }    }); 

該調用將用到許多屬性，其中包括那些用于定義要呈現的 XAML、Silverlight 控件外觀以及 onLoad 和 onError 事件處理程序的屬性。

source:屬性用于定義希望 Silverlight 控件呈現的 XAML。該屬性可以是外部文件（如本例中所示），也可以是包含 XAML 的頁面上的命名 <script> 標記。

在頁面上添加 Silverlight 控件時，應將該控件添加到命名 <DIV> 內。應將 parentElement:屬性作為該 <DIV> 的名稱。

控件的 ID 由 id:屬性指定。

控件的物理屬性（如高度、寬度和版本）是由加載到 properties:屬性中的數組設定的。要查看全部屬性，請參閱 Silverlight SDK 文檔。

結束語

本白皮書中高度概述了 Microsoft Silverlight，并介紹了 Silverlight 對下一代 Web 應用程序開發堆棧的適用情況。您已經看到，XAML 就像一個凝聚體，將設計人員的規范、開發人員的工具和面向用戶的交付三者結合在了一起。您大體了解了 Expression Blend，并學習了如何用它來為網頁定義 UI，以及如何使用 JavaScript 對它們進行編程。

您通過本文所了解的內容只觸及到 Silverlight 功能的皮毛。這項技術中蘊含著諸多功能，您現在就可以使用這項技術開始構建下一個 Web。這會是一個有趣的旅程，快來體驗吧！