Что делает звезда WPF (Ширина = «100 *»)

113

Что именно означает звездочка по размеру в WPF?

wpf xaml grid size Шимми Вайцхандлер
источник

Ответы:

236

В сетке WPF Width="*"или Height="*"означает пропорциональный размер.
Например: присвоить 30% столбцу 1 и 70% столбцу 2 -

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

введите описание изображения здесь

И так же для рядов -

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

Числа не обязательно должны быть целыми.
Если ширина для RowDefinition (Высота для ColumnDefinition) опущена, подразумевается 1 *.
В этом примере столбец 1 в 1,5 раза шире столбца 2 -

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

Столбец 1: 1,5 *, Столбец 2 1 * (подразумевается)

Вы можете смешивать автоматическую подгонку и фиксированную ширину с * (пропорциональной) шириной; в этом случае столбцы * распределяются по остатку после вычисления автоматической подгонки и фиксированной ширины -

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

введите описание изображения здесь

Эдвард
источник
31

Если у вас есть 2 таких столбца:

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

это означает, что первый столбец в 10 раз шире второго. Это как сказать «10 частей в столбце 1 и 1 часть в столбце 2».

Самое замечательное в этом то, что ваши столбцы будут пропорционально изменять размер. Другие варианты:

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

Надеюсь, это поможет!

Марк Карпентер
источник
8

возьмем следующий пример .....

одна сетка и имеет 3 столбца, каждый из которых содержит одну кнопку размером 100.

введите описание изображения здесь

Код 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>

Но на самом деле его размер ....

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

Вывод:

Общий размер сетки 600

«Авто»: размер столбца изменяется вместе с содержимым. (2-й столбец имеет кнопку шириной 100)

«*»: Ширина 1-го столбца в 3 раза больше ширины 3-го столбца.

Рикин Патель
источник
3

Кроме того, вы можете опустить "*", если это элемент размера единицы. Итак, используя пример кода Пунинштейна, это будет просто:

<ColumnDefinition Width="10*/>
<ColumnDefinition/>
Дэйв
источник