¿Qué significa exactamente la estrella en términos de tamaño en WPF?
¿Qué significa exactamente la estrella en términos de tamaño en WPF?
Respuestas:
En una cuadrícula de WPF, Width="*"
o Height="*"
significa tamaño proporcional.
Por ejemplo: para dar 30% a la columna 1 y 70% a la columna 2 -
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="7*" />
Y lo mismo para las filas:
<RowDefinition Height="3*" />
<RowDefinition Height="7*" />
Los números no tienen por qué ser enteros.
Si se omite Width para RowDefinition (Alto para ColumnDefinition), se implica 1 *.
En este ejemplo, la columna 1 es 1,5 veces más ancha que la columna 2 -
<ColumnDefinition Width="1.5*" />
<ColumnDefinition />
Puede mezclar anchos fijos y de ajuste automático con anchos * (proporcionales); en ese caso, las * columnas se reparten entre el resto después de calcular el ajuste automático y los anchos 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" />
Si tiene 2 columnas como esta:
<ColumnDefinition Width="10*"/>
<ColumnDefinition Width="*"/>
significa que la primera columna es 10 veces más ancha que la segunda. Es como decir "10 partes de la columna 1 y 1 parte de la 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!
tomamos el siguiente ejemplo .....
una cuadrícula y tiene 3 columnas y cada una contiene un botón de tamaño 100.
El 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:
El tamaño total de la cuadrícula es 600
"Auto": la columna se redimensiona con su contenido. (La segunda columna tiene un botón de ancho 100)
"*": El ancho de la 1ª columna es 3 veces superior al de la 3ª columna.