Share via

Walkthrough: Arranging Controls on Windows Forms Using Snaplines

  • Article

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. One of the most important is the SnapLine feature.

Snaplines show you precisely where to line up controls with other controls. They also show you the recommended distances for margins between controls, as specified by the Windows User Interface Guidelines. For details, see User Interface Design and Development.

Snaplines make it easy to align your controls, for crisp, professional appearance and behavior (look and feel).

Tasks illustrated in this walkthrough include:

  • Creating a Windows Forms project

  • Spacing and Aligning Controls Using Snaplines

  • Aligning to Form and Container Margins

  • Aligning to Grouped Controls

  • Using Snaplines to Place a Control by Outlining Its Size

  • Using Snaplines When Dragging a Control from the Toolbox

  • Resizing Controls Using Snaplines

  • Aligning a Label to a Control's Text

  • Using Snaplines with Keyboard Navigation

  • Snaplines and Layout Panels

  • Disabling Snaplines

When you are finished, you will have an understanding of the layout role played by the snaplines feature.

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 Visual Studio Settings.

Creating the Project

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

To create the project

  1. Create a Windows-based application project called "SnaplineExample". For details, see How to: Create a Windows Application Project.

  2. Select the form in the Forms Designer.

Spacing and Aligning Controls Using Snaplines

Snaplines give you an accurate and intuitive way to align controls on your form. They appear when you are moving a selected control or controls near a position that would align with another control or set of controls. Your selection will "snap" to the suggested position as you move it past the other controls.

To arrange controls using snaplines

  1. Drag a Button control from the Toolbox onto your form.

  2. Move the Button control to the lower-right corner of the form. Note the snaplines that appear as the Button control approaches the bottom and right borders of the form. These snaplines display the recommended distance between the borders of the control and the form.

  3. Move the Button control around the borders of the form and note where the snaplines appear. When you are finished, move the Button control near the center of the form.

  4. Drag another Button control from the Toolbox onto your form.

  5. Move the second Button control until it is nearly level with the first. Note the snapline that appears at the text baseline of both buttons, and note that the control you are moving snaps to a position that is exactly level with the other control.

  6. Move the second Button control until it is positioned directly above the first. Note the snaplines that appear along the left and right edges of both buttons, and note that the control you are moving snaps to a position that is exactly aligned with the other control.

  7. Select one of the Button controls and move it close to the other, until they are almost touching. Note the snapline that appears between them. This distance is the recommended distance between the borders of the controls. Also note that the control you are moving snaps to this position.

  8. Drag two Panel controls from the Toolbox onto your form.

  9. Move one of the Panel controls until it is nearly level with the first. Note the snaplines that appear along the top and bottom edges of both controls, and note that the control you are moving snaps to a position that is exactly level with the other control.

Aligning to Form and Container Margins

Snaplines help you to align your controls to form and container margins in a consistent manner.

To align controls to form and container margins

  • Select one of the Button controls and move it close to the right border of the form until a snapline appears. The snapline's distance from the right border is the sum of the control's Margin property and the form's Padding property values.

Note

If the form's Padding property is set to 0,0,0,0, the Windows Forms Designer gives the form a shadowed Padding value of 9,9,9,9. To override this behavior, assign a value other than 0,0,0,0.

  1. Change the value of the Button control's Margin property by expanding the Margin entry in the Properties window and setting the All property to 0. For details, see Walkthrough: Laying Out Windows Forms Controls with Padding, Margins, and the AutoSize Property.

  2. Move the Button control close to the right border of the form until a snapline appears. This distance is now given by the value of the form's Padding property.

  3. Drag a GroupBox control from the Toolbox onto your form.

  4. Change the value of the GroupBox control's Padding property by expanding the Padding entry in the Properties window and setting the All property to 10.

  5. Drag a Button control from the Toolbox into the GroupBox control.

  6. Move the Button control close to the right border of the GroupBox control until a snapline appears. Move the Button control within the GroupBox control and note where the snaplines appear.

Aligning to Grouped Controls

You can use snaplines to align grouped controls as well as controls within a GroupBox control.

To align to grouped controls

  1. Select two of the controls on your form. Move the selection around and note the snaplines that appear between your selection and the other controls.

  2. Drag a GroupBox control from the Toolbox onto your form.

  3. Drag a Button control from the Toolbox into the GroupBox control.

  4. Select one of the Button controls and move it around the GroupBox control. Note the snaplines that appear at the edges of the GroupBox control. Also note the snaplines that appear at the edges of the Button control that is contained by the GroupBox control. Controls that are children of a container control also support snaplines.

Using Snaplines to Place a Control by Outlining Its Size

Snaplines help you align controls when you first place them on a form.

To use snaplines to place a control by outlining its size

  1. In the Toolbox, click the Button control icon. Do not drag it onto the form.

  2. Move the mouse pointer over the form's design surface. Note that the pointer changes to a crosshair with the Button control icon attached. Also note the snaplines that appear to suggest aligned positions for the Button control.

  3. Click and hold the mouse button.

  4. Drag the mouse pointer around the form. Note that an outline is drawn, indicating the position and the size of the control.

  5. Drag the pointer until it aligns with another control on the form. Note that a snapline appears to indicate alignment.

  6. Release the mouse button. The control is created at the position and size indicated by the outline.

Using Snaplines When Dragging a Control from the Toolbox

Snaplines help you align controls when you drag them from the Toolbox onto your form.

To use snaplines when dragging a control from the Toolbox

  1. Drag a Button control from the Toolbox onto your form, but do not release the mouse button.

  2. Move the mouse pointer over the form's design surface. Note that the pointer changes to indicate the position at which the new Button control will be created.

  3. Drag the mouse pointer around the form. Note the snaplines that appear to suggest aligned positions for the Button control. Find a position that is aligned with other controls.

  4. Release the mouse button. The control is created at the position indicated by the snaplines.

Resizing Controls Using Snaplines

Snaplines help you align controls as you resize them.

To resize a control using snaplines

  1. Drag a Button control from the Toolbox onto your form.

  2. Resize the Button control by grabbing one of the corner sizing handles and dragging. For details, see How to: Resize Controls on Windows Forms.

  3. Drag the sizing handle until one of the Button control's borders is aligned with another control. Note that a snapline appears. Also note that the sizing handle snaps to the position indicated by the snapline.

  4. Resize the Button control in different directions and align the sizing handle to different controls. Note how the snaplines appear in various orientations to indicate alignment.

Aligning a Label to a Control's Text

Some controls offer a snapline for aligning other controls to displayed text.

To align a label to a control's text

  1. Drag a TextBox control from the TextBox onto your form. When you drop the TextBox control onto the form, click the smart-tag glyph and select the Set text to textBox1 option. For details, see Walkthrough: Performing Common Tasks Using Smart Tags on Windows Forms Controls.

  2. Drag a Label control from the TextBox onto your form.

  3. Change the value of the Label control's AutoSize property to true. Note that the control's borders are adjusted to fit the display text.

  4. Move the Label control to the left of the TextBox control, so it is aligned with the bottom edge of the TextBox control. Note the snapline that appears along the bottom edges of the two controls.

  5. Move the Label control slightly upward, until the Label text and the TextBox text are aligned. Note the differently styled snapline that appears, indicating when the text fields of both controls are aligned.

Using Snaplines with Keyboard Navigation

Snaplines help you align controls when you are arranging them using the keyboard's arrow keys.

To use snaplines with keyboard navigation

  1. Drag a Button control from the Toolbox onto your form. Place it in the upper-left corner of the form.

  2. Press CTRL+DOWN ARROW. Note that the control moves down the form to the first available horizontal alignment position.

  3. Press CTRL+DOWN ARROW until the control reaches the bottom of the form. Note the positions it occupies as it moves down the form.

  4. Press CTRL+RIGHT ARROW. Note that the control moves across the form to the first available vertical alignment position.

  5. Press CTRL+RIGHT ARROW until the control reaches the side of the form. Note the positions it occupies as it moves across the form.

  6. Move the control around the form with a combination of arrow keys. Note the positions the control occupies and the snaplines that accompany them.

  7. Press SHIFT+any arrow key to resize the Button control by increments of one pixel.

  8. Press CTRL+SHIFT+any arrow key to resize the Button control in snapline increments.

Snaplines and Layout Panels

Snaplines are disabled within layout panels.

To selectively disable snaplines

  1. Drag a TableLayoutPanel control from the Toolbox onto your form.

  2. Double-click the Button control icon in the Toolbox. Note that a new button control appears in the TableLayoutPanel control's first cell.

  3. Double-click the Button control icon in the Toolbox twice more. This leaves one empty cell in the TableLayoutPanel control.

  4. Drag a Button control from the Toolbox into the empty cell of the TableLayoutPanel control. Note that no snaplines appear.

  5. Drag the Button control out of the TableLayoutPanel control and move it around the TableLayoutPanel control. Note that snaplines appear again.

Disabling Snaplines

Snaplines are turned on by default. You can disable snaplines selectively, or you can disable them in the design environment.

To selectively disable snaplines

  • Press the ALT key and while moving a control around the form.

    Note that no snaplines appear and the control does not snap to any potential alignment positions.

To disable snaplines in the design environment

  1. From the Tools menu, open the Options dialog box. Open the Windows Forms Designer dialog box. For details, see General, Windows Forms Designer, Options Dialog Box.

  2. Select the General node. In the Layout Mode section, change the selection from SnapLines to SnapToGrid.

  3. Click OK to apply the setting.

  4. Select a control on your form and move it around the other controls. Note that snaplines do not appear.

Next Steps

Snaplines offer an intuitive means of aligning controls on your form. Suggestions for more exploration include:

  • Try nesting a GroupBox control within another GroupBox control. Place a Button control within the child GroupBox control, and another within the parent GroupBox control. Move the Button controls around to see how the snaplines cross container boundaries.

  • Create a column of TextBox controls and a corresponding column of Label controls. Set the value of the Label controls' AutoSize property to true. Use snaplines to move the Label controls so their displayed text is aligned with the text in the TextBox controls.

For information about Windows user interface design, see the book Microsoft Windows User Experience, Official Guidelines for User Interface Developers and Designers Redmond, WA: Microsoft Press, 1999. (USBN: 0-7356-0566-1) at the MSDN site ().

See Also

Tasks

Walkthrough: Arranging Controls on Windows Forms Using a FlowLayoutPanel
Walkthrough: Arranging Controls on Windows Forms Using a TableLayoutPanel
Walkthrough: Laying Out Windows Forms Controls with Padding, Margins, and the AutoSize Property

Reference

SnapLine

Other Resources

Arranging Controls on Windows Forms