xaml Grid

示例

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>

---

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

---

自动尺寸定义

可以使用“自动”定义列和行的宽度/高度。自动调整大小将占用显示内容所需的空间，仅此而已。
自动调整大小的定义可以与固定大小的定义一起使用。

<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 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 column will be as wide as the first column -->
    <Button Grid.Column="2" Content="This text will may be cut"/>
</Grid>

---

列/行跨度

通过将控件设置为行/列跨度，可以使控件超出其单元格。设置的值是行数/列数

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