【WinForm.NET开发】使用 FlowLayoutPanel 在 Windows 窗体上排列控件

本文内容

创建项目
水平和垂直排列控件
更改流方向
插入流中断
使用停靠和锚定来定位控件
使用填充和边距排列控件
通过在工具箱中双击来插入控件
通过绘制控件轮廓来插入控件
使用插入条来插入控件
将现有控件重新分配给不同的父控件
后续步骤

某些应用程序要求窗体布局在窗体调整大小或其内容大小更改时能够对窗体自身进行适当地排列。当您需要进行动态布局，但并不希望在代码中显式处理 Layout 事件时，可以考虑使用布局面板。

FlowLayoutPanel 控件和 TableLayoutPanel 控件为在窗体上排列控件提供了两种直观的方式。这两个控件为其中包含的子控件的相对位置提供了自动的、可配置的控制功能，并且都能在运行时提供动态布局特性，因此，在父窗体的尺寸更改时，它们能够调整子控件的大小和位置。可在布局面板内嵌套布局面板，从而实现复杂的用户界面。

TableLayoutPanel 以网格形式排列其内容，所提供的功能类似于 HTML 的 <table> 元素。其单元格按行和列的方式排列，各行各列的尺寸可以不同。

FlowLayoutPanel 按特定的流方向排列其内容：水平或垂直。其内容可从一行换到下一行，或者从一列换到下一列。另一种情况是不换行，而是将其内容截掉。本文涉及以下任务：

创建 Windows 窗体项目
水平和垂直排列控件
更改流方向
插入流中断
使用填充和边距排列控件
通过在工具箱中双击来插入控件
通过绘制控件轮廓来插入控件
使用插入符号插入控件
将现有控件重新分配给不同的父控件

完成本演练后，您将理解这些重要布局功能所起的作用。

提示

显示的对话框和菜单命令可能会与“帮助”中的描述不同，具体取决于您现用的设置或版本。若要更改设置，请在“工具”菜单上选择“导入和导出设置”。

1、创建项目

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

创建项目

创建名为“FlowLayoutPanelExample”的基于 Windows 的应用程序项目。
在**“窗体设计器”**中选择窗体。

2、水平和垂直排列控件

通过 FlowLayoutPanel 控件可沿行或列放置控件，无需明确指定每个控件的位置。

在父窗体的尺寸发生改变时，FlowLayoutPanel 控件可以调整其子控件的大小和流动。

使用 FlowLayoutPanel 水平或垂直排列控件

从**“工具箱”**中将一个 FlowLayoutPanel 控件拖到窗体上。
从**“工具箱”**中将一个 Button 控件拖到 FlowLayoutPanel 中。注意，该控件被自动移到 FlowLayoutPanel 控件的左上角。
从**“工具箱”**中将另一个 Button 控件拖到 FlowLayoutPanel 中。注意，Button 控件被自动移到第一个 Button 控件旁边的位置。如果 FlowLayoutPanel 过窄，同一行无法容纳两个控件，则新的 Button 控件会被自动移到下一行。
再从**“工具箱”**中拖几个 Button 控件到 FlowLayoutPanel 中。继续放置 Button 控件，直到有控件被换到下一行。
将 FlowLayoutPanel 控件的 WrapContents 属性值更改为 false。注意，子控件不再流到下一行，而是被移到第一行并被截掉。
将 FlowLayoutPanel 控件的 WrapContents 属性值更改为 true。注意，子控件再次换到下一行。
减小 FlowLayoutPanel 控件的宽度，直到所有 Button 控件都移动到第一列。
增加 FlowLayoutPanel 控件的宽度，直到所有 Button 控件都移动到第一行。您可能需要调整窗体大小以提供更大的宽度。

3、更改流方向

通过 FlowDirection 属性可更改控件排列的方向。可以从左到右、从右到左、自上而下或自下而上来排列控件。

更改 FlowLayoutPanel 中的流方向

将 FlowLayoutPanel 控件的 FlowDirection 属性值更改为 TopDown。注意，子控件会被重新排列成一列或多列，具体依控件的高度而定。
调整 FlowLayoutPanel 的大小，使其高度小于 Button 控件的列。注意，FlowLayoutPanel 会重新排列子控件以使其流入下一列。继续减小高度，注意子控件流入后续列中。将 FlowLayoutPanel 控件的 FlowDirection 属性值更改为 RightToLeft。注意，子控件的位置颠倒过来。将 FlowDirection 属性的值更改为 BottomUp 后，请注意观察布局。

4、插入流中断

FlowLayoutPanel 控件为其子控件提供了 FlowBreak 属性。如果将 FlowBreak 属性的值设置为 true，则 FlowLayoutPanel 控件将停止沿当前流方向排列控件，并换到下一行或下一列。

插入流中断

将 FlowLayoutPanel 控件的 FlowDirection 属性值更改为 TopDown。
从最左边的列的中间选择一个 Button 控件。
将 Button 控件的 FlowBreak 属性值设置为 true。注意，该列中断并且选定的 Button 控件之后的控件均流入下一列。将 Button 控件的 FlowBreak 属性值设置为 false 以返回原始行为。

5、使用停靠和锚定来定位控件

子控件的停靠和锚定行为不同于其他容器控件中的行为。停靠和锚定都是相对于流方向上的最大控件而言的。

使用停靠和锚定来定位控件

增加 FlowLayoutPanel 的大小，直到 Button 控件全部被排在一列中。
选择顶部的 Button 控件。增加其宽度，使其宽度相当于其他 Button 控件的两倍。
选择第二个 Button 控件。将其 Anchor 属性值更改为 Right。注意，该控件发生了移动，使得其右边界与第一个 Button 控件的右边界对齐了。
将其 Anchor 属性值更改为 Right 和 Left。注意，该控件的大小发生了变化，变得与第一个 Button 控件一样宽了。
选择第三个 Button 控件。将其 Dock 属性值更改为 Fill。注意，该控件的大小发生了变化，变得与第一个 Button 控件一样宽了。

6、使用填充和边距排列控件

还可通过更改 Padding 和 Margin 属性来排列 FlowLayoutPanel 控件中的控件。

通过 Padding 属性可控制如何在 FlowLayoutPanel 控件的单元格内放置控件。该属性指定子控件与 FlowLayoutPanel 控件的边界之间的距离。

通过 Margin 属性可控制控件之间的距离。

使用填充和边距属性排列控件

将 FlowLayoutPanel 控件的 Dock 属性值更改为 Fill。如果窗体足够大，Button 控件将被移动到 FlowLayoutPanel 控件的第一列。
更改 FlowLayoutPanel 控件的 Padding 属性值，方法是在**“属性”**窗口中展开 Padding 项，将 All 属性设置为 20。注意，子控件被移向 FlowLayoutPanel 控件的中心。增加 Padding 属性的值会将子控件推离 FlowLayoutPanel 控件的边界。
选择 FlowLayoutPanel 中的所有 Button 控件，然后将 Margin 属性的值设置 20。注意，Button 控件之间的距离增大了，这使它们分得更开。若要看到所有子控件，可能需要将 FlowLayoutPanel 控件调得更大。

7、通过在工具箱中双击来插入控件

双击**“工具箱”**中的控件可以填充 FlowLayoutPanel 控件。

通过双击工具箱中的控件来插入控件

在**“工具箱”**中双击 Button 控件图标。注意，FlowLayoutPanel 控件中出现了一个新的 Button 控件。
在**“工具箱”**中双击更多控件。注意，新的控件相继出现在 FlowLayoutPanel 控件中。

8、通过绘制控件轮廓来插入控件

可通过在单元格中绘制控件的轮廓向 FlowLayoutPanel 控件中插入控件并指定其大小。

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

在**“工具箱”**中单击 Button 控件图标。不要将其拖动到窗体上。
将鼠标指针放在 FlowLayoutPanel 控件上。注意在附加 Button 控件图标后指针更改为十字线。
单击并按住鼠标按钮。
拖动鼠标指针绘制 Button 控件的轮廓。对大小感到满意后松开鼠标按钮。注意，在与 FlowLayoutPanel 控件相邻的空闲位置处创建了一个 Button 控件。

9、使用插入条来插入控件

可将控件插入到 FlowLayoutPanel 控件中的特定位置。将某个控件拖到 FlowLayoutPanel 控件的工作区以后，会出现一个插入条，指示将要插入该控件的位置。

使用插入符来插入控件

从**“工具箱”**中将一个 Button 控件拖动到 FlowLayoutPanel 控件中并指向两个 Button 控件之间的空间。注意，出现了插入条，指示 Button 被放入 FlowLayoutPanel 控件时将置于何处。在将新的 Button 控件放入 FlowLayoutPanel 控件前，请来回移动鼠标指针，以便观察插入条是如何移动的。
将新的 Button 控件放入 FlowLayoutPanel 控件。注意，新的 Button 控件未与其他控件对齐，因为该控件的 Margin 属性具有不同的值。