【转】演练：使用 FlowLayoutPanel 在 Windows 窗体上排列控件

2010-08-05 16:32 刺客之家阅读(5079) 评论(1) 编辑收藏举报

一些应用程序需要一个布局可随窗体大小的调整或其中内容大小的改变而自动进行适当排列的窗体。在需要动态布局并且不希望在代码中显式处理 Layout 事件时，可考虑使用布局面板。

FlowLayoutPanel 控件和 TableLayoutPanel 控件提供了在窗体上排列控件的直观方式。这两个控件都具有控制其内部子控件相对位置的可配置自动功能，都可在运行时提供动态布局功能，因此，当父窗体的尺寸发生变化时，这两个控件便可以对其子控件的大小和位置进行调整。可在布局面板内嵌套布局面板，从而实现复杂的用户界面。

TableLayoutPanel 以网格形式排列其内容，所提供的功能类似于 HTML 的 <table> 元素。其单元格按行和列排列，并且各单元格可具有不同的大小。有关更多信息，请参见演练：使用 TableLayoutPanel 在 Windows 窗体上排列控件。

FlowLayoutPanel 按特定的流方向排列其内容：水平或垂直。其内容可从一行换到下一行，或者从一列换到下一列。另一种情况是不换行，而是将其内容截掉。本演练中阐释的任务包括：

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

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

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

创建项目

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

创建项目

创建名为“FlowLayoutPanelExample”的基于 Windows 的应用程序项目。有关更多信息，请参见如何：创建 Windows 应用程序项目。
在“窗体设计器”中选择窗体。

水平和垂直排列控件

通过 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 控件都移动到第一行。您可能需要调整窗体大小以提供更大的宽度。

更改流方向

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

更改 FlowLayoutPanel 中的流方向

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

插入流中断

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

插入流中断

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

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

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

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

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

使用填充和边距排列控件

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

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

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

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

将 FlowLayoutPanel 控件的 Dock 属性值更改为 Fill。如果窗体足够大，Button 控件将被移动到 FlowLayoutPanel 控件的第一列。
展开“属性”窗口中的 Padding 项，然后将 All 属性设置为 20，从而更改 FlowLayoutPanel 控件的 Padding 属性的值。有关更多信息，请参见演练：使用 Padding、Margins 和 AutoSize 属性对 Windows 窗体控件进行布局。注意，子控件被移向 FlowLayoutPanel 控件的中心。增加 Padding 属性的值会将子控件推离 FlowLayoutPanel 控件的边界。
选择 FlowLayoutPanel 中的所有 Button 控件，然后将 Margin 属性的值设置为 20。注意，Button 控件之间的距离增大了，这使它们分得更开。若要看到所有子控件，可能需要将 FlowLayoutPanel 控件调得更大。

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

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

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

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

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

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

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

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

使用插入条来插入控件

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

使用插入符来插入控件

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

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

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

重定现有控件的父项

从“工具箱”中将三个 Button 控件拖到窗体上。使控件彼此靠近但不要对齐。
在“工具箱”中单击 FlowLayoutPanel 控件图标。不要将其拖动到窗体上。
移动鼠标指针使之靠近三个 Button 控件。注意，在附加 FlowLayoutPanel 控件图标后，鼠标指针变成了对十字线。
单击并按住鼠标按钮。
拖动鼠标指针以绘制 FlowLayoutPanel 控件的轮廓。围绕三个 Button 控件绘制轮廓。
释放鼠标按钮。注意，这三个 Button 控件被插入 FlowLayoutPanel 控件中。

后续步骤

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

将 Button 控件之一调到更大并注意这一调整对布局的影响。
布局面板中可包含其他布局面板。试验将 TableLayoutPanel 控件放入现有控件中。
将 FlowLayoutPanel 控件停靠到父窗体。调整窗体大小并注意这一调整对布局的影响。
将其中一个控件的 Visible 属性设置为 false，并注意 FlowLayoutPanel 如何对流进行相应的调整。

请参见

刷新页面返回顶部

~..淡泊以明志.~.宁静以致远