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

本文内容

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

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

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

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

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

• 创建 Windows 窗体项目

• 水平和垂直排列控件

• 更改流方向

• 插入流中断

• 使用填充和边距排列控件

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

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

• 使用插入符号插入控件

• 将现有控件重新分配给不同的父控件

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

?提示

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

1、创建项目

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

创建项目

1. 创建名为“FlowLayoutPanelExample”的基于 Windows 的应用程序项目。?

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

2、水平和垂直排列控件

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

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

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

1. 从**“工具箱”**中将一个?FlowLayoutPanel?控件拖到窗体上。

2. 从**“工具箱”**中将一个?Button?控件拖到?FlowLayoutPanel?中。 注意，该控件被自动移到?FlowLayoutPanel?控件的左上角。

3. 从**“工具箱”**中将另一个?Button?控件拖到?FlowLayoutPanel?中。 注意，Button?控件被自动移到第一个?Button?控件旁边的位置。 如果?FlowLayoutPanel?过窄，同一行无法容纳两个控件，则新的?Button?控件会被自动移到下一行。

4. 再从**“工具箱”**中拖几个?Button?控件到?FlowLayoutPanel?中。 继续放置?Button?控件，直到有控件被换到下一行。

5. 将?FlowLayoutPanel?控件的?WrapContents?属性值更改为 false。 注意，子控件不再流到下一行， 而是被移到第一行并被截掉。

6. 将?FlowLayoutPanel?控件的?WrapContents?属性值更改为 true。 注意，子控件再次换到下一行。

7. 减小?FlowLayoutPanel?控件的宽度，直到所有?Button?控件都移动到第一列。

8. 增加?FlowLayoutPanel?控件的宽度，直到所有?Button?控件都移动到第一行。 您可能需要调整窗体大小以提供更大的宽度。

3、更改流方向

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

更改 FlowLayoutPanel 中的流方向

1. 将?FlowLayoutPanel?控件的?FlowDirection?属性值更改为?TopDown。 注意，子控件会被重新排列成一列或多列，具体依控件的高度而定。

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

4、插入流中断

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

插入流中断

1. 将?FlowLayoutPanel?控件的?FlowDirection?属性值更改为?TopDown。

2. 从最左边的列的中间选择一个?Button?控件。

3. 将?Button?控件的 FlowBreak 属性值设置为 true。 注意，该列中断并且选定的?Button?控件之后的控件均流入下一列。 将?Button?控件的 FlowBreak 属性值设置为 false 以返回原始行为。

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

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

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

1. 增加?FlowLayoutPanel?的大小，直到?Button?控件全部被排在一列中。

2. 选择顶部的?Button?控件。 增加其宽度，使其宽度相当于其他?Button?控件的两倍。

3. 选择第二个?Button?控件。 将其?Anchor?属性值更改为?Right。 注意，该控件发生了移动，使得其右边界与第一个?Button?控件的右边界对齐了。

4. 将其?Anchor?属性值更改为?Right?和?Left。 注意，该控件的大小发生了变化，变得与第一个?Button?控件一样宽了。

5. 选择第三个?Button?控件。 将其?Dock?属性值更改为?Fill。 注意，该控件的大小发生了变化，变得与第一个?Button?控件一样宽了。

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

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

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

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

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

1. 将?FlowLayoutPanel?控件的?Dock?属性值更改为?Fill。 如果窗体足够大，Button?控件将被移动到?FlowLayoutPanel?控件的第一列。

2. 更改?FlowLayoutPanel?控件的?Padding?属性值，方法是在**“属性”**窗口中展开?Padding?项，将?All?属性设置为 20。 注意，子控件被移向?FlowLayoutPanel?控件的中心。 增加?Padding?属性的值会将子控件推离?FlowLayoutPanel?控件的边界。

3. 选择?FlowLayoutPanel?中的所有?Button?控件，然后将?Margin?属性的值设置 20。 注意，Button?控件之间的距离增大了，这使它们分得更开。 若要看到所有子控件，可能需要将?FlowLayoutPanel?控件调得更大。

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

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

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

1. 在**“工具箱”**中双击?Button?控件图标。 注意，FlowLayoutPanel?控件中出现了一个新的?Button?控件。

2. 在**“工具箱”**中双击更多控件。 注意，新的控件相继出现在?FlowLayoutPanel?控件中。

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

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

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

1. 在**“工具箱”**中单击?Button?控件图标。 不要将其拖动到窗体上。

2. 将鼠标指针放在?FlowLayoutPanel?控件上。 注意在附加?Button?控件图标后指针更改为十字线。

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

4. 拖动鼠标指针绘制?Button?控件的轮廓。 对大小感到满意后松开鼠标按钮。 注意，在与?FlowLayoutPanel?控件相邻的空闲位置处创建了一个?Button?控件。

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

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

使用插入符来插入控件

1. 从**“工具箱”**中将一个?Button?控件拖动到?FlowLayoutPanel?控件中并指向两个?Button?控件之间的空间。 注意，出现了插入条，指示?Button?被放入?FlowLayoutPanel?控件时将置于何处。 在将新的?Button?控件放入?FlowLayoutPanel?控件前，请来回移动鼠标指针，以便观察插入条是如何移动的。

2. 将新的?Button?控件放入?FlowLayoutPanel?控件。 注意，新的?Button?控件未与其他控件对齐，因为该控件的?Margin?属性具有不同的值。

10、将现有控件重新分配给不同的父控件

可将窗体上现有的控件分配给新的?FlowLayoutPanel?控件。

重定现有控件的父项

1. 从**“工具箱”**中将三个?Button?控件拖到窗体上。 使控件彼此靠近但不要对齐。

2. 在**“工具箱”**中单击?FlowLayoutPanel?控件图标。 不要将其拖动到窗体上。

3. 移动鼠标指针使之靠近三个?Button?控件。 注意，在附加?FlowLayoutPanel?控件图标后，鼠标指针变成了对十字线。

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

5. 拖动鼠标指针以绘制?FlowLayoutPanel?控件的轮廓。 围绕三个?Button?控件绘制轮廓。

6. 释放鼠标按钮。 注意，这三个?Button?控件被插入?FlowLayoutPanel?控件中。

11、后续步骤

可以使用布局面板和控件的组合来实现复杂布局。 建议研究的方面包括：

• 将?Button?控件之一调到更大并注意这一调整对布局的影响。

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

• 将?FlowLayoutPanel?控件停靠到父窗体。 调整窗体大小并注意这对布局的影响。

• 将其中一个控件的?Visible?属性设置为 false，并注意?FlowLayoutPanel?如何对流进行相应的调整。