O que a estrela WPF faz (largura = “100 *”)

111

O que significa exatamente a estrela em termos de tamanho no WPF?

wpf xaml grid size Shimmy Weitzhandler
fonte

Respostas:

234

Em uma grade WPF, Width="*"ou Height="*"significa dimensionamento proporcional.
Por exemplo: para dar 30% à coluna 1 e 70% à coluna 2 -

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

insira a descrição da imagem aqui

E da mesma forma para linhas -

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

Os números não precisam ser inteiros.
Se Width for RowDefinition (Height for ColumnDefinition) for omitido, 1 * está implícito.
Neste exemplo, a coluna 1 é 1,5 vezes mais larga do que a coluna 2 -

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

Coluna 1: 1,5 *, Coluna 2 1 * (implícito)

Você pode combinar larguras fixas e de ajuste automático com larguras * (proporcionais); nesse caso, as * colunas são distribuídas ao restante após o ajuste automático e as larguras fixas terem sido calculadas -

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

insira a descrição da imagem aqui

Edward
fonte
30

Se você tiver 2 colunas como esta:

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

isso significa que a primeira coluna é 10x mais larga que a segunda. É como dizer "10 partes da coluna 1 e 1 parte da coluna 2."

O legal disso é que suas colunas serão redimensionadas proporcionalmente. Outras opções são:

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

Espero que ajude!

Mark Carpenter
fonte
8

tomamos o seguinte exemplo .....

uma grade e tem 3 colunas e cada uma contém um botão de tamanho 100.

insira a descrição da imagem aqui

O código XAML é ...

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

Mas, na verdade, seu tamanho é ....

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

Conclusão:

O tamanho total da grade é 600

"Auto": a coluna é redimensionada e contém. (2ª coluna tem botão de largura 100)

"*": A largura da 1ª coluna é 3x da 3ª coluna.

Rikin Patel
fonte
3

Além disso, você pode omitir o "*" se esse for o elemento de tamanho da unidade. Então, usando o exemplo de código de Pwninstein, seria apenas:

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