【WinForm.NET开发】使用 Padding、Margin 和 AutoSize 属性布置控件

本文内容

1. 创建项目
2. 设置控件的边距
3. 设置控件的填充
4. 自动调整控件大小
5. AutoSize 和 AutoSizeMode 属性
6. 后续步骤

在窗体上精确地放置控件对于许多应用程序而言是高优先级。 Visual Studio 中的 Windows 窗体设计器提供了许多布局工具来实现此目的。 其中三个最重要的是?Margin、Padding?和?AutoSize?属性，它们出现在所有 Windows 窗体控件上。

Margin?属性定义控件周围的空间，该空间使其他控件与该控件的边框保持指定的距离。

Padding?属性定义控件内部的空间，该空间使控件的内容（例如，其?Text?属性的值）与该控件的边框保持指定的距离。

下图显示控件上的?Padding?和?Margin?属性。

AutoSize?属性告知控件自动调整其内容的大小。 它本身的大小不会小于其原始?Size?属性的值，并且将考虑其?Padding?属性的值。

1、创建项目

1. 在 Visual Studio 中，创建一个名为?LayoutExample?的 Windows 应用程序项目。

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

2、设置控件的边距

可以使用属性?Margin?设置控件之间的默认距离。 将控件移动到足够接近另一个控件时，将看到一个显示两个控件边距的对齐线。 要移动的控件还将对齐到边距定义的距离。

使用 Margin 属性在窗格上排列控件

1. 将两个?Button?控件从工具箱拖到你的窗体上。

2. 选择其中一个?Button?控件并将其靠近另一个控件，直到它们几乎接触。

   观察它们之间的对齐线。 此距离是两个控件的?Margin?值之和。 正在移动的控件将对齐到该距离。?

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

4. 选择其中一个?Button?控件并将其移动到靠近另一个控件。

   定义边距值总和的对齐线更长，并且该控件对齐到与另一个控件的更远距离。

5. 通过展开“属性”窗口中的?Margin?条目并将?Top?属性设置为 5，更改所选控件的?Margin?属性。

6. 将所选控件移到其他控件下方，并观察对齐线是否较短。 将所选控件移动到另一个控件的左侧，并观察对齐线是否保留了在步骤 4 中观察到的值。

7. 可以将?Margin?属性、Left、Top、Right、Bottom?的每个方面设置为不同的值，也可以使用?All?属性将它们全部设置为相同的值。

3、设置控件的填充

为了实现应用程序所需的精确布局，控件通常包含子控件。 如果要指定子控件的边框与父控件的边框的邻近度，请结合使用父控件的?Padding?属性和子控件的?Margin?属性。?Padding?属性还用于控制控件内容到其边框的邻近度，例如?Button?控件的?Text?属性。

使用 Padding 属性在窗格上排列控件

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

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

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

   控件扩展，为新填充提供空间。

4. 从?GroupBox?“工具箱”?将?控件拖到你的窗体上。 将?Button?控件从工具箱拖入?GroupBox?控件。 定位?Button?控件，使其与?GroupBox?控件的右下角齐平。

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

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

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

   对齐线出现在距?GroupBox?控件的边界更远的地方。 此距离是?Button?控件的?Margin?属性和?GroupBox?控件的?Padding?属性的总和。

4、自动调整控件大小

在某些应用程序中，控件的大小在运行时与设计时不同。 例如，Button?控件的文本可能取自数据库，并且其长度是事先不知道的。

当?AutoSize?属性设置为?true?时，控件将根据其内容调整自身大小。?

使用 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?属性设置为?Right、Bottom。

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

提交更改时，Button?控件会向左调整自身大小。 通常，自动调整大小会在与其?Anchor?属性设置相反的方向上增加控件的大小。

5、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?控件的新位置。

6、后续步骤

在 Windows 窗体应用程序中排列控件时，还有其他许多布局功能。 以下是可以尝试的一些组合：

• 使用?TableLayoutPanel?控件生成窗体。 尝试更改?TableLayoutPanel?控件的?Padding?属性及其子控件的?Margin?属性的值。

• 使用?FlowLayoutPanel?控件尝试相同的实验。?

• 尝试在?Panel?控件中停靠子控件。?Padding?属性是?DockPadding?属性的更一般的实现，你可以通过将子控件放入?Panel?控件并将子控件的?Dock?属性设置为?Fill。 将?Panel?控件的?Padding?属性设置为各种值并记下效果。