安靜的等待

什么是 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 發展歷程的相關背景信息，以及它在開發領域所處的位置。

構建一個簡單的 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. 運行應用程序