如何：向网格中添加行和列

项目
05/28/2012

[本文档仅供预览，在以后的发行版中可能会发生更改。包含的空白主题用作占位符。]

Windows Presentation Foundation (WPF) Grid 控件使您能够通过创建基于网格的布局快速而轻松地定位和对齐控件。在设计时，可以在 WPF Designer中向 Grid 控件添加行和列。默认情况下，新的行和列使用 Star 调整大小。

重要

如果在向行或列中添加内容之前将其大小设置为 Auto，在设计器中将看不到该行或列。这样便难以在正确的行或列中定位控件。为了避免这种情况，您可以在工作时使用星号调整大小，然后在完成后改成“自动”。

本主题讨论可向 Grid 添加行和列的三种方式。还可以从网格中移除行和列。有关更多信息，请参见如何：从网格中移除行和列。

使用设计器

在 WPF Designer中，当您选择 Grid 控件时，会在顶部和左侧出现轨道。您可以使用轨道直接在 Grid 上添加行和列。 XAML 视图将用新的行和列自动更新。

备注

如果“FlowDirection”属性设置为“RightToLeft”，行的轨道将显示在 Grid 的右侧。

使用设计器向网格中添加行

在 WPF Designer中选择一个 Grid 控件。
将指针移到侧轨的外边缘。指针将变为十字形，同时将出现一条网格线，指示会在何处添加行。
单击用于设置行的轨道。

网格线固定到位，并将在轨道中网格线的末尾显示一个网格线指示符。

提示

您可以通过在网格内拖动网格线或在轨道中拖动网格线指示符来调整行的大小。
（可选）重复步骤 2 和步骤 3 添加更多行。

使用设计器向网格中添加列

在 WPF Designer中选择一个 Grid 控件。
将指针移到顶部轨道的上边缘。指针将变为十字形，同时将出现一条网格线，指示会在何处添加行。
单击用于设置列的轨道。

网格线固定到位，并将在轨道中网格线的末尾显示一个网格线指示符。

提示

您可以通过在网格内拖动网格线或在轨道中拖动网格线指示符来调整列的大小。
（可选）重复步骤 2 和步骤 3 添加更多列。

使用集合编辑器

也可以通过使用集合编辑器向 Grid 中添加行和列。使用集合编辑器配置行和列时，将自动更新“设计”视图和 XAML 视图。

通过使用集合编辑器向网格中添加行

在 WPF Designer中选择一个 Grid 控件。
在**“属性”**窗口中，找到 RowDefinitions 属性并单击“属性值”列中的省略号按钮。

将出现**“集合编辑器”**对话框。
单击**“添加”**添加一个新行。
（可选）设置该行的属性。
（可选）重复步骤 3 和步骤 4 添加更多行。
单击**“确定”以关闭“集合编辑器”**并返回到 WPF Designer。

通过使用集合编辑器向网格中添加列

在 WPF Designer中选择一个 Grid 控件。
在**“属性”**窗口中，找到 ColumnDefinitions 属性并单击“属性值”列中的省略号按钮。

将出现**“集合编辑器”**对话框。
单击**“添加”**添加一个新列。
（可选）设置该列的属性。
（可选）重复步骤 3 和步骤 4 添加更多列。
单击**“确定”以关闭“集合编辑器”**并返回到 WPF Designer。

使用 XAML 编辑器

也可以通过在 XAML 编辑器中键入内容手动向 Grid 中添加行和列。 “设计”视图将以新的行和列自动更新。

使用 XAML 编辑器向网格中添加行

在 XAML 编辑器中，找到一个 Grid 元素。
添加 Grid.RowDefinitions 元素作为 Grid 元素的子元素。代码应类似于：
```
<Grid>
    <Grid.RowDefinitions>
    </Grid.RowDefinitions>
</Grid>
```

添加多个 RowDefinition 元素。下面的标记显示了一个示例：

<Grid.RowDefinitions>
    <RowDefinition Height="100" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
    <RowDefinition Height="5*" />
</Grid.RowDefinitions>

通过使用 XAML 编辑器向网格中添加列

在 XAML 编辑器中，找到一个 Grid 元素。
添加 Grid.ColumnDefinitions 元素作为 Grid 元素的子元素。代码应类似于：
```
<Grid>
    <Grid.ColumnDefinitions>
    </Grid.ColumnDefinitions>
</Grid>
```

添加多个 ColumnDefinition 元素。下面的标记显示了一个示例：

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="100" />
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="5*" />
</Grid.ColumnDefinitions>

请参见