Walkthrough: Laying Out Windows Forms Controls with Padding, Margins, and the AutoSize Property
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 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.
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 Customizing Development Settings in Visual Studio.
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.
The first step is to create the project and set up the form.
Create a Windows Application project called
LayoutExample. For more information, see How to: Create a Windows Application Project .
Select the form in the Windows Forms Designer.
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.
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.
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.
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.
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.
Drag a Button control from the Toolbox onto your form.
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.
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.
Drag a Button control from the Toolbox onto your form.
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.
When you commit the change, the Button control does not resize itself, and the text is clipped by the right edge of the control.
The text in the control's interior is clipped on all four sides.
Drag a Button control from the Toolbox onto your form. Position it near the lower-right corner of the form.
Some controls support the
AutoSizeMode property, which gives you more fine-grained control over the automatic sizing behavior of a control.
Drag a Panel control from the Toolbox onto your form.
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
AutoSizeModeproperty, which is GrowOnly.
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.
AutoSize Property Overview
Walkthrough: Arranging Controls on Windows Forms Using a TableLayoutPanel
Walkthrough: Arranging Controls on Windows Forms Using a FlowLayoutPanel
Walkthrough: Arranging Controls on Windows Forms Using Snaplines