Walkthrough: Laying Out Windows Forms Controls with Padding, Margins, and the AutoSize Property

Article
02/04/2013

Precise placement of controls on your form is a high priority for many applications. The Windows Forms Designer gives you many layout tools to accomplish this. Three of the most important are the Margin, Padding, and AutoSize properties, which are present on all Windows Forms controls.

The Margin property defines the space around the control that keeps other controls a specified distance from the control's borders.

The Padding property defines the space in the interior of a control that keeps the control's content (for example, the value of its Text property) a specified distance from the control's borders.

The following illustration shows the Padding and Margin properties on a control.

Padding And Margin for Windows Forms Controls

The AutoSize property tells a control to automatically size itself to its contents. It will not resize itself to be smaller than the value of its original Size property, and it will account for the value of its Padding property.

Tasks illustrated in this walkthrough include:

Creating a Windows Forms project
Setting Margins for Your Controls
Setting Padding for Your Controls
Automatically Sizing Your Controls

When you are finished, you will have an understanding of the role played by these important layout features.

Note

The dialog boxes and menu commands you see might differ from those described in Help depending on your active settings or edition. To change your settings, choose Import and Export Settings on the Tools menu. For more information, see Working with Settings.

Prerequisites

In order to complete this walkthrough, you will need:

Sufficient permissions to be able to create and run Windows Forms application projects on the computer where Visual Studio is installed.

Creating the Project

The first step is to create the project and set up the form.

To create the project

Create a Windows Application project called LayoutExample. For more information, see How to: Create a New Windows Forms Application Project .
Select the form in the Windows Forms Designer.

Setting Margins for Your Controls

You can set the default distance between your controls using the Margin property. When you move a control close enough to another control, you will see a snapline that shows the margins for the two controls. The control you are moving will also snap to the distance defined by the margins.

To arrange controls on your form using the Margin property

Drag two Button controls from the Toolbox onto your form.
Select one of the Button controls and move it close to the other, until they are almost touching.

Observe the snapline that appears between them. This distance is the sum of the two controls' Margin values. The control you are moving snaps to this distance. For details, see Walkthrough: Arranging Controls on Windows Forms Using Snaplines.
Change the Margin property of one of the controls by expanding the Margin entry in the Properties window and setting the All property to 20.
Select one of the Button controls and move it close to the other.

The snapline defining the sum of the margin values is longer and that the control snaps to a greater distance from the other control.
Change the Margin property of the selected control by expanding the Margin entry in the Properties window and setting the Top property to 5.
Move the selected control below the other control and observe that the snapline is shorter. Move the selected control to the left of the other control and observe that the snapline retains the value observed in step 4.
You can set each of the aspects of the Margin property, Left, Top, Right, Bottom, to different values, or you can set them all to the same value with the All property.

Setting Padding for Your Controls

To achieve the precise layout required for your application, your controls will often contain child controls. When you want to specify the proximity of the child control's border to the parent control's border, use the parent control's Padding property in conjunction with the child control's Margin property. The Padding property is also used to control the proximity of a control's content (for example, a Button control's Text property) to its borders.

To arrange controls on your form using padding

Drag a Button control from the Toolbox onto your form.
Change the value of the Button control's AutoSize property to true.
Change the Padding property by expanding the Padding entry in the Properties window and setting the All property to 5.

The control expands to provide room for the new padding.
Drag a GroupBox control from the Toolbox onto your form. Drag a Button control from the Toolbox into the GroupBox control. Position the Button control so it is flush with the lower-right corner of the GroupBox control.

Observe the snaplines that appear as the Button control approaches the bottom and right borders of the GroupBox control. These snaplines correspond to the Margin property of the Button.
Change the GroupBox control's Padding property by expanding the Padding entry in the Properties window and setting the All property to 20.
Select the Button control within the GroupBox control and move it toward the center of the GroupBox.

The snaplines appear at a greater distance from the borders of the GroupBox control. This distance is the sum of the Button control's Margin property and the GroupBox control's Padding property.

Automatically Sizing Your Controls

In some applications, the size of a control will not be the same at run time as it was at design time. The text of a Button control, for example, may be taken from a database, and its length will not be known in advance.

When the AutoSize property is set to true, the control will size itself to its content. For more information, see AutoSize Property Overview.

To arrange controls on your form using the AutoSize property

Drag a Button control from the Toolbox onto your form.
Change the value of the Button control's AutoSize property to true.
Change the Button control's Text property to "This button has a long string for its Text property."

When you commit the change, the Button control resizes itself to fit the new text.
Drag another Button control from the Toolbox onto your form.
Change the Button control's Text property to "This button has a long string for its Text property."

When you commit the change, the Button control does not resize itself, and the text is clipped by the right edge of the control.
Change the Padding property by expanding the Padding entry in the Properties window and setting the All property to 5.

The text in the control's interior is clipped on all four sides.
Change the Button control's AutoSize property to true.

The Button control resizes itself to encompass the entire string. Also, padding has been added around the text, causing the Button control to expand in all four directions.
Drag a Button control from the Toolbox onto your form. Position it near the lower-right corner of the form.
Change the value of the Button control's AutoSize property to true.
Set the Button control's Anchor property to Right, Bottom.
Change the Button control's Text property to "This button has a long string for its Text property."

When you commit the change, the Button control resizes itself toward the left. In general, automatic sizing will increase the size of a control in the direction opposite its Anchor property setting.

AutoSize and AutoSizeMode Properties

Some controls support the AutoSizeMode property, which gives you more fine-grained control over the automatic sizing behavior of a control.

To use the AutoSizeMode property

Drag a Panel control from the Toolbox onto your form.
Set the value of the Panel control's AutoSize property to true.
Drag a Button control from the Toolbox into the Panel control.
Place the Button control near the lower-right corner of the Panel control.
Select the Panel control and grab the lower-right sizing handle. Resize the Panel control to be larger and smaller.

Note

You can freely resize the Panel control, but you cannot size it smaller than the position of the Button control's lower-right corner. This behavior is specified by the default value of the AutoSizeMode property, which is GrowOnly.
Set the value of the Panel control's AutoSizeMode property to GrowAndShrink.

The Panel control sizes itself to surround the Button control. You cannot resize the Panel control.
Drag the Button control toward the upper-left corner of the Panel control.

The Panel control resizes to the Button control's new position.

Next Steps

There are many other layout features for arranging controls in your Windows Forms applications. Here are some combinations you might try:

Build a form using a TableLayoutPanel control. For details, see Walkthrough: Arranging Controls on Windows Forms Using a TableLayoutPanel. Try changing the values of the TableLayoutPanel control's Padding property, as well as the Margin property on its child controls.
Try the same experiment using a FlowLayoutPanel control. For details, see Walkthrough: Arranging Controls on Windows Forms Using a FlowLayoutPanel.
Experiment with docking child controls in a Panel control. The Padding property is a more general realization of the DockPadding property, and you can satisfy yourself that this is the case by putting a child control in a Panel control and setting the child control's Dock property to Fill. Set the Panel control's Padding property to various values and note the effect.

Share via