Co robi gwiazda WPF (szerokość = „100 *”)

Co dokładnie oznacza gwiazdę pod względem wielkości w WPF?

W siatce WPF Width="*"lub Height="*"oznacza proporcjonalny rozmiar.
Na przykład: aby dać 30% kolumnie 1 i 70% kolumnie 2 -

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

I podobnie dla rzędów -

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

Liczby nie muszą być liczbami całkowitymi.
Jeśli parametr Width for RowDefinition (Height for ColumnDefinition) zostanie pominięty, zakłada się 1 *.
W tym przykładzie kolumna 1 jest 1,5 raza szersza niż kolumna 2 -

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

Możesz mieszać automatyczne dopasowanie i stałe szerokości z * (proporcjonalnymi) szerokościami; w takim przypadku * kolumny są rozdzielane na pozostałą część po obliczeniu automatycznego dopasowania i stałych szerokości -

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

Jeśli masz takie 2 kolumny:

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

oznacza to, że pierwsza kolumna jest 10x szersza niż druga. To tak, jakby powiedzieć „10 części kolumny 1 i 1 część kolumny 2”.

Fajną rzeczą w tym jest to, że rozmiar kolumn będzie się proporcjonalnie zmieniać. Inne opcje to:

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

Mam nadzieję, że to pomoże!

bierzemy następujący przykład .....

jedna siatka i ma 3 kolumny, a każda zawiera jeden przycisk o rozmiarze 100.

Kod XAML to ...

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

Ale w rzeczywistości jego rozmiar to ...

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

Wniosek:

Całkowity rozmiar siatki to 600

„Auto”: rozmiar kolumny zostanie zmieniony na zawiera. (Na drugiej kolumnie znajduje się przycisk o szerokości 100)

„*”: Szerokość pierwszej kolumny to 3x trzeciej kolumny.

Dodatkowo możesz pominąć „*”, jeśli jest to element rozmiaru jednostki. Więc używając przykładu kodu Pwninsteina, wyglądałoby to tak:

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