演练:使用 Padding、Margins 和 AutoSize 属性对 Windows 窗体控件进行布局

更新:2007 年 11 月

对许多应用程序而言,在窗体上精确地放置控件是一项需要优先考虑的任务。“Windows 窗体设计器”提供了很多用于完成此任务的工具。其中最重要的三个为 MarginPaddingAutoSize 属性,所有 Windows 窗体控件都具有这三个属性。

Margin 属性定义控件周围的空白,以使其他控件与该控件的边界保持指定的距离。

Padding 属性定义控件内部的空白,使控件中的内容(例如它的 Text 属性的值)与控件的边界保持指定的距离。

下面的图解演示了控件的 PaddingMargin 属性。

Windows 窗体控件的填充和边距

AutoSize 属性让控件自动调整大小以适合其内容。它不会将自身大小调整到小于其原始 Size 属性的值,它将体现其 Padding 属性的值。

本演练涉及以下任务:

  • 创建 Windows 窗体项目

  • 设置控件的边距

  • 设置控件的填充

  • 自动调整控件大小

完成本演练后,您将对这些重要的布局功能所扮演的角色有所了解。

说明:

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

先决条件

若要完成本演练,您需要:

  • 足够的权限,以便能够在安装 Visual Studio 的计算机上创建和运行 Windows 窗体应用程序项目。

创建项目

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

创建项目

  1. 创建一个名为 LayoutExample 的“Windows 应用程序”项目。有关更多信息,请参见 如何:创建 Windows 应用程序项目

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

设置控件的边距

可使用 Margin 属性设置控件之间的默认距离。当移动一个控件使之足够靠近另一控件时,您将看到一条显示两个控件边距的对齐线。所移动的控件也将在边距所定义的距离处对齐。

使用 Margin 属性排列窗体上的控件

  1. 从“工具箱”中将两个 Button 控件拖到窗体上。

  2. 选择一个 Button 控件,然后将其移近另一个,直到两个控件几乎接触。

    观察两者之间的对齐线。此距离是两个控件的 Margin 值之和。您所移动的控件在此距离处对齐。有关详细信息,请参见 演练:使用对齐线在 Windows 窗体上排列控件

  3. 通过展开“属性”窗口中的 Margin 项并将 All 属性设置为 20 来更改其中一个控件的 Margin 属性。

  4. 选择 Button 控件之一并将其移近另一个。

    定义边距值之和的对齐线变长,该控件对齐时与另一控件之间的距离变大。

  5. 通过展开“属性”窗口中的 Margin 项并将 Top 属性设置为 5 来更改选定控件的 Margin 属性。

  6. 将选定控件移动到另一控件之下,可观察到对齐线变短。将选定控件移动到另一控件的左侧,可观察到对齐线保持为第 4 步中所观察的值。

  7. 可将 Margin 属性、LeftTopRightBottom 的每一方面设置为不同的值,也可通过 All 属性将其全部设置为相同的值。

设置控件的填充

为了达到应用程序所要求的精确布局,控件中通常要包含子控件。若要指定子控件边界与父控件边界之间的接近程度,可结合使用父控件的 Padding 属性和子控件的 Margin 属性。Padding 属性也可用于控制控件的内容(如 Button 控件的 Text 属性)与该控件边界的接近程度。

使用填充排列窗体上的控件

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

  2. Button 控件的 AutoSize 属性值更改为 true。

  3. 通过展开“属性”窗口中的 Padding 项并将 All 属性设置为 5 来更改 Padding 属性。

    控件将扩大以便为新的填充提供空间。

  4. 从“工具箱”中将一个 GroupBox 控件拖到窗体上。从“工具箱”中将一个 Button 控件拖到 GroupBox 控件中。定位 Button 控件,使之与 GroupBox 控件的右下角齐平。

    观察在 Button 控件接近 GroupBox 控件的右边界和底部边界时出现的对齐线。这些对齐线对应于 ButtonMargin 属性。

  5. 通过展开“属性”窗口中的 Padding 项并将 All 属性设置为 20 来更改 GroupBox 控件的 Padding 属性。

  6. 选择 GroupBox 控件内的 Button 控件,并将其移向 GroupBox 的中心。

    对齐线出现在了距 GroupBox 控件边界更远的地方。该距离是 Button 控件的 Margin 属性与 GroupBox 控件的 Padding 属性之和。

自动调整控件大小

在一些应用程序中,控件的大小在运行时与设计时不同。例如,Button 控件的文本可能来自数据库,不能预先知道其长度。

AutoSize 属性设置为 true 时,控件将自行调整大小以适合其内容。有关更多信息,请参见 AutoSize 属性概述

使用 AutoSize 属性排列窗体上的控件

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

  2. Button 控件的 AutoSize 属性值更改为 true。

  3. Button 控件的 Text 属性更改为“此按钮的‘Text’属性是一个长字符串”。

    提交更改后,Button 控件会自行调整大小以适合新的文本。

  4. 从“工具箱”中将另一个 Button 控件拖到窗体上。

  5. Button 控件的 Text 属性更改为“此按钮的‘Text’属性是一个长字符串”。

    提交更改后,Button 控件不会自行调整大小,文本会在控件的右边界处截断。

  6. 通过展开“属性”窗口中的 Padding 项并将 All 属性设置为 5 来更改 Padding 属性。

    控件内部的文本在四面都被截断。

  7. Button 控件的 AutoSize 属性更改为 true。

    Button 控件将自行调整以容纳整个字符串。另外,文本周围还加上了填充,使得 Button 控件在四个方向都进行了扩展。

  8. 从“工具箱”中将一个 Button 控件拖到窗体上。将其定位在窗体的右下角。

  9. Button 控件的 AutoSize 属性值更改为 true。

  10. Button 控件的 Anchor 属性设置为 RightBottom

  11. Button 控件的 Text 属性更改为“此按钮的‘Text’属性是一个长字符串”。

    提交更改后,Button 控件会向左方自行调整大小。通常,自动大小调整功能会使控件的大小在与其 Anchor 属性设置相反的方向上增加。

AutoSize 和 AutoSizeMode 属性

一些控件支持 AutoSizeMode 属性,利用该属性可以对控件的自动调整大小行为进行更精细的控制。

使用 AutoSizeMode 属性

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

  2. Panel 控件的 AutoSize 属性值设置为 true。

  3. 从“工具箱”中将一个 Button 控件拖到 Panel 控件中。

  4. Button 控件置于靠近 Panel 控件右下角的地方。

  5. 选择 Panel 控件并抓住右下角大小调整手柄。将 Panel 控件调大和调小。

    说明:

    可自由调整 Panel 控件的大小,但无法将其调到小于 Button 控件右下角的位置。此行为由 AutoSizeMode 属性的默认值 GrowOnly 指定。

  6. Panel 控件的 AutoSizeMode 属性值设置为 GrowAndShrink

    Panel 控件会自行调整大小以包围 Button 控件。不能调整 Panel 控件的大小。

  7. Button 控件拖向 Panel 控件的左上角。

    Panel 控件的大小会调整为 Button 控件的新位置。

后续步骤

可用于在 Windows 窗体应用程序中排列控件的布局功能还有许多。您可以尝试使用下面的这些组合:

请参见

任务

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

演练:使用 FlowLayoutPanel 在 Windows 窗体上排列控件

演练:使用对齐线在 Windows 窗体上排列控件

概念

AutoSize 属性概述

参考

AutoSize

DockPadding

Margin

Padding