#418 – Star Sizing Allows Setting Row and Column Sizes Relative to Each Other

You can use star sizing when setting the height of rows or width of columns in a Grid to distribute space in a Grid across multiple rows or columns.

When you specify the size of a row or column with star sizing, you can specify the size simply as “*”, or you can specify a number followed by the star (e.g. 2*).  The number indicates the size of the row or column, relative to the other rows or columns.  (The value “*” is equivalent to “1*”).

In the example below, the second row’s height is specified as “2*”, indicating that it should always be twice the height of the first row.  (Or 2 / (1+2) = 2/3 of the total)

    <Grid ShowGridLines="True">
    	<Grid.RowDefinitions>
    		<RowDefinition Height="1*"/>
    		<RowDefinition Height="2*"/>
    	</Grid.RowDefinitions>

    	<Label Grid.Row="0" Content="I'm a 1* row" />
    	<Label Grid.Row="1" Content="I'm a 2* row" />
	</Grid>