Qué hace la estrella WPF (Ancho = "100 *")

Question

¿Qué significa exactamente la estrella en términos de tamaño en WPF?

Answer 1

En una cuadrícula de WPF, Width="*" o Height="*" significa el tamaño proporcional.
Por ejemplo: para dar 30% a la columna 1 y el 70% a la columna 2 -

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

Y del mismo modo para las filas -

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

Los números no tienen que estar enteros.
Si se omite el ancho de RowDefinition (Height for ColumnDefinition), 1 * está implícito.
En este ejemplo, la columna 1 es 1,5 veces más ancha que la columna 2 -

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

Usted puede mezclar auto-ajuste y anchos fijos con * anchuras (proporcionales); en ese caso las columnas * son asignados a las del resto después se han calculado las anchuras de auto-ajuste y fijos -

<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

Si usted tiene 2 columnas como esta:

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

significa que la primera columna es 10 veces mayor que el segundo. Es como decir "10 partes columna 1 y 1 parte columna 2".

Lo bueno de esto es que sus columnas cambiarán de tamaño proporcionalmente. Otras opciones son:

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

Espero que ayude!

Answer 3

Además, puede omitir el "*" si ese es el elemento del tamaño de la unidad. Así, utilizando el código de ejemplo Pwninstein, que sólo sería:

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

Answer 4

tomamos siguiente ejemplo .....

una cuadrícula y tiene 3 columnas y cada uno contiene un botón de tamaño 100.

Código XAML es ...

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

Pero en realidad su tamaño es ....

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

Conclusión:

tamaño total de la rejilla es de 600

"Auto": La columna es cambiar el tamaño con que es contiene(La 2da columna tiene un botón de ancho 100)

"*": el ancho de la primera columna es 3x de la 3ra columna.