Visual Studio 2010 : Building Smart Client User Interfaces - Laying Out Your Controls

1. Grouping controls

The Visual Studio toolbox has a group of container controls. Use container controls whenever you need to

• Easily manipulate groups of controls in the Windows Forms Designer

• Create visible groupings of controls

• Make it easier to resize a form

The container controls are shown in this list:

• FlowLayoutPanel: Arranges controls in a horizontal or vertical flow

• GroupBox: Creates a visible grouping of controls with a caption

• Panel: Creates a scrollable grouping of controls

• SplitContainer: Arranges controls on two separate panels separated by a movable bar

• TabControl: Arranges controls on multiple tabs or pages, similar to a file folder

• TableLayoutPanel: Arranges controls in a tabular grid

You can position container controls inside other controls. The FlowLayoutPanel and TableLayoutPanel controls can dynamically reposition the child controls placed inside them when the Windows Form is resized. To see FlowLayoutPanel in action, follow these steps:

Figure 1 shows the form in its default size and again resized. Notice that the controls are stacked in the form on the left because the form is narrow. As the form is resized, the controls move to fill the form.

Figure 1. Resizing the window causes the controls to move.

You have some options for controlling the flow in a FlowLayoutPanel control:

• To force a control to move to the next line: Set the control's FlowBreak property to True.

• To change the direction of the FlowLayoutPanel control: Set the FlowDirection property.

• To set FlowLayoutPanel so that child controls are clipped rather than wrapped to the next line: Set the WrapContents property to False. Figure 2 shows a form that has FlowLayoutPanel with a clipped MonthCalendar control.

Figure 2. Set a property to False to clip controls rather than wrap them.

2. Setting layout properties

You may want to position controls in a way that they stay in place in the face of resizing. You can set many properties for controlling a control's layout:

• Anchor: Specifies an anchor position that the control maintains when the form is resized

• Dock: Positions the control so that one edge of the control is always touching the parent control's edge

• AutoSize: Allows a control to grow or shrink automatically

• Margin: Sets spacing outside a control's borders

• Padding: Adds spacing between a control's borders and its interior contents

The best way to picture these properties in action is to see them at work. The following sections walk you through using these properties.

2.1. Anchoring and docking

Anchoring and docking are two properties you can use to position a control when a form is resized. When you set a control's Anchor and Dock properties, you specify the edges of a form — top, bottom, left, right — to which you want to position your control. The Dock property accepts a Fill value, which forces the control to expand to touch all four sides of a form.

The primary difference between Anchor and Dock is that anchoring allows you to maintain a set distance between the edge of the control and the edge of the form. With docking, the control always maintains constant contact with the form's edge. There's no space between the control and the edge. Figure 3 shows a button that's anchored to the lower-left corner of the form and a status strip that's docked to the bottom.

Figure3. Anchor and Dock properties let you position a control.

To anchor a Submit button to the lower-left corner of a form, follow these steps:

Figure 4. Click the bars to set and clear the anchor positions.

You can use the Anchor property to expand a control as the form expands. To set a text box to grow as the sides of a form expand, follow these steps:

Figure 5 shows the form in its default size and resized. Notice how the text isn't completely displayed in the text box. After the form is resized, the text box expands and maintains equal distance from the left and right sides.

Figure 5. The text box expands as its anchor sides expand.

Setting a control's Dock property is similar to setting the Anchor property. With the Dock property, you specify the edges to which you want to dock the control. The control always maintains contact with the edge you specify. Figure 6 shows a form with a StatusStrip control docked on the bottom of the form. As the form is resized, the StatusStrip control remains at the bottom.

Figure 6. The control remains docked to the form's bottom edge as the form is resized.

2.2. Using automatic sizing

Two properties are related to setting automatic sizing:

• AutoSize: Specifies, by using a True/False value, whether the control should be automatically sized

• AutoSizeMode: Sets a control to GrowAndShrink or GrowOnly

The AutoSizeMode property works only if AutoSize is set to True. Although not all controls have an AutoSizeMode property, it provides more control than AutoSize when it's available. The size of a control grows rightward and downward.

To set the automatic sizing properties for a button, follow these steps:

The AutoSize and AutoSizeMode properties honor the MinimumSize and MaximumSize property settings.

2.3. Setting margins and padding

Margins and padding set the space outside and within a control's borders, respectively. Because a control's border has four sides, the margins and padding properties comprise a set of properties. When you set the margins and padding properties, you can specify values for top, left, right, bottom, or all.

To set a control's margins and padding, follow these steps:

Figure 8. The second button's text is padded in all directions.