Configure Controls at Design Time

Microsoft .NET Framework, ASP.NET, Visual C# (CSharp, C Sharp, C-Sharp) Developer Training, Visual Studio

Exam Prep. Guides

70-505 Study Guide 70-526 Study Guide

1. Forms Controls Add/configure a Form Manage control layout Add/configure a control Use IDE Add controls Configure controls Modify Control Properties Configure controls Create/configure command controls Create/configure text edit controls Create/configure text display controls LinkLabel Control Create List Controls Configure Layout and Functionality Value-setting controls WebBrowser control Date-setting controls Display images NotifyIcon Access keys Create/configure menus Create event handlers 2. Integrating Data 3. Printing/Reporting 4. Enhancing Usability 5. Asynchronous Prog. 6. Forms Controls 7. Configure/Deploy

edit

Exam 70-526 Preparation Guide: Configure controls on a Windows Form at design time to optimize the UI.

Contents 1 Adjusting the size of a control 2 Resizing multiple controls on a form 3 Adjusting the location of a control 4 Adjusting the location of multiple controls 5 SnapLines 6 Using the Grid 7 Laying out controls 8 Locking controls 9 MSDN references

Once you have placed a control on a Form or Container, you will more often than not want to change its location and/or size. These properties of a control can be modified within the Forms Designer as well as through the use of the Properties Window.

Modifying either of these properties graphically instantly allows you to see how the control looks on a Form or within a Container.

Adjusting the size of a control

To adjust the size of a control with the mouse, you first need to select it by clicking on it. This causes the control to display eight sizing handles. Dragging any of these sizing handles changes the size of the control.

The ARROW keys can also be used to resize a control in two different ways, altering the position of the right or bottom edge of the control.

• To resize the control one pixel at a time, press the ARROW keys while holding down the SHIFT key.

• To resize the control in large increments, press the DOWN or RIGHT arrow keys while holding down the SHIFT and CTRL keys. When you do this, if there is no control either below or to the right of the control, the control resizes to the size of the Form, minus snap region. To illustrate this here is a control that has been resized using this method.

Alternatively you can resize a control using the Size property located in the Properties Window. This property has two components that can be modified, Height and Width.

Resizing multiple controls on a form

More than one control can be resized at a time, to do this either lasso the controls with the mouse, or select them one by one whilst holding down the CTRL or SHIFT key.

Dragging any of the eight sizing handles on any selected control will change the size of all of the selected controls.

Alternatively, on the Format menu, choose Make Same Size, and select one of the four options. The first three commands change the dimensions of the controls to match the first-selected control.

Adjusting the location of a control

To adjust the location of a control with the mouse, you first need to select it by clicking on it and hold down the left mouse key. This causes the size all icon to be displayed. Dragging the mouse at this point will move the control around the form. When you release the mouse key, the control will be in a new position.

The ARROW keys can also be used to adjust the location of a control in two different ways:

• To adjust the location of the control one pixel at a time, press the ARROW keys and the control will move.

• The control can be positioned so that it jumps to the next snap line position by pressing one of the ARROW keys while holding down the CTRL key.

Alternatively you can resize a control using the Location property located in the Properties Window. This property has two components that can be modified, X and Y.

Adjusting the location of multiple controls

More than one control can be moved at a time, to do this either lasso the controls with the mouse, or select them one by one whilst holding down the CTRL or SHIFT key.

Move the controls with either the mouse or the ARROW keys.

SnapLines

The default setting for the designer window is to use SnapLines. These are a new feature of Visual Studio.

SnapLines are horizontal and vertical line segments dynamically created in the user interface to help the programmer design the layout of the controls within containers. They appear when you are moving a selected control or set of controls near a position that would align with another control or set of controls. The selected control(s) will "snap" to the suggested position as you move it past the other controls.

SnapLines are generated dynamically and automatically as a control edge moves near another control or near the boundaries of its container. This can occur when a control is added from the toolbox, or moved/resized by the mouse or keyboard. Controls typically have both horizontal and vertical snaplines.

SnapLines can be manipulated by the programmer by setting a control’s Margin and Padding properties. The SnapLines's distance from a container’s border is the sum of the control's Margin property and the container’s Padding property.

To enable SnapLines, do the following:

1. From the Tools menu, select Options.
2. In the left pane of the dialog box, click Windows Forms Designer.
3. Change LayoutMode to SnapLines.
4. Ensure ShowGrid is set to False.
5. Click OK.
6. Close any open designer windows.

Using the Grid

When laying controls out on a Form, you have a choice of either laying them out using snap lines or by aligning the controls on a grid (as per visual studio 6). The default option when you install the IDE is to use snap lines, however if you wish to use the grid, then you need to set this up in the options. From the Tools menu, select Options. In the left pane of the dialog box, click Windows Forms Designer. This will cause the following dialog window to be displayed.

There are four properties that control whether the grid is displayed and how it is used.

• GridSize - This value is the size of the grid spacing in pixels.

• LayoutMode - This value has two settings, SnapLines or SnapToGrid. When SnapLines is selected, controls placed on the Form are aligned using snap lines, and similarly, when SnapToGrid is selected, controls placed on the Form are aligned using the grid.

• ShowGrid - This value enables or disables the grid in the designer.

• SnapToGrid - This value enables or disables whether controls are automatically placed at grid coordinates.

To enable the grid, do the following:

1. Change LayoutMode to SnapToGrid.
2. Change ShowGrid to True.
3. Click OK.
4. Close any open designer windows.

When you now open any designer windows, the grid will now be enabled.

Laying out controls

Controls can be laid out using either the Format Menu or the Layout Toolbar.

Locking controls

Controls can be locked into position so that you do not accidentally move them within the form designer. A single control can be locked by setting the Locked property in the Properties Window. You can lock all of the controls currently on a form in one of two ways:

• From the Format menu, choose Lock Controls.

• Right-click on the Form and choose Lock Controls.

To unlock the control(s), simply follow the same procedure.

MSDN references

• Arranging Controls on Windows Forms

• How to: Resize Controls on Windows Forms

• General, Windows Forms Designer, Options Dialog Box

• How to: Set Grid Options for All Windows Forms

• Walkthrough: Arranging Controls on Windows Forms Using Snaplines

• Locking Controls to Windows Forms