Controls Designs on Forms and Dialog Boxes

 
 

Selecting and Adding Controls

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.

Practical Learning: Adding Controls to a Dialog Box

  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 Vertical Scroll Bar 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 Vertical Scroll Bar, press Esc

Selecting Controls on a Form or Dialog Box

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.

Practical Learning: Selecting Controls on a Dialog Box or a Form

  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

Controls Resizing

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:

 
Button Name Description
Make Same Width Applies the same width to all selected controls.
The width used will be be that of the last control selected
Make Same Height Applies the same height to all selected controls.
The height used will be be that of the last control selected
Make Same Size Applies the same width and height to all selected controls.
The height used will be be that of the last control selected
 

Practical Learning: Resizing Controls

  1. Click the lower large Edit box to select it.
  2. Position the mouse on the middle handle of the lower border:
     
  3. Click and drag up until the guiding horizontal line is in the middle of the control:
     
  4. Release the mouse.
  5. Open the Dialog11b application
  6. Display the dialog and click the Toggle Grid button
  7. Click the top Edit control. Then press and hold Ctrl
  8. Click the middle Edit control and click the bottom Edit control. Release Ctrl
  9. On the Dialog toolbar, click the Make Same Width button
     

 

Controls Positions

The controls you position on a dialog box or a form assume their given place. Most of the time, these positions are not practical. You can move them around to any positions of your choice.

To move a control, click and drag it, while the mouse cursor is a cross , in the desired direction until it reaches the intended position.

To move a group of controls, first select them. Then drag the selection to the desired location.

To help with positioning the controls, Visual C++ provides the Dialog toolbar with the following buttons:

Button Name Button Name Button Name
Align Left Align Tops Vertical
Align Right Align Bottoms Horizontal
Across Down    

Practical Learning: Moving Controls

  1. While the edit controls are still selected, on the Dialog toolbar, click the Down button
     
  2. Click an empty area on the dialog box to deselect everything.
  3. Click the lower Edit control. Then press and hold Shift
  4. Click the middle Edit control and click the top Edit control then release Shift
  5. On the Dialog toolbar, click the Align Left button
     
  6. Save everything and close the application

Tab Order

The controls you add to a form or a dialog box are positioned in a sequence that follows the order they were added. When you add a control on the host that already has other controls, regardless of the section or area you place the new control, it is sequentially positioned at the end of the existing controls. If you do not fix it, the user would have a hard time navigating the controls.

The sequence of controls navigation is called the tab order. While designing a form or a dialog box, to change the sequential order of controls, on the main menu, click Layout or Format and click Tab Order or press Ctrl + D.

Practical Learning: Controlling Tab Order

  1. On the main menu, click Layout (Visual C++ 6) or Format (Visual C++ 7) and click Tab Order
     
  2. To change the order or sequence of controls, click the top Edit control. Notice that its order changes to 1
  3. Click the middle Edit control, then the lower Edit control
     
  4. Save everything

 

After this lesson, you should take an overview of MFC Controls


Previous Copyright © 2003-2005 FunctionX, Inc.