windows phone 7 系统学习第一季 HelloPhone（二 中）

原作：chinahope

转自：http://www.devdiv.com/thread-35894-1-1.html

 

练习二：在模拟器上编译和测试应用程序

        目前为止，虽然应用程序内容不多，但是它已经能够作为一个测试运行效果的程序。在这项联系中，你编译应用程序，
将它布置到模拟器上，执行它，理解它的开发过程。
       
        1. 在菜单Debug中，选择其菜单Windows中子菜单Output，打开Output窗口（即输出debug信息输出窗口）。
        2. 在Debug菜单中，选择Build Solution，或者选择快捷键SHIFT+F6， 去编译项目工程。
                 注意：Visual Studio 2010：选择在Build菜单中选择Build Solution，或者选择快捷键CTRL+SHIFT+B编译项目工程。
        3. Output窗口用来查看编译过程中的调试信息，包括信息结果。
                                                

                                                图8: 在Visual Studio编译应用程序
        4. 你不应该在这个阶段查看错误。但是如果程序中包含有错误，它将出现在Output窗口中。你能利用Error List窗口
           去处理这些错误。这个Error List窗口展示错误、警告信息，你能归类和过滤严重的错误。另外，你能双击一个列表
           中的一个选项，将自动打开相关的源代码，指示出错误的源代码。菜单View中，选中Other Windows菜单，打开
           Error List窗口。
           注意：Visual Studio 2010：在View菜单下选择Error List,将打开Error List窗口。
                                              

                                           图9：Error List 窗口 展示编译过程中的错误
        5. 为了验证应用程序部署在Window Phone的模拟器上，确定在Select Target选项中选择Windows Phone 7 Emulator，
                 在工具栏上Select Target选项旁边是Start Debugging按钮。
                                                    

                                                 图10：部署应用程序是选择目标设备
                 注意：当你将你的应用程序部署在模拟器上时。注意当Visual Studio建立一个模拟器环境并且部署应用程序的图片
                                         时，设备模拟器出现死，会有一段时间的等待。
        6. 点击F5启动应用程序。
                                        

                                          图11：在Windows Phone 模拟器上展示一个应用程序图片
        7. 一旦模拟器启动完毕，模拟器会短暂的显示一个开始页面，然后你的应用程序就出现在模拟器的桌面上。
                                              

                                                图12：在模拟器上运行应用程序
               
        8. 在这一步中，你除了创建了用户界面和简单的应用程序逻辑，你几乎什么没有坐其他事情。点击SHIFT+F5，或者单击
           Stop按钮停止调试。不要关闭模拟器，当再次编译程序时候，还可以使用，可以节省时间。
                                           

                                           图13：关闭调试
       
        小技巧：当你开始调试程序时，需要花大量的时间来配置模拟器环境变量和启动应用程序。为了提高你的调试效率，避免
                                        关模拟器，一旦模拟器运行，它只需要花少量的时间关闭调试和编译和调试源代码，轻松的部署新的图片到你的
                                        应用程序中开始启动新的应用程序调试。

练习三：设计UI
       
                在这个练习中，你将为HelloPhone应用程序创建一个UI元素。应用程序是非常简单的，应用程序UI包括一个caption、一个
        textbox，和一个Button。用这个应用程序，你能在textbox中输入文字，然后当你点击button按钮时，应用程序展示一个
        你输入的文字的条幅。如下图所示：
                                              

                                        图14： 应用程序用户界面
       
        1. 在Solution Explorer中，双击MainPage.xaml打开这个文件，在designer中打开.
       
                 注意：designer提供了两个分开的区域编辑XAML文件，包括Design和XAML视图。在Design视图中，你能从toolbox中托或者
                 拉控件放入画布，你也能选择，调整大小移动和设置已经存在的控件。在XAML视图中，你能用代码来描述布局或控件事件
                 等。你能通过tabs来选择一个模式(tabs是两个视图中间的小按钮,自己试试就知道用哪个了）。在分开模式下，编译窗口
                 同时存在两个视图。你能用ExpandPan/CollapsePane按钮来最大化视图。
       
        2. IDE允许你操作图片对象，但是在这个例子中，你将集中学习手动编辑XAML语言。一旦完成，你将返回Design视图查看你的
                 工作。设置为XAML视图模式，并且最大化这个视图，双击XAML的tab,如果你找不到正确的tab，将鼠标放在每个tab上试一下
                 
                 注意：如果你配置designer为水平分割视图，那些tabs放在窗口的底部。
                                          

                                         图15：XAML designer显示XAML视图
                                        
        3. Windows Phone应用程序模板创建默认的XAML标记。将Grid容器元素命名为LayoutRoot。它的目的是整理页面上的元素。在
           RowDefinition属性里，在存在的两行之间插入一行、设置高的属性值为Auto。这行将包括textbox和button.
          
                                                           <Grid x:Name="LayoutRoot" Background="Transparent">
                                                                <Grid.RowDefinitions>
                                                               
                                                                <RowDefinition Height="Auto"/>
                                                                <RowDefinition Height="Auto"/>
                                                                <RowDefinition Height="*"/>
                                                                </Grid.RowDefinitions>
                                                                ...
                               
                                                                </Grid>
                                                        </phone:PhoneApplicationPage>
               
                注意：Grid是一个布局元素，它能作为容器来操作其他控件。它的重要的目的是定位和排列它的子控件。几个布局控件提供了可代替
                                        的布局行为：Canvas：定义一个区域，在里面你能利用画布的坐标位置来准确的定位子元素。Grid：定义一个灵活的格子区域
                                        这些格子由行和列组成。StackPanel：将子元素放在一个单独的行上，它能横向和竖向布局。
                                       
       
        4. 注意那个Grid布局控件包括其他元素，通过定义Grid.Row属性来定义不同的行。指出Grid元素的名称为TitlePanel。设置第一个
           TextBlock元素的字符串为"Windows Phone 7".同样，设置第二个元素TextBlock的Text属性的字符串为"Hello Phone".
           
                             

                                   图16： 设置应用程序
                                  
                   注意：分配一个元素到Grid的给定行时，每个元素必须指定Grid.Row属性值，这个属性被认为是一个绑定属性。绑定属性允许不
                                           的子元素指定唯一的值。在这个例子中，Row属性值属于Grid元素。
        5. 现在找出名字为ContentPanel的Grid的元素，它当前内容为空，粘贴线面XAML到这个元素里面。
               
                <Grid.ColumnDefinitions>
       <ColumnDefinition Width="*"/>
       <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <TextBox Grid.Column="0" Name="MessageTextBox" FontSize="{StaticResource PhoneFontSizeExtraLarge}" Margin="20,20,10,20"/>
    <Button Grid.Column="1"
        Name="ClickMeButton" Content="Click Me" HorizontalAlignment="Right" Padding="4" Margin="10,20,20,20" />       
               
               
                注意：Grid用ColumnDefinitions来定义每个栏目的宽度，而它的子控件就是基于这个宽度。注意第一个栏目的宽度被指定为"*",
                                        所有其他的栏目已经被分配空间后，缺定第一个栏目延伸到无用的空间。第二个栏目被设置为它内容的长度。
       
        6. 在完成设置界面之前，增加第三行包括显示用户输入的横幅。去创建这行，将下面代码查到ContentPanel的Grid的下面：
                                       
                                        <Grid Grid.Row="2">
            <TextBlock Name="BannerTextBlock" Style="{StaticResource PhoneTextExtraLargeStyle}"
                                                                                                                Foreground="#FFFF9A00" HorizontalAlignment="Stretch"
                                                                                                                                TextWrapping="Wrap" TextAlignment="Center" FontWeight="Bold" />
        </Grid>
        7. 低级Design的tab显示designer视图。查看现在的用户界面，应该和下图相匹配。
        
                                        

                                        图17：查看designer视图