Formatting Forms

   Tasks

After you have added controls, it is important to align them consistently to create an attractive user interface. For forms that require a considerable amount of data entry, it is also important that the order of the controls is properly defined so that the user can tab through them easily. In addition, forms that can be resized at run time should be able to resize controls appropriately. The key to designing a successful user interface is the proper handling of layout, alignment, and display of controls. The Forms Designer provides all the necessary tools to meet these requirements.

Setting Grid Layout Options

When you open a form in the Forms Designer, by default it is displayed with a dotted grid. This grid provides a graphical way to align controls. When you move controls on the form, they align on this grid automatically. Use the Options dialog box to change the size of this grid both horizontally and vertically.

Note   You can also use the Options dialog box to specify whether to display a grid and whether to align controls on the grid.

To change the spacing of the form surface grid

1. On the Tools menu, click Options.
   
   
2. Double-click the Form Designers node in the tree view, and then click WFC.
   
   
3. Type the pixel size for the horizontal spacing option. The default value is 8 pixels.
   
   
4. Type the pixel size for the vertical spacing option. The default value is 8 pixels.
   
   
5. Click OK.

   If you want finer control over the location of controls on a form, enter a smaller pixel size for both the vertical and horizontal spacing options.

Aligning Controls

Although you can move controls around on a form and have them align on the Forms Designer grid, you can also align multiple controls on a form based on the location of another control. To make alignment of controls easier, the Forms Designer provides a set of alignment tools.

To align controls on a form

1. Click the first control.

   This is the control that the other controls will be aligned with.

2. Press the CTRL key, and click the second control you want to align.

   Continue this process for all the controls that you want to align.

3. On the Format menu, click Align, and then click one of the alignment options.

   For example, clicking Lefts aligns all the selected controls at the left edge of the first control.

   Using the alignment options, you can align by the left, right, top, bottom, center (vertical center of the first control), and middle (horizontal center of the first control) of the first control that is selected.

Setting Horizontal and Vertical Spacing

Another important aspect of designing a form is attractive spacing between controls. For example, setting the proper space between a Label control and its corresponding Edit control is necessary for the consistency of a form's design. The Forms Designer provides tools for setting the spacing between controls.

To set vertical spacing between controls

1. Click the first control.

   This is the control that will be used to set the vertical spacing for other selected controls.

2. Press the CTRL key and click the second control to set the vertical spacing.

   Continue this process for all the controls that you want to set spacing for.

3. On the Format menu, click Vertical Spacing and then click one of the spacing options.

   For example, clicking Increase increases the vertical spacing between the controls by one pixel. However, if you select Snap to grid in the Options dialog box, spacing increases by one grid point.

   Using the spacing options, you can increase, decrease, remove, or make equal (if you have more than two controls selected) the vertical spacing between all the selected controls.

To set horizontal spacing between controls

1. Click the first control.

   This is the control that will be used to set the horizontal spacing for other selected controls.

2. Press the CTRL key and click the second control to set the horizontal spacing.

   Continue this process for all the controls that you want to set spacing for.

3. On the Format menu, click Horizontal Spacing and then click one of the spacing options.

   For example, clicking Decrease decreases the horizontal spacing between the controls by one pixel. However, if you select Snap to grid in the Options dialog box, spacing decreases by one grid point.

   Using the spacing options, you can increase, decrease, remove, or make equal (if you have more than two controls selected) the horizontal spacing between all the selected controls.

Making Controls the Same Size

After you have added controls to your form, you can make them the same size. Use the Make Same Size command to size the selected controls according to the size of the first control.

To make multiple controls the same size

1. Click the first control.

   This is the control that will be used to set the size for other selected controls.

2. Press the CTRL key and click the second control.

   Continue this process for all the controls that you want to make the same size as the first control.

3. On the Format menu, click Make Same Size and then click one of the spacing options.

   For example, clicking Both sets the height and width of the selected controls with that of the first control you selected.

Centering Controls on a Form

Depending on the type of user interface you are creating with your form, you can position a control in the center of the form either vertically or horizontally.

To center controls on the form

1. Click the control that you want to center on the form.
   
   
2. On the Format menu, click Center in Form and then click Horizontally to center the selected control horizontally on the form, or click Vertically to center the control vertically.

Locking Control Position on a Form

After you have added controls to your form and set their layout, you can to lock the controls in place so that they cannot be moved.

To lock the position of controls on a form

• On the Format menu, click Lock Controls.

  The controls are locked and cannot be moved unless you change their location properties using the Properties window. To unlock the controls, click Lock Controls again.

Setting the Tab Order of Controls

An important aspect of any user interface design is user interaction. In addition to providing the proper controls in an attractive layout, it is critical to make your user interface easy to navigate with both the mouse and the keyboard. Users can press the TAB key to navigate through the various controls on your form. Therefore, it is important that the tab order of your controls is indicative of how the form is to be used.

Note   Controls that are placed in container controls, such as the GroupBox and Panel controls, have their own tab order within the container.

To set the tab order of a form

1. On the View menu, click Tab Order.

   The Forms Designer displays numbered boxes next to each control on your form. These boxes indicate the current tab index of the control in the tab order.

2. Click the tab order box that is associated with the control that you want to place as the first control in the tab order. The control changes to the number 0 indicating that it is the first control in the tab order.

   Continue clicking controls in the order that you want them in the tab order.

3. To finish setting the tab order, on the View menu, click Tab Order.

   This toggles the tab order view in the Forms Designer.

   To test the tab order on your form, select the first control in the tab order and press TAB. The selection moves to the next control in the tab order. You can continue pressing TAB through the rest of the controls.

Anchoring Controls to a Form

If you are designing a form that the user can resize at run time, the controls on your form should resize and reposition properly. To resize controls dynamically with the form, you can use the anchor property for all graphical WFC controls. The anchor property defines an anchor position for the control. When a control is anchored to a form and the form is resized, the control maintains the distance between the control and the anchor positions. For example, if you have an Edit control that is anchored to the left, right, and bottom edges of the form, as the form is resized, the Edit control resizes horizontally so that it matches the same distance from the right and side of the form. Also, the control positions itself vertically so that its location is always the same distance from the bottom edge of the form.

To anchor a control on a form

1. Select the control on your form that you want to anchor.
   
   
2. In the Properties window, double-click the anchor property.

   An editor is displayed that shows a cross.

3. To set an anchor, click the top, left, right, or bottom sections of the cross.
   
   
4. Click the anchor property name again to close the anchor property editor and set the control.

Docking Controls on a Form

Another way to lay out controls on your form is to dock them at the edges of your form or have them fill the control's container (either a form or a container control). For example, Windows Explorer docks its TreeView control to the left side of the window and its ListView control to the right side of the window. Use the dock property for all graphical WFC controls to define the docking mode.

To dock a control

1. Click the control that you want to dock.
   
   
2. In the Properties window, double-click the dock property.

   An editor is displayed that shows a series of boxes representing the edges and the center of the form.

3. Click the button that represents the edge of the form that you want to dock the control to. To fill the contents of the control's form or container control, click the center box. Click None to disable docking.

   The control is automatically resized to fit the boundaries of the docked edge.