WPF内建面板之——Grid

       Canvas、StackPanel、WrapPanel、DockPanel和Grid是WPF中主要的5种内建面板，这些面板类都位于System.Windows.Controls命名空间下。

       Grid是最通用的面板，它可以让你在一个多行、多列的表中排列子元素，而不依靠包装，提供了许多特性来有效地可能告知行和列。

       用Grid实现类似于Visual Studio的启动界面：

<Grid Background="LightBlue" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">

  <!-- Define four rows: -->
  <Grid.RowDefinitions>
    <RowDefinition/>
    <RowDefinition/>
    <RowDefinition/>
    <RowDefinition/>
  </Grid.RowDefinitions>

  <!-- Define two columns: -->
  <Grid.ColumnDefinitions>
    <ColumnDefinition/>
    <ColumnDefinition/>
  </Grid.ColumnDefinitions>

  <!-- Arrange the children: -->
  <Label    Grid.Row="0" Grid.Column="0" Background="Blue" Foreground="White"
            HorizontalContentAlignment="Center">Start Page</Label>
  <GroupBox Grid.Row="1" Grid.Column="0" Background="White"
            Header="Recent Projects">...</GroupBox>
  <GroupBox Grid.Row="2" Grid.Column="0" Background="White"
            Header="Getting Started">...</GroupBox>
  <GroupBox Grid.Row="3" Grid.Column="0" Background="White"
            Header="Headlines">...</GroupBox>
  <GroupBox Grid.Row="1" Grid.Column="1" Background="White"
            Header="Online Articles">
    <ListBox>
      <ListBoxItem>Article #1</ListBoxItem>
      <ListBoxItem>Article #2</ListBoxItem>
      <ListBoxItem>Article #3</ListBoxItem>
      <ListBoxItem>Article #4</ListBoxItem>
    </ListBox>
  </GroupBox>
</Grid>

效果如下图：

      要使用Grid，首先要向RowDefinitions和ColumnDefinitions属性中添加一定数量的RowDefinitions和ColumnDefinitions元素，从而定义行数和列数。可以在Grid中使用Row和Column附加属性定位子元素，它们都是以0为基准的整型值。如果没有显式设置任何行或列，Grid将会隐式地加入一个单元格。而如果没有在子元素上显式地设置Grid.Row或者Grid.Column，它们的值将为0.

        Grid的单元格可以是空的，一个单元格中可以有多个元素，而在单元格中元素是根据它们的Z顺序一个接着一个呈现的。与Canvas医院，同一个单元格中的子元素不会与其他元素交互布局，信息——它们仅仅是重叠而已。从上图中看到的在线文章列表太小了，可以使用Grid的两个附加属性来解决这个问题，它们是RowSpan和ColumnSpan。属性默认设置为1，且可以被设置为任何比1大的数字，这样可以让元素跨多行或多列。

       通过设置某个RowDefinition的Height和某个ColumnDefinition的Width为字符串Auto（区分大小写），就可以实现自动尺寸监控。

<Grid Background="LightBlue" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">

  <!-- Define four rows: -->
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition/>
    <RowDefinition/>
    <RowDefinition/>
  </Grid.RowDefinitions>

  <!-- Define two columns: -->
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition/>
  </Grid.ColumnDefinitions>

  <!-- Arrange the children: -->
  <Label    Grid.Row="0" Grid.Column="0" Background="Blue" Foreground="White"
            HorizontalContentAlignment="Center"
            Grid.ColumnSpan="2">Start Page</Label>
  <GroupBox Grid.Row="1" Grid.Column="0" Background="White"
            Header="Recent Projects">...</GroupBox>
  <GroupBox Grid.Row="2" Grid.Column="0" Background="White"
            Header="Getting Started">...</GroupBox>
  <GroupBox Grid.Row="3" Grid.Column="0" Background="White"
            Header="Headlines">...</GroupBox>
  <GroupBox Grid.Row="1" Grid.Column="1" Background="White"
            Header="Online Articles" Grid.RowSpan="3">
    <ListBox>
      <ListBoxItem>Article #1</ListBoxItem>
      <ListBoxItem>Article #2</ListBoxItem>
      <ListBoxItem>Article #3</ListBoxItem>
      <ListBoxItem>Article #4</ListBoxItem>
    </ListBox>
  </GroupBox>
</Grid>

效果如下图：

转载于:https://www.cnblogs.com/Jennifer/articles/1988103.html