Grid

The Grid element contains, by default, one row and one column that implicitly take up all the available space on the containing Page.

The following example demonstrates an attached property in the form of the Grid.Row which appears within the Rectangle element. Height="Auto" tells the layout engine to accomodate all the elements with it. The first Rectangle, with a height of 100, is the only member of this Row, and its explicitly set height is accomodated. Changing the Height value changes the height of the beige row.

The asterisk refers to star-sizing, and directs the layout engine to take up all remaining space.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
  </Grid.RowDefinitions>
  <Rectangle Height="100" Fill="Beige" Grid.Row="0" />
  <Rectangle Grid.Row="1" Fill="SteelBlue" />
</Grid>

^GitHub

Here, star-sizing is used to adjust the heights of all rows proprtionally, such that row 3 takes up 3 times the height of row 1. So this row inherits that height.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
  <Grid.RowDefinitions>
    <RowDefinition Height="1*" />
    <RowDefinition Height="2*" />
    <RowDefinition Height="3*" />
  </Grid.RowDefinitions>

  <Rectangle Fill="Red" Grid.Row="0" />
  <Rectangle Fill="Blue" Grid.Row="1" />
  <Rectangle Fill="Green" Grid.Row="2" />
</Grid>

^GitHub

Elements within the first row or column don't need to have an attached property explicitly declared, since those are the defaults.

<Grid Background="Black">
  <Grid.RowDefinitions>
    <RowDefinition Height="*" />
    <RowDefinition Height="*" />
    <RowDefinition Height="*" />
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" />
  </Grid.ColumnDefinitions>

  <TextBlock>1</TextBlock>
  <TextBlock Grid.Column="1">2</TextBlock>
  <TextBlock Grid.Column="2">3</TextBlock>

  <TextBlock Grid.Row="1">4</TextBlock>
  <TextBlock Grid.Row="1" Grid.Column="1">5</TextBlock>
  <TextBlock Grid.Row="1" Grid.Column="2">6</TextBlock>

  <TextBlock Grid.Row="2">7</TextBlock>
  <TextBlock Grid.Row="2" Grid.Column="1">8</TextBlock>
  <TextBlock Grid.Row="2" Grid.Column="2">9</TextBlock>

</Grid>

^GitHub

ColumnSpan^?

Another attached property that allows an element to span columns.