安靜的等待

什么是 Silverlight？

Silverlight 是一種新的 Web 呈現(xiàn)技術(shù)，能在各種平臺(tái)上運(yùn)行。借助該技術(shù)，您將擁有內(nèi)容豐富、視覺效果絢麗的交互式體驗(yàn)，而且，無論是在瀏覽器內(nèi)、在多個(gè)設(shè)備上還是在桌面操作系統(tǒng)（如 Apple Macintosh）中，您都可以獲得這種體驗(yàn)。Microsoft .NET Framework 3.0（Windows 編程基礎(chǔ)結(jié)構(gòu)）中的呈現(xiàn)技術(shù) XAML（可擴(kuò)展應(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)容豐富的圖形站點(diǎn)。首先，讓我們了解一下 Silverlight 發(fā)展歷程的相關(guān)背景信息，以及它在開發(fā)領(lǐng)域所處的位置。

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

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

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

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

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

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

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

返回頁(yè)首

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

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

選擇某個(gè) WMV 文件并將其添加到項(xiàng)目時(shí)，項(xiàng)目瀏覽器中將顯示該文件，同時(shí)在視圖中添加了一個(gè)媒體元素。

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

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

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

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

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

在視頻播放器中添加控件

為該應(yīng)用程序添加兩個(gè)文本塊，文本內(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 文本塊中，添加對(duì) DoPlay 的事件處理程序；在 txtStop 文本塊中，添加對(duì) 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)在，如果用戶單擊其中一個(gè)文本塊，將觸發(fā)一個(gè)事件，您可通過 JavaScript 功能捕獲并處理該事件。

在 JavaScript 中處理事件

模板創(chuàng)建的 Scene.xaml.js 可用于在 JavaScript 中捕獲并處理用戶事件。由于您在 XAML 內(nèi)指定了 DoPlay 和 DoStop 事件處理程序，因此應(yīng)在此處付諸實(shí)施。相應(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）時(shí)，將用到上述名稱。在項(xiàng)目中添加電影時(shí)，為您創(chuàng)建了此媒體元素，該元素的名稱是根據(jù)電影名稱命名的。因此，如果電影的名稱是 Movie.wmv，則此媒體元素就稱為 Movie_wmv。如果使用其他電影，則控件也會(huì)相應(yīng)地采用其他名稱。

該媒體元素有 Play 和 Stop 兩個(gè)方法，分別用于啟動(dòng)或停止媒體播放。

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

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