演练：使用 TableLayoutPanel 在 Windows 窗体上排列控件

  • 项目

某些应用程序需要这样一个窗体，该窗体的布局可在窗体重新调整大小或在内容更改大小时对自身进行排列。 当你需要动态布局并且不希望在代码中显式处理 Layout 事件时，请考虑使用布局面板。

FlowLayoutPanel 控件和 TableLayoutPanel 控件提供可用于排列窗体上的控件的直观方式。 两种控件均提供一种自动的可配置能力来控制包含在控件内的子控件的相对位置，并且两种控件均在运行时提供动态布局功能，以便它们可以在父窗体的尺寸更改时重新调整子控件的大小和对其进行重新定位。 布局面板可以嵌套在布局面板内，从而实现复杂的用户界面。

FlowLayoutPanel 以特定的流向排列其内容：水平或垂直。 可从一行到下一行，或从一列到下列进行内容换行。 还可以剪切内容，而不是进行换行。 有关详细信息，请参阅演练：使用 FlowLayoutPanel 在 Windows 窗体上排列控件。

TableLayoutPanel 在网格中排列内容，提供类似于 HTML <table> 元素的功能。 TableLayoutPanel 控件允许你将控件放在网格布局中，而无需精确指定每个控件的位置。 其单元格排列为行和列，并且这些行和列可具有不同的大小。 可以跨行和列合并单元格。 单元格可以包含窗体所能包含的任何内容，并且在大多数其他方面都可以作为容器使用。

TableLayoutPanel 控件还在运行时提供按比例调整大小的功能，因此你的布局可以在窗体调整大小时平滑地进行更改。 这使得 TableLayoutPanel 控件非常适合数据输入窗体和本地化应用程序等用途。 有关详细信息，请参阅演练：创建可根据数据输入需要调整大小的 Windows 窗体和演练：创建可本地化的 Windows 窗体。

通常，不应将 TableLayoutPanel 控件用作整个布局的容器。 可使用 TableLayoutPanel 控件为部分布局提供按比例调整大小的功能。

本演练涉及以下任务：

  • 创建 Windows 窗体项目

  • 在行和列中排列控件

  • 设置行和列属性

  • 使用控件跨越行和列

  • 自动处理溢出

  • 通过在工具箱中双击控件将其插入

  • 通过绘制控件轮廓将其插入

  • 将现有控件重新分配给另一个父控件

完成上述操作后，你将会了解这些重要布局功能所发挥的作用。

创建项目

第一步是创建项目并设置窗体。

创建项目

  1. 创建一个名为“TableLayoutPanelExample”的 Windows 应用程序项目。 有关详细信息，请参阅如何：创建 Windows 窗体应用程序项目。

  2. 在“Windows 窗体设计器”中选择窗体。

在行和列中排列控件

借助 TableLayoutPanel 控件，可以轻松地将控件排列成行和列。

使用 TableLayoutPanel 在行和列中排列控件

  1. 从 TableLayoutPanel “工具箱” 将 控件拖到你的窗体上。 请注意，默认情况下，TableLayoutPanel 控件有四个单元格。

  2. 将 Button 控件从工具箱拖到 TableLayoutPanel 控件中，然后将其放入其中一个单元格。 请注意，Button 控件将在所选单元格中创建。

  3. 将另外三个 Button 控件从工具箱拖到 TableLayoutPanel 控件中，以便每个单元格都包含一个按钮。

  4. 抓取两列之间的垂直调整大小图柄并将其移至左侧。 请注意，第一列中 Button 控件的大小被调整为更小的宽度，而第二列中 Button 控件的大小保持不变。

  5. 抓取两列之间的垂直调整大小图柄并将其移至右侧。 请注意，第一列中的 Button 控件恢复为原始大小，而第二列中的 Button 控件向右移动。

  6. 上下移动水平调整大小图柄，以查看面板中控件的效果。

使用停靠和定位在单元格内放置控件

TableLayoutPanel 中子控件的定位行为不同于其他容器控件中的行为。 子控件的停靠行为与其他容器控件相同。

在单元格内放置控件

  1. 选择第一个 Button 控件。 将其 Dock 属性的值更改为 Fill。 请注意，Button 控件将展开以填充单元格。

  2. 选择其他 Button 控件之一。 将其 Anchor 属性的值更改为 Right。 请注意，此操作会将它移动，使其右边框靠近单元格的右边框。 边框之间的距离是 Button 控件的 Margin 属性和面板的 Padding 属性之和。

  3. 将 Button 控件的 Anchor 属性值更改为 Right 和 Left。 请注意，该控件会根据单元格的宽度调整大小，调整时会考虑 Margin 和 Padding 值。

  4. 使用 Top 和 Bottom 样式重复步骤 2 和 3。

设置行和列属性

可以使用 RowStyles 和 ColumnStyles 集合设置行和列的各个属性。

设置行和列属性

  1. 在“Windows 窗体设计器”中选择 TableLayoutPanel 控件。

  2. 在“属性”窗口中，单击列条目旁边的省略号 (The Ellipsis button (...) in the Properties window of Visual Studio.) 按钮打开 ColumnStyles 集合。

  3. 选择第一列并将其 SizeType 属性的值更改为 AutoSize。 单击“确定”接受这些更改。 请注意，第一列的宽度会缩小，以适应 Button 控件。 另请注意，列的宽度不可调整大小。

  4. 在“属性”窗口中，打开 ColumnStyles 集合并选择第一列。 将其 SizeType 属性的值更改为 Percent。 单击“确定”接受这些更改。 将 TableLayoutPanel 控件调整为更大的宽度，并注意第一列的宽度会扩大。 将 TableLayoutPanel 控件调整为更小的宽度，并注意第一列中的按钮会根据单元格调整大小。 另请注意，列的宽度可调整大小。

  5. 在“属性”窗口中，打开 ColumnStyles 集合并选择所有列出的列。 将每个 SizeType 属性的值设置为 Percent。 单击“确定”接受这些更改。 对 RowStyles 集合重复这些步骤。

  6. 抓取一个角调整大小图柄并调整 TableLayoutPanel 控件的宽度和高度。 请注意，行和列的大小会随着 TableLayoutPanel 控件大小的变化而调整。 另请注意，行和列的大小可通过水平和垂直调整大小图柄进行调整。

使用控件跨越行和列

TableLayoutPanel 控件在设计时向控件添加了几个新属性。 其中两个属性是 RowSpan 和 ColumnSpan。 你可以使用这些属性使控件跨越多行或多列。

使用控件跨越行和列

  1. 选择第一行第一列中的 Button 控件。

  2. 在“属性”窗口中，将 ColumnSpan 属性的值更改为 2。 请注意，Button 控件会填充第一列和第二列。 另请注意，已添加额外的行以容纳此更改。

  3. 对 RowSpan 属性重复步骤 2。

通过在工具箱中双击控件将其插入

可通过在 TableLayoutPanel “工具箱” 中双击控件来填充控件。

若要通过在工具箱中双击控件将其插入

  1. 从 TableLayoutPanel “工具箱” 将 控件拖到你的窗体上。

  2. 在“工具箱” Button中，双击控件图标。 请注意，新按钮控件显示在 TableLayoutPanel 控件的第一个单元格中。

  3. 在 “工具箱”中再双击几个控件。 请注意，新控件会相继显示在 TableLayoutPanel 控件未占用的单元格中。 另请注意，如果没有打开的单元格可用，TableLayoutPanel 控件会扩大以容纳新控件。

自动处理溢出

将控件插入 TableLayoutPanel 控件时，新控件的空单元格可能会用完。 TableLayoutPanel 控件可通过增加单元格数量自动处理这种情况。

观察溢出的自动处理

  1. 如果 TableLayoutPanel 控件中仍有空单元格，请继续插入新的 Button 控件，直到 TableLayoutPanel 控件被占满。

  2. TableLayoutPanel 控件被占满后，双击工具箱中的 Button 图标以插入另一个 Button 控件。 请注意，TableLayoutPanel 控件会创建新单元格以容纳新控件。 再插入几个控件并观察调整大小行为。

  3. 将 TableLayoutPanel 控件的 GrowStyle 属性值更改为 FixedSize。 双击工具箱中的 Button 图标以插入 Button 控件，直到 TableLayoutPanel 控件被占满。 再次双击工具箱中的 Button 图标。 请注意，你会收到来自 Windows 窗体设计器的错误消息，通知你无法创建其他行和列。

通过绘制控件轮廓将其插入

你可以通过在单元格中绘制控件轮廓将控件插入 TableLayoutPanel 控件并指定其大小。

通过绘制控件轮廓插入控件

  1. 从 TableLayoutPanel “工具箱” 将 控件拖到你的窗体上。

  2. 在“工具箱” 中，单击 Button 控件图标。 请勿将其拖到窗体上。

  3. 将鼠标指针移到 TableLayoutPanel 控件上。 请注意，指针会更改为十字形，同时会附上 Button 控件图标。

  4. 单击并按住鼠标按钮。

  5. 拖动鼠标指针以绘制 Button 控件的轮廓。 当获得所需大小时，释放鼠标。 请注意，Button 控件将在绘制控件轮廓的单元格中创建。

单元格内不允许有多个控件

TableLayoutPanel 控件的每个单元格只能包含一个子控件。

证明单元格内不允许有多个控件

交换控件

使用 TableLayoutPanel 控件可以交换占用两个不同单元格的控件。

交换控件

  • 将其中一个 Button 控件从已占用的单元格拖放到另一个已占用的单元格。 请注意，这两个控件会从一个单元格移动到另一个单元格。

后续步骤

可使用布局面板和控件的组合实现复杂布局。 建议了解的其他内容包括：

  • 尝试将其中一个 Button 控件调整为更大的大小，并注意对布局产生的效果。

  • 将所选的多个控件粘贴到 TableLayoutPanel 控件中，并注意控件的插入方式。

  • 布局面板可以包含其他布局面板。 试验将 TableLayoutPanel 控件放入现有控件。

  • 将 TableLayoutPanel 控件停靠到父窗体。 调整窗体大小，并注意对布局产生的效果。

另请参阅