Visual Studio 2015

In XAML there are three ways to specify widths and heights. Except for specifying the number of pixels as a double number, there are also the keywords Auto and * (an asterisk). These three options work as follows:

  • Double value. A floating-point number or integer that specifies the width or height in number of pixels.
  • Auto. The keyword Auto sets the width or height of the column or row to that of its content.
  • Star. The keyword * makes the column or row expand to fill the remaining space within the container. If the star is preceded with a number, it’s interpreted as a factor.

Looking at the following code example, the grid’s width is set to 600 pixels. Within the grid, there are three columns. The first column’s width is set 3 / (3 + 2 + 1) = ½ of the available space, which in this case is equal to 300 pixels. Analogously, the second column’s width is computed to 200 pixels and the third to 100 pixels.

<Grid Width="600">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="3*" />
        <ColumnDefinition Width="2*" />
        <ColumnDefinition Width="1*" />
    </Grid.ColumnDefinitions>
    <Button>Button 1</Button>
    <Button Grid.Column="1">Button 2</Button>
    <Button Grid.Column="2">Button 3</Button>
</Grid>

Continuing with the above example with a 600 pixels wide grid containing three columns, here are three examples of their computed widths:

Column 0 Column 1 Column 2 Result
200 100 * 200,100,400
200 * * 200,250,250
200 * 4* 200,100,400

Read more about sizing in XAML: