What does the WPF star do (Width="100*")
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" />
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!
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.