Silverlight 入門

什麼是 Silverlight？

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。

圖 1. 使用 Expression Blend 創建新的 Silverlight 項目

選擇 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 文件並將其添加到項目時，項目瀏覽器中將顯示該文件，同時在視圖中添加了一個媒體元素。

圖 2. 在 XAML 視圖中添加媒體元素

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

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

圖 3. 在 XAML 編輯器中編輯 XAML

現在，如果您運行該應用程序，會看到 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 中所示。

圖 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。這會是一個有趣的旅程，快來體驗吧！