微軟的Silverlight應(yīng)用程序現(xiàn)在已經(jīng)可以在Expression Blend下創(chuàng)立了，這不僅簡化了程序人員的工作，也讓大家分工更加明確。

Microsoft Expression Blend 作為一款功能齊全的專業(yè)設(shè)計(jì)工具，可用來針對 Windows Presentation Foundation (WPF) 和 Microsoft Silverlight 應(yīng)用程序制作精美復(fù)雜的用戶界面。Expression Blend 可讓設(shè)計(jì)人員集中精力從事創(chuàng)作，而讓開發(fā)人員集中精力從事編程工作。通過構(gòu)建一個(gè)簡單的Silverlight 3 應(yīng)用程序，我們可以大體了解 Expression Blend，并學(xué)習(xí)如何用它來為網(wǎng)頁定義 UI，以及如何使用 JavaScript 對它們進(jìn)行編程。

首先我們使用 Microsoft Expression Blend 3創(chuàng)建一個(gè) XAML 格式的非常簡單的應(yīng)用程序，以供 Silverlight 使用。

圖1 Expression Blend 3

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

在 Blend 中創(chuàng)建 Silverlight 應(yīng)用程序，選擇 File(文件)->New project(新建項(xiàng)目)，此時(shí)會(huì)打開“New Project”(新建項(xiàng)目)對話框，選擇 OK(確定)，即會(huì)創(chuàng)建一個(gè)新項(xiàng)目。

圖2 新建項(xiàng)目

該項(xiàng)目將包含一個(gè)默認(rèn) HTML 頁面、該頁面的一些 JavaScript 源代碼、一篇 XAML 文檔和該 XAML 文檔的 JavaScript 源代碼及 Silverlight.js。Silverlight.js 包含用于下載和實(shí)例化 Silverlight 控件的代碼。它作為 Silverlight SDK 的一部分提供給用戶。Default.html 是標(biāo)準(zhǔn)的 HTML 網(wǎng)頁。該網(wǎng)頁包含三個(gè) JavaScript 腳本引用，分別指向 Silverlight.js、Default.html.js(其中包含特定于應(yīng)用程序的用于安裝 Silverlight 的代碼)和 Scene.xaml.js(其中包含在 XAML 中定義的應(yīng)用程序事件的事件處理程序)。它被設(shè)計(jì)為一個(gè)獨(dú)立的頁面 (default.html)，與實(shí)例化邏輯 (default.html.js)、設(shè)計(jì) (Scene.xaml) 和事件代碼 (Scene.xaml.js) 分開。不過，理論方面的探討已經(jīng)夠多了，現(xiàn)在我們開始開發(fā)一個(gè)簡單的應(yīng)用程序。

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

在項(xiàng)目中添加視頻文件。右鍵單擊屏幕右上方 Project Files(項(xiàng)目文件)窗口中的項(xiàng)目文件，然后選擇 Add Existing Item...(添加現(xiàn)有項(xiàng)目)。選擇某個(gè) WMV 文件并將其添加到項(xiàng)目時(shí)，項(xiàng)目瀏覽器中將顯示該文件，同時(shí)在視圖中添加了一個(gè)媒體元素。現(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 編輯器。使用該編輯器為媒體元素編輯 XAML 文本，添加屬性 AutoPlay=False?，F(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 文本塊中，添加對 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)在，如果用戶單擊其中一個(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();  
} 

我們暫時(shí)將 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)或停止媒體播放。

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

至此，您已構(gòu)建了自己的第一個(gè) Silverlight 應(yīng)用程序!

圖3 網(wǎng)頁播放視頻

了解 Silverlight 調(diào)用

HTML 頁面會(huì)調(diào)用 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)  
      }  
   });  

該調(diào)用將用到許多屬性，其中包括那些用于定義要呈現(xiàn)的 XAML、Silverlight 控件外觀以及 onLoad 和 onError 事件處理程序的屬性。source:屬性用于定義希望 Silverlight 控件呈現(xiàn)的 XAML。該屬性可以是外部文件（如本例中所示），也可以是包含 XAML 的頁面上的命名

【編輯推薦】

1. Office 2010將使用Silverlight改善用戶體驗(yàn)
2. 微軟.NET平臺(tái)主管談Silverlight企業(yè)級(jí)開發(fā)
3. Flash與Silverlight多領(lǐng)域?qū)崪y對比
4. 微軟宣稱Silverlight裝機(jī)量超過三億
5. 圖解Silverlight 3的7個(gè)新功能