格

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>