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

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

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

圖1 Expression Blend 3

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

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

圖2 新建項目

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

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

在項目中添加視頻文件。右鍵單擊屏幕右上方 Project Files(項目文件)窗口中的項目文件，然后選擇 Add Existing Item...(添加現(xiàn)有項目)。選擇某個 WMV 文件并將其添加到項目時，項目瀏覽器中將顯示該文件，同時在視圖中添加了一個媒體元素?，F(xiàn)在即可運行您的項目，瀏覽器將啟動并播放您的視頻!通過編輯 XAML 可以停止自動播放視頻。您會看到 XAML 設計器右側有兩個選項卡：Design(設計)和 XAML。選擇“XAML”選項卡，會打開 XAML 編輯器。使用該編輯器為媒體元素編輯 XAML 文本，添加屬性 AutoPlay=False?，F(xiàn)在，如果您運行該應用程序，會看到 Silverlight 內(nèi)容雖然呈現(xiàn)了視頻的第一幀，但并不播放。

在視頻播放器中添加控件

為該應用程序添加兩個文本塊，文本內(nèi)容分別為 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"/> 

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

在 JavaScript 中處理事件

模板創(chuàng)建的 Scene.xaml.js 可用于在 JavaScript 中捕獲并處理用戶事件。由于您在 XAML 內(nèi)指定了 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)時，將用到上述名稱。在項目中添加電影時，為您創(chuàng)建了此媒體元素，該元素的名稱是根據(jù)電影名稱命名的。因此，如果電影的名稱是 Movie.wmv，則此媒體元素就稱為 Movie_wmv。如果使用其他電影，則控件也會相應地采用其他名稱。該媒體元素有 Play 和 Stop 兩個方法，分別用于啟動或停止媒體播放。

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

至此，您已構建了自己的第一個 Silverlight 應用程序!

圖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多領域實測對比
4. 微軟宣稱Silverlight裝機量超過三億
5. 圖解Silverlight 3的7個新功能