What does the WPF star do (Width="100*")

What does exactly the star in size terms in WPF mean?

Solution 1:

In a WPF Grid, Width="*" or Height="*" means proportional sizing.
For example: to give 30% to column 1 and 70% to column 2 -

<ColumnDefinition Width="3*" />
<ColumnDefinition Width="7*" />

And likewise for rows -

<RowDefinition Height="3*" />
<RowDefinition Height="7*" />

The numbers do not have to be integers.
If the Width for RowDefinition (Height for ColumnDefinition) is omitted, 1* is implied.
In this example, column 1 is 1.5 times wider than column 2 -

<ColumnDefinition Width="1.5*" />
<ColumnDefinition />

You can mix auto-fit and fixed widths with * (proportional) widths; in that case the * columns are apportioned to the remainder after the auto-fit and fixed widths have been calculated -

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto" />  <!-- Auto-fit to content, 'Hi' -->
    <ColumnDefinition Width="50.5" />  <!-- Fixed width: 50.5 device units) -->
    <ColumnDefinition Width="69*" />   <!-- Take 69% of remainder -->
    <ColumnDefinition Width="31*"/>    <!-- Take 31% of remainder -->
</Grid.ColumnDefinitions>
<TextBlock Text="Hi" Grid.Column="0" />

Solution 2:

If you have 2 columns like this:

<ColumnDefinition Width="10*"/>
<ColumnDefinition Width="*"/>

it means that the first column is 10x wider than the second. It's like saying "10 parts column 1, and 1 part column 2."

The cool thing about this is that your columns will resize proportionally. Other options are:

//Take up as much space as the contents of the column need
<ColumnDefinition Width="Auto"/>
//Fixed width: 100 pixels
<ColumnDefinition Width="100"/>

Hope that helps!

Solution 3:

we take following example.....

one grid and has 3 columns and each contain one button of size 100.

XAML Code is...

    <Grid x:Name="LayoutRoot" Width="600">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="3*" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="10,10,0,0" Name="button1" VerticalAlignment="Top" Width="100" />
    <Button Content="Button1" Height="23" HorizontalAlignment="Left" Margin="0,10,0,0" Name="button2" VerticalAlignment="Top" Width="100" Grid.Column="1" />
    <Button Content="Button2" Height="23" HorizontalAlignment="Left" Margin="0,10,0,0" Name="button3" VerticalAlignment="Top" Width="100" Grid.Column="2" />
</Grid>

But actually its size is....

<Grid.ColumnDefinitions>
        <ColumnDefinition Width="375" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="125" />
</Grid.ColumnDefinitions>

Conclusion:

Total size of grid is 600

"Auto" : Column is re-size with it's contains. (2nd column has button of width 100)

"*" : 1st column width is 3x of 3rd column.

Solution 4:

In addition, you can leave out the "*" if that's the element of unit size. So using Pwninstein's code example, it would just be:

<ColumnDefinition Width="10*/>
<ColumnDefinition/>