¿Qué hace la estrella de WPF (ancho = "100 *")

111

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

wpf xaml grid size Shimmy Weitzhandler
fuente

Respuestas:

234

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*" />

ingrese la descripción de la imagen aquí

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

Columna 1: 1,5 *, Columna 2 1 * (implícita)

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

ingrese la descripción de la imagen aquí

Eduardo
fuente
30

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!

Mark Carpenter
fuente
8

tomamos el siguiente ejemplo .....

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

ingrese la descripción de la imagen aquí

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.

Rikin Patel
fuente
3

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

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