格

Grid 用于创建表格布局。

基本行和列定义

<Grid>
  <!-- Define 3 columns with width of 100 -->
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="100"/>
    <ColumnDefinition Width="100"/>
    <ColumnDefinition Width="100"/>
  </Grid.ColumnDefinitions>
  <!-- Define 3 rows with height of 50 -->
  <Grid.RowDefinitions>
    <RowDefinition Height="50"/>
    <RowDefinition Height="50"/>
    <RowDefinition Height="50"/>
  </Grid.RowDefinitions>
  <!-- This is placed at the top left (first row, first column) -->
  <Button 
      Grid.Column="0"
      Grid.Row="0"
      Content="Top Left"/>
  <!-- This is placed at the top left (first row, second column) -->
  <Button 
      Grid.Column="1"
      Grid.Row="0"
      Content="Top Center"/>
  <!-- This is placed at the center (second row, second column) -->
  <Button 
      Grid.Column="1"
      Grid.Row="1"
      Content="Center"/>
  <!-- This is placed at the bottom right (third row, third column) -->
  <Button 
      Grid.Column="2"
      Grid.Row="2"
      Content="Bottom Right"/>
</Grid>

注意：以下所有示例仅使用列，但也适用于行。

自动大小定义

可以使用 Auto 作为宽度/高度来定义列和行。自动尺寸将占用显示其内容所需的空间，而不再需要。
自动大小的定义可以与固定大小的定义一起使用。

<Grid>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="50"/>
  </Grid.ColumnDefinitions>
  <!-- This column won't take much space -->
  <Button Grid.Column="0" Content="Small"/>
  <!-- This column will take much more space -->
  <Button Grid.Column="1" Content="This text will be very long."/>
  <!-- This column will take exactly 50 px -->
  <Button Grid.Column="2" Content="This text will be cut"/>
</Grid>

简单的星号定义

可以使用*定义列和行作为其宽度/高度。星号行/列将占用尽可能多的空间，无论其内容如何。
星号定义可以与固定和自动大小的定义一起使用。星号是默认值，因此可以省略列宽或行高。

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="50"/>
    </Grid.ColumnDefinitions>
    <!-- This column will be as wide as it can -->
    <Button Grid.Column="0" Content="Small"/>
    <!-- This column will take exactly 50 px -->
    <Button Grid.Column="2" Content="This text will be cut"/>
</Grid>

比例星大小的定义

除了恒星占据尽可能多的空间这一事实外，恒星定义也是相互成正比的。如果没有提到其他内容，则每个星形定义将占用当前网格中其他星号的空间。

但是，可以通过简单地向其添加乘数来定义不同定义的大小之间的比率。因此，定义为 2*的列将是定义为*的列的两倍宽。单个单位的宽度是通过将可用空间除以乘数的总和来计算的（如果有，则将其计为 1）。
因此，将 3 列定义为*，2*，*的网格将显示为 1 / 4,1 / 2,1 / 4。
一个有 2 列定义为 2*，3*将呈现 2 / 5,3 / 5。

如果集合中有自动或固定定义，则首先计算这些定义，然后星形定义将占用剩余空间。

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="2*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <!-- This column will be as wide as the third column -->
    <Button Grid.Column="0" Content="Small"/>
    <!-- This column will be twice as wide as the rest -->
    <Button Grid.Column="1" Content="This text will be very long."/>
    <!-- This column will be as wide as the first column -->
    <Button Grid.Column="2" Content="This text will may be cut"/>
</Grid>

列/行跨度

通过设置它的 Row / ColumnSpan，可以使控制范围超出它的单元格。值集是行数/列数 th

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="2*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <!-- This control will streach across most of the grid -->
    <Button Grid.Column="0" Grid.ColumnSpan="2" Content="Small"/>
    <Button Grid.Column="2" Content="This text will may be cut"/>
</Grid>