What is difference between " * " and "Auto" in Silverlight Grid Layout Definitions

Question

trying to understand the following:

<Grid Name="Root">
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
</Grid>

Can anyone help me in explaining the difference between * and Auto in the above snippet?

thanks

Answer 1

This page (admittedly from Silverlight 2, but it's still valid) has some examples of using the grid with the following explanations:

For every row in the Grid we have a RowDefinition element. All row definitions are enclosed in a Grid.RowDefinitions element. Our first two rows are 50 pixels high and Height of the third one is set to “*”. This indicates that the row will take the whole place in the Grid which is not taken by the other rows.

and:

Another option is to set the width and/or the height to “auto”. This way every column/row changes its size so as to match the width/height of the controls in it. For example:

Answer 2

Auto will make the each column size so it can fit whatever is contained in it.

* will use up the maximum amount of available space. It is best to use when you have a "left over" column that you want to just resize to whatever is left over.

Example Grid of width undefined.

Scenario 1:

Column 1  | Column 2  | Column 3
----------------------------------
100 Width | Auto      | 200 Width

On this case column 2 could be anything between 1 and whatever the content that is put in it requires and the max space available for the grid's width. If column 2 was changed to * and a width defined on the grid as a whole it would to fill in the left over space to achieve the grid's width. If you had two columns set as *, and a grid width defined, then they would compete for the left over space and split it.

Usually I use * for only one column maximum (although this is not a rule) if I have a control that is set to a dynamic size so that the column will fill in whatever space is left over by the other columns. It's great if you want specific sized columns for a dynamically sized control and want certain columns to stay fixed and define one column to expand to fill in the rest of the control. Auto would not do this with empty or low content columns that would not actually fill the left over space.

Scenario 2 (col 3 contains content that is 100 width and grid has a total width of 800):

Column 1  | Column 2  | Column 3  | Column 4
--------------------------------------------
100 Width | 200 Width | Auto      | *

Column 3 would then only size to 100 width. Column 4 would size to 400 width to fill in the left over space.

Answer 3

Auto means give this column/row the size of the contained items.

* means share the rest of the available space with other columns/rows that also specify *.

In fact * is equivalent to 1*. It is possible to specify 2*, 3* ... N* for a width or height. The algorithm Silverlight uses is to total all values of N for all the rows using * then give each row its appropriate share of the available space. For example:-

<Grid.RowDefinitions>
    <RowDefinition Height="*" />
    <RowDefinition Height="2*" />
    <RowDefinition Height="3*" />
    <RowDefinition Height="Auto" />
</Grid.Definitions>

This would first determine how high the forth row needs to be from its content and substract that from the full availabe height. The remainder of height will be divided amoungst the * rows. The first getting 1/6, the second getting a 1/3 and the third getting 1/2 of the available height.