Windows Phone应用程序开发
上QQ阅读APP看本书，新人免费读10天
设备和账号都新为新人
上一章目录下一章

第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应用程序开发的相关内容。

上一章目录下一章