Controls Designs on Forms and Dialog Boxes

The controls used to provide functionality to a form or a dialog box are provided in a window called the Controls toolbox:

Visual C++ 6 Controls	Visual C++ 7 Controls

To make Windows controls available to your users, you will add them to their host object, which can be a dialog box or a form. To do this, you mostly click the desired control from the Controls toolbox and click the desired area on the host. You can keep adding controls on the dialog box as necessary.

If you want to add a control over and over again, press and hold Ctrl. Then click the control on the Controls toolbox. Then click in the desired area on the host. Every time you click, the control would be added to the form or dialog box. Once you have added enough controls, click the control again on the Controls toolbox to deselect it. You can also press Esc.

You cannot select more than one control to add on a host.

1. Create a new dialog-based application and name it Dialog11a
2. Click the Toggle Grid button
3. On the Controls window, click the button control and click somewhere (no precision necessary) in the top left corner of the dialog box:
    
   
4. On the Controls window, click the Edit Box control
5. On the dialog box, click and hold the mouse in the middle-left (no precision needed) section of the dialog box
6. Drag down and right (no precision necessary):
    
   
7. Release the mouse.
8. From the Controls window, click the Vertical Scroll Bar control and release the Ctrl key
9. On the dialog box, click three times an unoccupied area (no precision necessary) of the dialog box
10. To de select the Vertical Scroll Bar control , press Esc

To visually manipulate a control, you will first need to select it. To select a control, simply click it. A control that is selected is surrounded with 8 (blue) handles.

To select more than one control in the same area, click on the dialog box and draw a "fake" rectangle that encloses all of the needed controls. The first control from the selected group has 8 (blue) handles while the other control(s) from the same selected group has (have) 8 white handles (each).

To select controls at random. Click one of them. Press and hold either Shift or Ctrl. Then click each one of the needed controls.

1. Open the Form11a application
2.  If the form is not displaying, in the Resource View, expand the Form11a resources and expand the Dialog folder. Then double-click IDD_FORM11A_FORM.
   On the form, click the lower Edit box. Notice that it displays 8 handles around:
    
   
3. To select controls in a range, click and hold the mouse from the upper left section of the dialog box. Then drag down and to the right, drawing a rectangle that includes all three buttons in the top section of the dialog box:
    
   
4. Notice that the first control of the selection has 8 blue handles around:
    
   
5. Click an unoccupied area on the dialog box to unselect everything.
6. To select controls at random, click the Button1 in the top-left section.
7. Press and hold Shift.
8. Then click the lower-right scroll bar. Click the lower left edit control.
9. Release Shift
    
   
10. Click an empty area on the form to deselect the controls

After you have added a control to a dialog box, it assumes either its default size or the size you drew it with. To help with the sizes of controls on the form or dialog box, Visual C++ provides a visual grid made of black points. To can display or hide the grid by clicking the Toggle Grid button . The dimensions of grid points are in dialog box units (DLUs) and are set at a default value of 5. To change this spacing, display the Guide Settings dialog box from the Layout menu and set the desired values.

To change the size of a control, first select it. Then position the mouse on one of its handles. The mouse would assume a sizing cursor that indicates the possible type of resizing you can apply. The mouse cursors are:

Cursor Description Moves the seized border in the North-West <-> South-East direction Shrinks or heightens the control Moves the seized border in the North-East <-> South-West direction Narrows or enlarges the control

To resize a control, that is, to give it a particular width or height, position the mouse on one of the handles and drag in the desired direction.

If the Toggle Grid button is down, in which case the dialog or form would display the grid indicators, a control can be moved or resized only on the dotted lines. If you do not want to follow the grid indicators, you have two alternatives. You can hide the grid indicators by Toggle Guides button. On the other hand, you can press and hold Alt, then click the control or one its sizing handles and drag in the desired direction.

To resize more than one control at the same time. Firs select them. Then use the following buttons from the Dialog toolbar:

Practical Learning: Resizing Controls

Controls Positions

Practical Learning: Moving Controls

Tab Order

Practical Learning: Controlling Tab Order