Edit

Share via

Walkthrough: Arrange 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.

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

Create the project

  1. In Visual Studio, create a Windows-based application project called "SnaplineExample".

  2. Select the form in the Forms Designer.

Space and align controls

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.

Align to form and container margins

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

  1. 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.

  2. 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.

  3. 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.

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

  5. 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.

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

  7. 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.

Align to grouped controls

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

  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.

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.

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.

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.

Align a label to a control's text

  1. Drag a TextBox control from the Toolbox 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: Perform common tasks using designer actions.

  2. Drag a Label control from the Toolbox 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.

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+arrow keys to resize the Button control by increments of one pixel.

  8. Press Ctrl+Shift+arrow keys to resize the Button control in snapline increments.

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.

Disable snaplines

Press the Alt key and while moving a control around the form.

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. Select Windows Forms Designer.

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

  3. Select 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.

See also