Windows Phone新手开发教程（二）

在这里我将讲解StackPanel和Grid元素。很多时候开发人员对于在何处放置包含StackPane或Grid元素的控制元件感到困惑。那么我们就来了解一些关于StackPane和Grid元素的东西。

StackPanel元素

StackPanel元素主要用在网格的顶部或者底部。因此，当你打算设计一个简单的web应用程序时，你可以使用Windows Phone的StackPanel把页面名称放置在标题标签中。

在知晓页面名称和应用程序名称的情况下你可以就使用StackPanel了，简单地说就是使用StackPanel展示页面名称并对一个系列的子元素进行横向的或者纵向的排列。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<!--LayoutRoot is the root grid where all page content is placed-->      <Grid x:Name="LayoutRoot" Background="Transparent">          <Grid.RowDefinitions>              <RowDefinition Height="Auto"/>              <RowDefinition Height="*"/>            </Grid.RowDefinitions>         <!--TitlePanel contains the name of the application and page title-->          <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">              <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>              <TextBlock x:Name="PageTitle" Text="StackPanel" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>           </StackPanel>          <!--ContentPanel - place additional content here-->          <StackPanel Margin="150">              <Rectangle Fill="Red" Width="100" Height="100" Margin="5" />              <Rectangle Fill="Green" Width="100" Height="100" Margin="5" />              <Rectangle Fill="Violet" Width="100" Height="100" Margin="5" />              <Rectangle Fill="Firebrick" Width="100" Height="100" Margin="5" />              <Rectangle Fill="White" Width="100" Height="100" Margin="5" />          </StackPanel>      </Grid>

Grid元素

Grid元素提供了对于多个行列的排布的更加灵活的控制。对于Grid元素，你可以使用RowDefinition和ColumnDefinition这两个属性来对行和列设置；也可以在一个单元格中使用行和列的定义来设置如Textblock、TextBox、Hyperlinkbutton和Image这样的控制元件。

下面的XAML显示了如何创建一个有4行和2列的网格：

• 第一行包含文本的高度设置为自动。
• 第二行的高度设置为100px。
• 第三行和第四行设置为剩下的可用高度。
• 列的宽度使用“*”，设置为等于可用的容器宽度。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

<Grid x:Name="LayoutRoot" Background="Transparent">      <Grid.RowDefinitions>          <RowDefinition Height="*"/>          <RowDefinition Height="100"/>          <RowDefinition Height="*"/>          <RowDefinition Height="*"></RowDefinition>      </Grid.RowDefinitions>      <Grid.ColumnDefinitions>          <ColumnDefinition Width="*"></ColumnDefinition>          <ColumnDefinition Width="*"></ColumnDefinition>      </Grid.ColumnDefinitions>      <!--TitlePanel contains the name of the application and page title-->      <StackPanel x:Name="TitlePanel" Grid.ColumnSpan="2"  Grid.Row="0"    Margin="12,17,0,28">          <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION"   Style="{StaticResource PhoneTextNormalStyle}"/>          <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0"   Style="{StaticResource PhoneTextTitle1Style}"/>      </StackPanel>      <!--ContentPanel - place additional content here-->      <Rectangle Fill="BLUE" Grid.Column="0"  Grid.Row="1"></Rectangle>      <Rectangle Fill="RED" Grid.Column="1"  Grid.Row="1"></Rectangle>      <Rectangle Fill="pink" Grid.Column="0"  Grid.Row="2"></Rectangle>      <Rectangle Fill="Aqua" Grid.Column="1"  Grid.Row="2"></Rectangle>      <Rectangle Fill="BlueViolet"  Grid.Column="0"  Grid.Row="3"></Rectangle>      <Rectangle Fill="DarkMagenta"  Grid.Column="1"  Grid.Row="3"></Rectangle>  </Grid>