第2章 Windows Phone 7應(yīng)用程序初探

2.1 第一個(gè)Windows Phone 7應(yīng)用

2.1.1 項(xiàng)目創(chuàng)建和代碼編寫

經(jīng)過第1章的介紹，我們對(duì)Windows Phone 7有了一個(gè)整體的認(rèn)識(shí)，并且已經(jīng)完成了環(huán)境的搭建，下面以一個(gè)簡(jiǎn)單的實(shí)例來(lái)具體介紹一下Windows Phone 7項(xiàng)目的創(chuàng)建和代碼的編寫。

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

圖2-1 新建Windows Phone工程

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

圖2-2 XAML頁(yè)面

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

    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">

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

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

      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>

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

修改完成后，當(dāng)前應(yīng)用的運(yùn)行效果如圖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 第一個(gè)應(yīng)用運(yùn)行效果

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

圖2-4 修改Text屬性

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

圖2-5 修改完成后的頁(yè)面布局

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

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

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

圖2-6 模擬器選擇

圖2-7 修改后的應(yīng)用運(yùn)行效果

至此我們就初步完成了一個(gè)最簡(jiǎn)單的Windows Phone 7應(yīng)用程序的開發(fā)，也對(duì)Windows Phone 7的應(yīng)用開發(fā)有了一個(gè)初體驗(yàn)，下面我們將一步一步深入地介紹Windows Phone 7應(yīng)用程序開發(fā)的相關(guān)內(nèi)容。