Grid 网格布局
Grid
控件非常适用于按列和行排列子控件。您可以为 Grid
定义绝对大小、比例大小和自动大小的行和列几何形状。
每个位于 Grid
中的子控件都可以使用列和行坐标定位在 Grid
单元格中。这些坐标是从零开始的,并且默认值为零。
如果在同一单元格中定位多个子控件,它们将按照在 XAML 中出现的顺序在该单元格中绘制。这是实现层叠堆叠的另一种策略,除了使用 Panel
。
注意
如果您忽略了 Grid
的子控件的列和行坐标,它们都将被绘制在左上角(列=0,行=0)。
也可以使子控件跨越一个或多个单元格的行或列,或两者都跨越。
常用属性
您可能最常使用这些属性:
属性 | 描述 |
---|---|
ColumnDefinitions | Grid 中列宽的尺寸定义。 |
RowDefinitions | Grid 中行高的尺寸定义。 |
ShowGridLines | 显示单元格之间的网格线(作为虚线显示)。 |
Grid.Column | 将控件布局到指定的从零开始的列中。 |
Grid.Row | 将控件布局到指定的从零开始的行中。 |
Grid.ColumnSpan | 将控件跨越一个或多个列。 |
Grid.RowSpan | 将控件跨越一个或多个行。 |
Grid.IsSharedSizeScope | 定义控件为 SharedSizeGroup 的包含范围。 |
尺寸定义
您可以如下定义行和列的大小:
- 绝对大小 - 以设备独立像素(整数)为单位。
- 比例大小 - 根据剩余
Grid
大小的比例。 - 自动大小 - 根据包含的子控件的大小自动调整。
尺寸定义可以通过简短代码列表或使用 XAML 元素完全展开来编写。
完整定义支持额外的约束,如 SharedSizeGroup
和指定最小和最大长度的绝对大小。
绝对大小定义
绝对大小定义在列网格式中 以整数形式编写。例如:
ColumnDefinitions="200, 200, 300"
通过完全展开的 XAML 定义,这与以下相同:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"></ColumnDefinition>
<ColumnDefinition Width="200"></ColumnDefinition>
<ColumnDefinition Width="300"></ColumnDefinition>
</Grid.ColumnDefinitions>
</Grid>
比例大小定义
比例大小定义使用星号表示可用 Grid
空间的比例。例如,要创建两个宽度相同的列,然后是一个宽度是前两个的两倍(单个宽度的两倍)的列:
ColumnDefinitions="*, *, 2*"
通过完全展开的 XAML 定义,这与以下相同:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="2*"></ColumnDefinition>
</Grid.ColumnDefinitions>
</Grid>
提示
尺寸定义不支持百分比。一个解决方法是创建一个定义,其中所有比例值加起来等于 100,例如 <Grid ColumnDefinitions="25*, 25*, 50*">
用于 3 个列,每个列分别占剩余可用宽度的 25%、25% 和 50%。