安靜的等待

什么是 Silverlight？

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

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

構(gòu)建一個簡單的 Silverlight 應(yīng)用程序

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

圖 1. 使用 Expression Blend 創(chuàng)建新的 Silverlight 項目

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

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

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

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

返回頁首

創(chuàng)建供視頻播放器使用的 UI

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

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

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

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

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

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

現(xiàn)在，如果您運行該應(yīng)用程序，會看到 Silverlight 內(nèi)容雖然呈現(xiàn)了視頻的第一幀，但并不播放。

在視頻播放器中添加控件

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

<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 屬性聲明單擊鼠標(biāo)的處理程序。在 txtPlay 文本塊中，添加對 DoPlay 的事件處理程序；在 txtStop 文本塊中，添加對 DoStop 的事件處理程序。完成后，XAML 應(yīng)如下所示：

<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"/>

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

在 JavaScript 中處理事件

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

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）時，將用到上述名稱。在項目中添加電影時，為您創(chuàng)建了此媒體元素，該元素的名稱是根據(jù)電影名稱命名的。因此，如果電影的名稱是 Movie.wmv，則此媒體元素就稱為 Movie_wmv。如果使用其他電影，則控件也會相應(yīng)地采用其他名稱。

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

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

圖 4. 運行應(yīng)用程序