第2章 Windows Phone 7應用程序初探

2.1 第一個Windows Phone 7應用

2.1.1 項目創建和代碼編寫

經過第1章的介紹，我們對Windows Phone 7有了一個整體的認識，并且已經完成了環境的搭建，下面以一個簡單的實例來具體介紹一下Windows Phone 7項目的創建和代碼的編寫。

首先打開Visual Studio 2010 Expression for Windows Phone，新建一個Project，如圖2-1所示，選擇Windows Phone Application，在Name欄中輸入HelloPhone7，單擊OK按鈕。如圖2-1所示。

圖2-1 新建Windows Phone工程

這就是在Visual Studio中創建了一個名為HelloPhone7的Windows Phone 7工程項目，默認打開的這個MainPage.xaml就是默認生成的程序主頁的布局描述文件。XAML是一種類XML語言，它使用標簽化的語言來描述一個應用的UI元素布局，這既有利于邏輯層和展現層的分層管理，也有利于UI設計師與軟件工程師的協作，UI設計師可以使用專門用于UI設計的Expression Blend軟件來設計UI并保存為XAML文件，包括動畫都可以在XAML中定義，通過Visual Studio可以直接導入設計完的XAML文件。軟件工程師只需完成邏輯處理的代碼即可。一般一個XAML文件會對應一個xaml.cs文件，用于實現頁面的邏輯處理。例如，MainPage.xaml對應有一個MainPage.xaml.cs文件。圖2-2展示了剛剛創建的項目中的XAML文件的內容。

圖2-2 XAML頁面

首先熟悉一下MainPage.xaml文件。在VisualStudio中使用設計界面（Design）和XAML兩種展現方式，設計界面就是對XAML里的內容進行圖形化的展示。我們來分析一下XAML文件的內容，前一部分是對命名空間的聲明和一些屬性的定義，如下面的代碼所示，隨著后續的學習將逐漸接觸到這些命名空間，這里暫不贅述，而屬性定義了對應類的名字、布局文件的設計寬度、布局文件的設計高度、字體樣式等信息。其中shell:SystemTray.IsVisible="True"代碼定義了是否顯示系統托盤，系統托盤是指手機屏幕上端部分顯示信號、電池電量等信息的狀態欄。

    1  <phone:PhoneApplicationPage
    2      x:Class="HelloPhone 7.MainPage"
    3      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    4      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    5  xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    6  xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    7      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    8      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    9      mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    10     FontFamily="{StaticResource PhoneFontFamilyNormal}"
    11     FontSize="{StaticResource PhoneFontSizeNormal}"
    12     Foreground="{StaticResource PhoneForegroundBrush}"
    13     SupportedOrientations="Portrait" Orientation="Portrait"
    14     shell:SystemTray.IsVisible="True">

中間部分是對頁面進行布局的描述，這個頁面使用一個Grid布局（可以稱為表格布局），Grid布局將頁面分成固定數量的格子，然后將控件布局到每個格子中，Windows Phone 7提供Stack、Grid、Canvas三種布局方式，第4章將具體介紹布局相關的內容。

從下面的代碼中可以看到，MainPage中Grid分為兩行，第一行中插入了一個叫做TitlePanel的StackPanel，第二行沒有填充任何內容。StackPanel中包含兩個TextBlock，一個用于顯示ApplicationTitle，一個用于顯示PageTitle，而每一個元素的屬性如Text、Background都是對該元素的一個描述，相信很多做過Web編程或者開發過WPF應用的讀者對這種標記性的描述非常熟悉，XAML與Web開發如出一轍，下面這段代碼中其他的內容就不再贅述。

      1 <!--LayoutRoot is the root grid where all page content is placed-->
      2     <Grid x:Name="LayoutRoot" Background="Transparent">
      3        <Grid.RowDefinitions>
      4            <RowDefinition Height="Auto"/>
      5            <RowDefinition Height="*"/>
      6        </Grid.RowDefinitions>
      7
               <!--TitlePanel contains the name of the application and page title--
      8
        >
      9        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
     10             <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION"
     11 Style="{StaticResource PhoneTextNormalStyle}"/>
     12             <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0"
     13 Style="{StaticResource PhoneTextTitle1Style}"/>
     14         </StackPanel>
     15
     16         <!--ContentPanel - place additional content here-->
     17         <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"></Grid>
     18      </Grid>

最下面一部分默認被當做注釋的代碼是對菜單欄進行定義的代碼，若取消注釋，頁面布局上即可顯示相應的圖標。Windows Phone 7將菜單分為兩類，一類是在頁面下無須展開就可以操作的圖標，即下面代碼中的ApplicationBarIconButton類；另一類是需要展開菜單才能看到的菜單項，即下面代碼中的ApplicationBarMenuItem類。這兩類的區別主要在于展現的樣式和操作的方便程度，相對比較常用的操作應使用ApplicationBarIconButton類。而相對不常用的操作應使用ApplicationBarMenuItem類。但是微軟對于Windows Phone 7中這兩類菜單的菜單項個數有一定的規定，在Windows Phone 7 UI Design Specification中對ApplicationBarIconButton的建議是不超過4個，對ApplicationBarMenuItem的建議是不超過5個，否則將不符合Windows Phone 7的設計理念，專業的設計規范將在第7章討論。

修改完成后，當前應用的運行效果如圖2-3所示。

      1    <phone:PhoneApplicationPage.ApplicationBar>
      2         <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
      3             <shell:ApplicationBarIconButton
      4                   IconUri="/Images/appbar_button1.png" Text="Button 1"/>
      5             <shell:ApplicationBarIconButton
      6                   IconUri="/Images/appbar_button2.png" Text="Button 2"/>
      7             <shell:ApplicationBar.MenuItems>
      8                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
      9                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
     10              </shell:ApplicationBar.MenuItems>
     11          </shell:ApplicationBar>
     12      </phone:PhoneApplicationPage.ApplicationBar>

圖2-3 第一個應用運行效果

下面我們將ApplicationTitle的Text屬性改為Windows Phone 7，將PageTitle的Text屬性改為Hello Phone 7，修改Text屬性可以通過在XAML文件中直接編輯Text屬性對應的值，如：<TextBlock x:Name="ApplicationTitle" Text="Windows Phone 7"；也可以在設計頁面上選中需要修改的空間，在其屬性窗口中修改，如圖2-4所示，在屬性窗口中列舉了該控件的所有屬性，在該窗口中切換事件（Event）標簽可以查看該控件的所有事件，并可以編輯相應的事件處理函數。

圖2-4 修改Text屬性

然后在Grid的第二行插入一個TextBox控件、一個Button控件、一個TextBlock控件，分別命名為inputTextbox、OKButton、displayTextBlock，并修改OKButton的Content屬性值為OK，布局的位置和控件的尺寸可以通過鼠標拖動調整。修改完成后的頁面布局如圖2-5所示。

圖2-5 修改完成后的頁面布局

雙擊OKButton即可創建Button的點擊事件處理函數，之前我們介紹過，頁面中的邏輯處理代碼是放在MainPage.xaml.cs中的，所以OKButton的點擊事件處理函數也是在MainPage.xaml.cs中定義的，MainPage.xaml.cs定義的類是HelloPhone命名空間下的MainPage，也和在MainPage.xaml中聲明的x:Class="HelloPhone.MainPage"一致，在事件處理函數中我們定義一個簡單的邏輯，將inputTextbox中的內容賦給displayTextBlock，只需輸入代碼“displayTextBlock.Text = inputTextbox.Text;”即可。

    1  private void OKButton_Click(object sender, RoutedEventArgs e)
    2    {
    3       displayTextBlock.Text = inputTextbox.Text;
    4    }

Visual Studio可以選擇在模擬器上或是在手機設備上運行，在這里我們選擇模擬器（Windows Phone 7 Emulator），如圖2-6所示。然后單擊三角箭頭就可以在模擬器中運行我們剛才編寫的應用程序，實際運行效果如圖2-7所示。

圖2-6 模擬器選擇

圖2-7 修改后的應用運行效果

至此我們就初步完成了一個最簡單的Windows Phone 7應用程序的開發，也對Windows Phone 7的應用開發有了一個初體驗，下面我們將一步一步深入地介紹Windows Phone 7應用程序開發的相關內容。