WPF 星号是做什么的(Width = “100 *”)

星星的大小在 WPF 中到底是什么意思?

100122 次浏览

如果你有这样的两栏:

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

Hope that helps!

另外,如果“ *”是单位大小的元素,可以省略它。使用 Pwninstein 的代码示例,它就是:

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

在 WPF 网格中,Width="*"Height="*"表示比例调整。
For example: to give 30% to column 1 and 70% to column 2 -

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

enter image description here

对于行也是如此

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

数字不一定是整数。
如果省略 RowDefinition 的宽度(ColumnDefinition 的高度) ,则暗示为1 * 。
在这个示例中,列1的宽度是列2-的1.5倍

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

Column 1: 1.5*, Column 2 1* (implied)

您可以将自适应宽度和固定宽度与 * (比例)宽度混合; 在这种情况下,* 列将在计算自适应宽度和固定宽度之后分配给其余部分-

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

enter image description here

我们以下面的例子... ..。

一个网格有3列,每列包含一个宽度为100的按钮。

enter image description here

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

  • Auto : Column is resizes based on it's contents. (2nd column has button of width 100)

  • * : 1st column width is 3x of 3rd column.