2.5 面板嵌套

这些面板除了可以单独定位和布置子元素外，还可以相互嵌套。事实上在页面结构比较复杂的场合，页面就是通过面板相互嵌套实现的。

如在Visual Studio 2010 Express for Windows Phone新建的XAML页面文件中，代码如下，就是以一个名称为“LayoutRoot”的Grid面板作为底层面板，然后在其中嵌套一个名称为“TitlePanel”的StackPanel面板，用于设置程序名称和页面标题；还嵌套了另一个名称为“ContentPanel”的Grid面板用于放置页面内容。

XAML代码：

<Grid x：Name="LayoutRoot" Background="Transparent">
      <Grid.RowDefinitions>
         <RowDefinition Height="Auto"/>
         <RowDefinition Height="*"/>
      </Grid.RowDefinitions>
      <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="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
      </StackPanel>
      <Grid x：Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"></Grid>
</Grid>

需要说明的是，当两个Grid面板嵌套时，子元素归属于哪个Grid面板，取决于该子元素离哪个Grid面板近，或者说子元素是在哪个面板的标签内。例如，以下代码中，ContentPanel面板嵌套在LayoutRoot面板中，但Button1按钮离LayoutRoot面板近，属LayoutRoot面板的子元素；Button2属ContentPanel面板。

XAML代码：

<Grid x：Name="LayoutRoot" Background="Transparent">
      <Grid.RowDefinitions>
         <RowDefinition Height="Auto"/>
         <RowDefinition Height="*"/>
      </Grid.RowDefinitions>
      <Button Name="Button1" Grid.Row="0" Height="80">我属于Grid（LayoutRoot）</Button>
      <Grid x：Name="ContentPanel" Grid.Row="1" >
         <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
         </Grid.RowDefinitions>
         <Button Name="Button2" Grid.Row="0" Height="80">我属于Grid（ContentPanel）</Button>
      </Grid>
</Grid>