Silverlight - 入門指南

---

---

本章我們將研究一個 Silverlight 的工作示例。我們需要兩樣東西：

• 首先，我們需要一個網頁。Silverlight 旨在用於富網際網路應用程式，它設計為在網頁中作為網頁的一部分在 Web 瀏覽器內執行。頁面需要包含合適的標籤來載入 Silverlight 外掛。它還可以包含檢測是否安裝了 Silverlight 的邏輯，並且在 Silverlight 缺失時可以提供一些備用使用者介面。

• 其次，我們需要 Silverlight 內容本身。本教程將重點介紹 Silverlight 的 .NET 程式設計模型。我們將建立一個編譯後的 Silverlight 應用程式，其中包含 XAML（我們用於定義 Silverlight 使用者介面的模擬語言）和用 C# 編寫的 .NET 程式碼。

建立網頁

使用 Silverlight 的最簡單方法是建立一個帶有 HTML 頁面的普通網站，而無需伺服器端程式碼。讓我們來看一個非常簡單的例子。

**步驟 1** - 開啟**Visual Studio**。單擊**檔案**選單，指向**新建**，然後單擊**專案**。

**步驟 2** - 將開啟**新建專案**對話方塊。在**模板**下，選擇**Visual C#**，然後單擊**Silverlight**。在右側窗格中，選擇 Silverlight 應用程式。

輸入專案名稱和硬碟驅動器上的儲存位置，然後單擊**確定**以建立專案。

Silverlight 專案本身只是構建 Silverlight 內容，而該內容只是構成整個 Web 應用程式的眾多資源之一。

單擊**確定**。

**步驟 3** - 選中**託管 Silverlight 應用程式複選框**。預設值為 ASP.NET Web 應用程式專案。

**步驟 4** - MS-Visual Studio 建立了兩個專案：Silverlight 專案和 ASP.NET Web 應用程式。我們確實需要一個 ASP.NET Web 應用程式。您可以在下面的**解決方案資源管理器**視窗中看到這一點。

任何可以透過 HTTP 提供內容的方法都可以，但這是**Visual Studio**，它理解 ASP.NET Web 技術，所以這就是它提供給我們的。

為了證明 Silverlight 不依賴於任何特定的伺服器端技術，讓我們刪除此**.aspx**檔案，只留下普通的靜態 HTML 檔案。

**步驟 5** - 右鍵單擊 FirstExampleTestpage.aspx。從選項列表中，單擊**刪除**。

**步驟 6** - 將**FirstExampleTestPage.html**設定為**啟動**頁面。

**MainPage.xaml**檔案定義了 Silverlight 內容的使用者介面。您可以直接編寫 XAML 程式碼，也可以使用**工具箱**拖放不同的 UI 元素。

**步驟 7** - 下面是在**MainPage.xaml**中的一個簡單程式碼，其中在**StackPanel**內部定義了**Button**和**TextBlock**。

<UserControl x:Class = "FirstExample.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400">  
   
   <Grid x:Name = "LayoutRoot" Background = "White"> 
      <StackPanel> 
		
         <TextBlock x:Name = "TextMessage"  
            Text = "Hello World!"  
            Margin = "5">
         </TextBlock> 
			
         <Button x:Name = "ClickMe"  
            Click = "ClickMe_Click"  
            Content = "Click Me!"  
            Margin = "5"> 
         </Button> 
			
      </StackPanel> 
   </Grid> 
	
</UserControl>

**步驟 8** - 此示例假定您已建立了一個名為**ClickMe_Click**的事件處理方法。以下是它在**MainPage.xaml.cs**檔案中的樣子。

using System.Windows; 
using System.Windows.Controls;
  
namespace FirstExample { 

   public partial class MainPage : UserControl { 
	
      public MainPage() { 
         InitializeComponent(); 
      } 
	  
      private void ClickMe_Click(object sender, RoutedEventArgs e) { 
         TextMessage.Text = "Congratulations! you have created your first Silverlight Applicatoin"; 
      } 
   } 
}

**步驟 9** - Silverlight 應用程式可以在任何已安裝的瀏覽器上執行。

**步驟 10** - 編譯並執行上述程式碼後，您將看到以下網頁。

**步驟 11** - 現在，當您單擊**單擊我**按鈕時，它將更新**TextBlock**中的文字，如下所示。

我們建議您透過新增更多 UI 元素來執行上述示例。