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

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

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

圖1 Expression Blend 3

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

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

圖2 新建項目

該項目將包含一個默認 HTML 頁面、該頁面的一些 JavaScript 源代碼、一篇 XAML 文檔和該 XAML 文檔的 JavaScript 源代碼及 Silverlight.js。Silverlight.js 包含用于下載和實例化 Silverlight 控件的代碼。它作為 Silverlight SDK 的一部分提供給用戶。Default.html 是標(biāo)準的 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 文件并將其添加到項目時，項目瀏覽器中將顯示該文件，同時在視圖中添加了一個媒體元素。現(xiàn)在即可運行您的項目，瀏覽器將啟動并播放您的視頻!通過編輯 XAML 可以停止自動播放視頻。您會看到 XAML 設(shè)計器右側(cè)有兩個選項卡：Design(設(shè)計)和 XAML。選擇“XAML”選項卡，會打開 XAML 編輯器。使用該編輯器為媒體元素編輯 XAML 文本，添加屬性 AutoPlay=False。現(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)用上述方法，電影將隨之停止或啟動。

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

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

了解 Silverlight 調(diào)用

HTML 頁面會調(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改善用戶體驗
2. 微軟.NET平臺主管談Silverlight企業(yè)級開發(fā)
3. Flash與Silverlight多領(lǐng)域?qū)崪y對比
4. 微軟宣稱Silverlight裝機量超過三億
5. 圖解Silverlight 3的7個新功能