1.2 創建基本的Silverlight應用

1.2.1 開發環境準備

在開始開發基于Silverlight 2的應用程序之前，首先需要準備開發環境，包括Silverlight 2運行時和Silverlight開發工具。

◆ Silverlight 2運行時：有針對Windows和Mac平臺兩種安裝包，只有安裝該運行時，Silverlight應用程序才能夠在瀏覽器中進行正確的運行。

◆ Silverlight Tools for Visual Studio 2008：在Visual Studio 2008中開發Silverlight 2應用程序，必須安裝該工具，并且必須安裝Visual Studio 2008 SP1。

◆ Expression Blend：使用Expression Blend能夠以可視化的方式方便地設計基于Silverlight 2的應用程序用戶界面，如操作畫布、控件等。

以上工具都可以在微軟Silverlight官方社區站點http://silverlight.net/下載。

1.2.2 Silverlight項目元素

準備好上面的開發環境之后，就可以開始第一個Silverlight 2應用程序的開發。打開Visual Studio 2008，可以看到已經安裝了Silverlight應用程序模板，如圖1-3所示。

圖1-3中有“Silverlight Application”和“Silverlight Class Library”兩個項目模板，它們之間的區別如下所示。

◆ Silverlight Application：Silverlight應用程序項目模板，使用它創建的項目編譯后將直接打包為可宿主在HTML頁面中的應用程序包。

◆ Silverlight Class Library：Silverlight類庫項目模板，使用它創建的項目編譯后為一個程序集，可以直接在其他Silverlight類庫項目或Silverlight應用程序項目中使用。

輸入項目名后進入下一步，將出現添加Silverlight應用程序對話框，如圖1-4所示。

在該窗口中，要求開發人員選擇以何種方式宿主Silverlight應用程序。

◆ 添加新的ASP.NET Web類型的項目到解決方案中宿主Silverlight應用程序。ASP.NET Web類型的項目可以選擇是ASP.NET網站、ASP.NET應用程序，如果安裝了ASP.NET MVC框架，還可以選擇使用ASP.NET MVC項目作為宿主。

◆ 自動創建一個測試HTML頁面宿主Silverlight應用程序。

點擊“確定”按鈕后，將會在Visual Studio 2008中創建Silverlight項目，如圖1-5所示。

可以看到，如果選擇添加新的ASP.NET Web類型的項目到解決方案中宿主Silverlight應用程序，將會在解決方案中創建一個新的ASP.NET Web類型的項目。下面對Silverlight項目中的文件做一些解釋。

◆ AppManifest.xaml：生成應用程序包所需的應用程序清單文件，開發人員無須手工編輯該文件。

◆ AssemblyInfo.cs：包含嵌入到所生成的程序集中的名稱和版本元數據，該文件的作用與普通的.NET應用程序相同。

◆ App.xaml：Silverlight應用程序文件，派生于Application類，在一個Silverlight應用程序項目中，必須有一個該文件，它負責指定應用程序的啟動頁面，以及應用程序的其他設置，當Silverlight應用程序在瀏覽器中運行時，由Silverlight插件負責初始化該類。

◆ Page.xaml：Silverlight用戶控件，可以使用Page類來創建Silverlight應用程序的用戶界面，Page類派生于UserControl。在Silverlight應用程序中可以有多個用戶控件。如果須要添加新的用戶控件到Silverlight應用程序項目中，可以在Visual Studio 2008“添加新項”對話框中選擇“Silverlight User Control”，如圖1-6所示。

在ASP.NET Web類型的項目中，同樣會添加一些文件，我們只關心其中兩個文件，以Silverlight項目名+“TestPage”命名的ASPX文件和HTML文件，它們都是Silverlight應用程序的宿主文件，打開ASPX頁面將會看到這樣一段代碼：

ASP.NET

      <div  style="height:100%;">
          <asp:Silverlight ID="Xaml1" runat="server"
              Source="~/ClientBin/Chapter01.SimpleSilverlightApplication.xap"
              MinimumVersion="2.0.31005.0"
              Width="100%" Height="100%" />
      </div>

這里使用服務器控件<asp:Silverlight/>來宿主Silverlight應用程序，Source屬性指定了一個后綴為xap的文件，該文件就是Silverlight應用程序編譯之后打包而成的文件。同樣打開HTML頁面，可以看到這樣一段代碼：

HTML

      <object data="data:application/x-silverlight-2,"
              type="application/x-silverlight-2"
            width="100%" height="100%">
          <param name="source"
      value="ClientBin/Chapter01.SimpleSilverlightApplication.xap"/>
          <param name="onerror" value="onSilverlightError" />
          <param name="background" value="white" />
          <param name="minRuntimeVersion" value="2.0.31005.0" />
          <param name="autoUpgrade" value="true" />
          <a 
          style="text-decoration: none;">
              <img src="http://go.microsoft.com/fwlink/?LinkId=108181"
              alt="Get Microsoft Silverlight" style="border-style: none"/>
          </a>
      </object>

這里使用不同的方式在HTML進行宿主Silverlight應用程序，但是指定Silverlight應用程序包文件不能缺少。如果想宿主Silverlight應用程序在其他類型的Web頁面中，如PHP、JSP等，都可以使用這種方式，關于Silverlight宿主將在本書第19章詳細介紹。

如果在創建Silverlight項目過程中選擇了“自動創建一個測試HTML頁面宿主Silverlight應用程序”一項，則在解決方案中只有一個Silverlight應用程序項目，不會添加ASP.NET Web類型的項目作為測試項目，如圖1-7所示。

當編譯Silverlight項目時，可以看到在Debug文件夾下創建了一個名為“TestPage.html”的HTML頁面，可以使用它來作為Silverlight應用程序的測試頁面，如圖1-8所示。

1.2.3 簡單示例

使用1.2.2節中所介紹的方法創建一個Silverlight應用程序項目，打開Page.xaml文件，替換為如下示例代碼：

XAML

      <UserControl x:Class="Chapter01.SimpleSilverlightApplication.Page"
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          Width="500" Height="240" FontSize="18">
          <Grid x:Name="LayoutRoot" Background="White">
              <Button x:Name="myButton" Width="300" Height="80"
                    Content="Button"/>
          </Grid>
      </UserControl>

這段代碼非常簡單，僅僅是在頁面上顯示一個Button控件。直接按下“F5”運行，可以看到效果如圖1-9所示。

下面再為該Button控件注冊單擊事件，可以直接在XAML中注冊，Visual Studio會有智能提示，如圖1-10所示。

編寫Button控件單擊事件的實現，改變Button的文字信息，示例代碼如下所示：

C#

      void myButton_Click(object sender, RoutedEventArgs e)
      {
          this.myButton.Content = "Hello Silverlight";
      }

再次運行應用程序后單擊Button控件，效果如圖1-11所示。

至此就完成了一個Silverlight應用程序的開發。