xaml Layout controls Grid

Example

Grid is used to create table layouts.

Basic rows and columns definitions

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

---

NOTE: All the following examples will use only columns, but are applicable to rows as well.

---

Auto size definitions

Columns and rows can be defined with "Auto" as their width/height. Auto size will take as much space as it needs to display its content, and no more.
Auto sized definitions can be used with fixed size definitions.

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

---

Simple star sized definitions

Columns and rows can be defined with * as their width/height. Star sized rows/columns will take as much space as it has, regardless of it's content.
Star sized definitions can be used with fixed and auto sized definitions. Star size is the default and thus the column width or row height can be omitted.

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

---

Proportional star sized definitions

Besides the fact that star takes as much space as it can, star definitions are also proportional to each other. If nothing else is mentioned, each star definition will take as much space as the others in the current grid.

However, it is possible to define a ratio between the sizes of different definitions by simply adding a multiplier to it. So a column defined as 2* will be twice as wide as a column defined as *. The width of a single unit is calculated by dividing the available space by the sum of the multipliers (if there's non it's counted as 1).
So a grid with 3 columns defined as *, 2*, * will be presented as 1/4, 1/2, 1/4.
And one with 2 columns defined as 2*, 3* will be presented 2/5, 3/5.

If there are auto or fixed definitions in the set, these will be calculated first, and the star definitions will take the remaining space after that.

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

---

Column/Row Span

It's possible to make a control stretch beyond it's cell by setting it's Row/ColumnSpan. The value set is the number of rows/columns 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>