Windows Phone 7应用程序开发(二)Hello Windows Phone(5)

 

任务3：调试用户界面

在这次任务中，你要为本Hello Phone 应用程序创作用户元件。这个应用程序是非常简约的。当完整的应用程序用户界面含有一个标题、一个文本框控件和一个按钮。使用这个应用程序，你键入一些文本内容到文本框控件中在这之后，当你点击这个按钮，应用程序显示一个带有你键入内容的文本旗帜图标。如下图所示：

图片14：应用程序用户界面。

1．  在Solution Explorer（解决方案浏览器），在designer（设计器）中双击MainPage.xaml（主页）打开这个文件。

注意：

Designer(设计器)提供图片和XAML两种模式来编辑XAML文件，。在图片模式中，在工具箱中你拖动并下拉便会出现一个会话型的画布，与此同时选择属性，在designer（设计器）表面上利用现有的控制移动并调整。在XAML模式中，你有一个标示编辑以便让你在页面中编辑XAML。在designer(设计器)窗口上的选项卡提供了让你选定两种模式。你也有一种分裂模式，你能够使用ExpandPane/CollapsePane 按钮来最大化通用模式的观测区域。

2．  当IDE通道允许你通过图表巧妙的处理对象，在这次任务中，你将重点放在手动编辑XAML上。一旦准备充分，你将重新设计所能运用的地方来复审你的成果。设置编辑模式以便XAML查看并且最大化观察区域，双击设计器窗口右侧边缘位置的XAML选项卡。如果你在识别正确的位置有困惑，那么就将鼠标指针覆盖在选项卡上显示工具提示以便识别正确的选项卡。

注意：如果你配置设计器用来显示一个水平分割线的视图模式，这个选项卡位于窗口的下端很突出的地方。

图片15：XAML设计器显示的XAML视图。

3．  在XAML标示通过Windows Phone 应用程序模板默认产生，位于Grid(标准单元)容器元素称为LayoutRoot(基础布局)。它的目的是在页面上布置元素。在它的RowDefinition（定义行）属性里面，在当前行和设置高程价值属性之间嵌入一个附加行为Auto。这个行将很快包括一个文本框和一个按钮。

XAML

. . .

 <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(堆栈面板)：安排子代元素列成一条直线，能够定向为水平或是垂直的。便于获得更多信息，详情请参阅：Silverlight Layout System.

4.注意基础Grid(标准单元)元素含有其它构建元素，每一个均通过定义一个Grid(标准单元)被分配到外部标准单元不同的行。行的特性。位于Grid（标准单元）元素称为TitlePanel(标题面板)，设置第一个TextBlock(文本块)的文本属性元素，在Grid内部，线性拉长“Windows Phone 7”下同，设置第二个文本块的文本属性元素，线性拉长“Hello Phone”。

图片16：为应用程序设置一个标题。

注意：

在容器标准单元中指定子代元素到给定行，每一个子代元素必须为标准单元指定一个价值。行的属性，这个是考虑附加特性。在父代元素中附加特性允许不同子代元素为一个属性定义指定独特价值，在这种情况下，行的属性归属标准单元元素。

5．  现在，定位标准单元元素名称ContenPanel(目录控制板)，这个目前是空的，并且在内部元素中模糊的下方有蓝色高亮突出强调的XAML标示。

XAML

。 。 。

<Grid x:Name=”LayoutRoot”Background=”Transparent”>

  . . .

<! - - ContentPanel – place additional content here - - >

  <Grid x:Name=”ContentPanel”Grid.Row=”1”Margin=”12,0,12,0”>

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

 

</Grid>

. . .

 

注意：

一个标准单元布置它的子代，在页面上的以行的宽度确定为基础控制它的ColumnDefinitions(行定义式)群集。记录行的宽度是指定类似*，这是确保它能够伸展来填充在行后所有其他行配置的未使用过的空格，并且第二行设置为Auto以便尺寸符合行的内容要求。

6．  完整的页面结构，添加了第三行，含有带有信息的标语，通过使用者进入。创作这行，嵌入下面蓝色高亮显示的XAML标示恰好在外部标准单元结束选项卡之前。

XAML

. . .

<Grid x:Name=”LayoutRoot”Background=”Transparent”>

. . .

 

<Grid Grid.Row=”2”>

  <TextBlock Name=”BannerTextBlock”Style=”{StaticResource PhoneTextExtraLargeStyle}”

Foreground=”#FFFF9A00”

HorizontalAlignment=”Stretch”

            TextWrapping=”Wrap” TextAlignment=”Center”

FontWeight=”Bold” />

  </Grid>

<Grid>

. . .

 

7.点击位于窗口边缘切换模式图标上的Design选项卡。查看页面上的控制布局，哪一个适合下面的图片。

注意：

如果你安装的设计器是水平线视图，这个选项卡是位于窗口底部边缘的。

图片段17：Design模式的页面视图