Windows Phone 7中用好Silverlight開發利器

序言

Windows Phone 7 現在已經開始銷售了，一些激進的開發人員已經在使用一些開發人員工具建立新一代的“Angry Birds”或 Netflix 應用程式了。就像我們在過去的文章中提到的那樣，為了方便開發人員建立 Windows Phone 應用程式，微軟提供了一套免費的開發人員工具。Windows Phone的架構可以讓開發人員選擇兩種不同的架構來建立 Windows Phone 應用程式/遊戲的時候。在這篇文章中，我們主要關注使用 Silverlight 架構來建立 Windows Phone 應用程式。

為什麼要使用Silverlight？

我們不禁要問：為什麼要使用Silverlight架構來建立 Windows Phone 應用程式呢？

Silverlight（大家通常認為Silverlight是Flash的直接競爭者）可以讓Web開發人員們建立富互連網應用程式。對於那些需要良好的應用程式邏輯或實用性的程式來說，你肯定更喜歡使用Silverlight。

Microsoft Visual Studio中的Silverlight項目入門

在你安裝了 Windows Phone 開發人員工具以後，你可以直接運行Visual Studio Express for Windows Phone。或者，如果你已經安裝了 Visual Studio 2010 Pro SKUs，你可以運行 Visual Studio 2010 Pro SKUs，然後選擇 “File” -> “New” -> “Project”，然後再從模板類型中選擇 “Silverlight for Windows Phone 7”。

圖1 選擇Silverlight for Windows Phone 7

這是一些你需要瞭解的模板。根據具體的應用程式類型，你可以選擇最合適的模板。

對於我們的Demo來說，我們會選擇基礎的“Windows Phone Application”模板。把我們的項目命名成“WindowsPhoneApplicationDemo”，然後按“Enter”鍵來建立這個項目。

如果我們按了“Enter”鍵，IDE（Integrated development environment）會進行一系列操作，並且建立一大推檔案——Appl.xaml, MainPage.xaml 和其他影像檔 ApplicationIcon.png, Background.png 和 SplashScreenImage.jpg 。

讓我們看看這些檔案都是什麼：

為了看到設計器視圖，可以在 MainPage.xaml 上右擊，然後點擊“View Designer”（如果設計器還停用話）。這是設計器的外觀，以及後台代碼：

圖2 設計器視圖

對於我們的應用程式來說，我們打算建立一個簡單的計算機，它可以讓使用者在攝氏溫度和華氏溫度之間進行轉換。要開始這個工作，可以按“Ctrl + Alt + X”，彈出“ControlBox”，然後把兩個“TextBlock”控制項，兩個“TextBox”控制項，和一個“Button”控制項拖放到設計器上， 如所示：

圖3 彈出的相應控制項

現在，讓我們開始定製我們的應用程式。

在 MainPage.xaml.cs 中找到下面這個程式碼片段，然後把“ApplicationTitle”的“Text”屬性改成“My cool convertor”，把“PageTitle”的“Text”屬性改成“Let's rock WP7”。

 

  
<!--TitlePanel contains the name of the application and page title--> 
  
         <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28"> 
  
             <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/> 
  
             <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/> 
  
         </StackPanel> 
  
   
  
 Also change the following snippet in MainPage.xaml.cs as highlighted.  
  
 <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> 
  
             <TextBlock Height="30" HorizontalAlignment="Left" Margin="29,71,0,0" Name="textBlock1" Text="Degrees" VerticalAlignment="Top" /> 
  
             <TextBox Height="72" HorizontalAlignment="Left" Margin="162,54,0,0" Name="textBox1" Text="0" VerticalAlignment="Top" Width="245"></TextBox> 
  
             <TextBlock Height="30" HorizontalAlignment="Left" Margin="29,177,0,0" Name="textBlock2" Text="Fahrenheit" VerticalAlignment="Top" /> 
  
             <TextBox Height="72" HorizontalAlignment="Left" Margin="162,162,0,0" Name="textBox2" Text="0" VerticalAlignment="Top" Width="245" /> 
  
             <Button Content="Clear" Height="72" HorizontalAlignment="Left" Margin="139,320,0,0" Name="button1" VerticalAlignment="Top" Width="160" /> 
  
         </Grid> 
 

點擊“Degrees”TextBlock旁邊的那個 TextBox，然後點擊“Properties”，在“TextChanged”事件上雙擊，自動建立一個新的事 件：“textBox1_TextChanged”。為了把當前輸入的值轉換成“Fahrenheit”TextBlock旁邊的那個 TextBox 中的華氏溫度，這是應該添加的代碼：

 

  
private void textBox1_TextChanged(object sender, TextChangedEventArgs e)  
  
        {  
  
            if (int.TryParse(textBox1.Text, out degrees))  
  
            {  
  
                fahrenheit = 9 / 5.0 * degrees + 32;  
  
                textBox2.Text = fahrenheit.ToString();  
  
            }  
  
            else  
  
                textBox1.Text = "0";  
  
              
  
        } 
 

可以通過點擊“Build”菜單，然後選擇“Build Solution”來編譯這個應用程式。修複你遇到的所有語法錯誤。按“F5”開始調試。這裡有一件事情需要注意：你第一次啟動偵錯工作階段的時候，會比較 慢。這是因為 Windows Phone 模擬器正在載入。我們的建議是，當你調試完畢以後，不要關閉那個模擬器。而不是當你完成偵錯工作階段的時候，點擊 “Debug”->“Stop Debugging”。這可以確保你以後載入偵錯工作階段的時候會更快一些。當你啟動調試器的時候，你會發現你的應用程式已經顯示在模擬器上了。

要開始輸入攝氏溫度，可以點擊“Degrees”旁邊的那個 TextBox。

當你開始輸入的時候，你會發現“Fahrenheit”TextBlock旁邊的那個 TextBox會自動地更新，這很像Google的自動提示功能。

點擊“Clear”可以把攝氏溫度變成0，把華氏溫度變成32（等於攝氏0度）。如果你建立項目遇到了什麼麻煩，可以使用本文中的範例項目。

總結

在這篇文章中，我們可以看到，為 Windows Phone 建立一個簡單的 Silverlight應用程式是多麼的簡單。在以後的文章中，我會討論如何為 Windows Phone 7 建立一個基於XNA的應用程式。

(本文轉載自51cto，譯者周雪峰)