這是本系列的第2部分。在這里我將講解StackPanel和Grid元素。很多時(shí)候開(kāi)發(fā)人員對(duì)于在何處放置包含StackPane或Grid元素的控制元件感到困惑。那么我們就來(lái)了解一些關(guān)于StackPane和Grid元素的東西。

StackPanel元素

StackPanel元素主要用在網(wǎng)格的頂部或者底部。因此，當(dāng)你打算設(shè)計(jì)一個(gè)簡(jiǎn)單的web應(yīng)用程序時(shí)，你可以使用Windows Phone的StackPanel把頁(yè)面名稱放置在標(biāo)題標(biāo)簽中。

在知曉頁(yè)面名稱和應(yīng)用程序名稱的情況下你可以就使用StackPanel了，簡(jiǎn)單地說(shuō)就是使用StackPanel展示頁(yè)面名稱并對(duì)一個(gè)系列的子元素進(jìn)行橫向的或者縱向的排列。

<!--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元素提供了對(duì)于多個(gè)行列的排布的更加靈活的控制。對(duì)于Grid元素，你可以使用RowDefinition和ColumnDefinition這兩個(gè)屬性來(lái)對(duì)行和列設(shè)置；也可以在一個(gè)單元格中使用行和列的定義來(lái)設(shè)置如Textblock、TextBox、Hyperlinkbutton和Image這樣的控制元件。

下面的XAML顯示了如何創(chuàng)建一個(gè)有4行和2列的網(wǎng)格：

• 第一行包含文本的高度設(shè)置為自動(dòng)。
• 第二行的高度設(shè)置為100px。
• 第三行和第四行設(shè)置為剩下的可用高度。
• 列的寬度使用“*”，設(shè)置為等于可用的容器寬度。

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

本文翻譯自