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

Question

What do the asterisks mean in WPF?

Answer 1

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

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

And similarly for strings -

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

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

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

You can combine auto-fit and fixed width with width * (proportional); in this case * the columns are distributed to the remainder after the automatic fit and fixed width were 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" /> 

Answer 2

If you have 2 columns:

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

this means that the first column is 10 times wider than the second. This is how to say "10 parts of column 1 and 1 part of column 2".

The nice thing is that your columns will resize proportionally. Other options:

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

Hope this helps!

Answer 3

take the following example .....

one grid and has 3 columns and each contains one button 100 in size.

XAML code ...

  <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 ...

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

Output:

Total mesh size 600

Auto: The column changes the size it contains. (2nd column has a button 100 wide)

"*": width of 1st column 3 times from 3rd column.

Answer 4

Alternatively, you can leave "*" if it is a block size element. Thus, using the Pwninstein sample code, it will be simple:

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