Author : Admin
Last Modified : 25-Dec-2019
Complexity : Beginner

Difference between * and Auto in wpf grid


* and 'AUTO' are little tricky while working with the Grid layout container. In Grid, child elements are arranged in cells defined by rows and columns. RowDefinition is used to define the Rows and ColDefinition is used to define Columns.
* and Auto is used to define Row's height and Column's width. We will not discuss here, how to use RowDefination and ColDefination. We will keep our focus on * and Auto.

There is actually three-way to set the Rows height or Column width.

  1. doubleValue
  2. starSizing(*)
  3. Auto
<RowDefinition Height="doubleValue"/>

- or -

<RowDefinition Height="starValue"/>

-or-

<RowDefinition Height="Auto"/>

doubleValue               In doubleValue, the value is expressed in pixel. 

starValue                    It allows you to specify columns and rows in percentages, * is need to use after the value.

Auto                           The size is determined by the size of the content object.

 

DoubleValue

It is straight-forward. if a double value is put in Height property of RowDefinition then it will be the height of the row in pixel. See below example how to use this.

Example :  

<RowDefinition Height="25" />
in this example height of the row is 25 pixel

 

Start Value

it is used when we need to define height or width in percentage. it is the default unit. If no value is mentioned the default sizing is 1*.

example 1

<RowDefinition />
-or-
<RowDefinition Height="1*" />

example 2

<RowDefinition Height="10*"/>
<RowDefinition Height="*"/>

means 1st row is 10 times the size of column 2. 

example 3

<RowDefinition Height="4*"/>

<RowDefinition Height="6*"/>

In this example, first-row height is 40% and the second-row height is 60%.

 

Auto

In Auto, size is resolved by the size property of the content control.

example 3

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Button Content="GurukulTree Button" Grid.Row="1">
</Grid>

In this example, Grid has two rows, the second row has a button and is Auto so it takes the height of the button 
but the first row is * so it will stretch and occupy all remaining space available. So with the example it is clear,
In Auto it take the size of content object.

 

Note

As we have shown the example for RowDefination, same is true for ColDefination also.