Adding child controls

Now lets add the child controls to the dialog. If the toolbox window is not visible at this point, use the View | Toolbox menu item to bring it into view.

First, we want to add a small LABEL control above where our tree control will be located, to provide a title for the tree. Double-click on the LABEL control image\bm9.gif in the toolbox window. This creates a new LABEL control of the default size near the top/left corner of the dialog. If you are using the default 5x5 dialog unit grid, the control should be located at client position x=5, y=5 on the main dialog, otherwise perform a click+drag to move the control so that its origin (top/left corner) is located at 5,5.

Using techniques similar to that used to resize the dialog, proceed to resize the LABEL control so that it becomes 235x10 dialog units. To do this, single-click the control so that it is displayed with size grips, then perform a click+drag operation on the appropriate size grip to resize the control.

Now open the Label Properties dialog - this can be done by double-clicking on the newly created LABEL control, or by single-clicking the control (to select it) followed by the F4 key. With the dialog open, set the Caption text to show " &Interface tree". Note that there is one space character before the ampersand, which serves to provide a small margin between the text and the edge of the control. Select the Styles tab, and add the %WS_BORDER style, then click the Ok button (or press the ENTER key).

Next, we will create the control to display the Interface tree display, and the TREEVIEW control is ideal for this task. On the toolbox window, double-click the TREEVIEW button image\bm47.gif. This creates a TREEVIEW control of the default size near the top/left corner of the dialog, immediately below the LABEL control we just added. Using the same techniques as we used to resize the dialog, proceed to resize the TREEVIEW control so that it becomes 235x180 dialog units. If you are using the default grid size of 5 dialog units, the control should be located at client position x=5, y=10 on the main dialog.

Next, open the TREEVIEW Properties dialog and select the following styles:

%WS_BORDER

%WS_TABSTOP

%TVS_HASBUTTONS

%TVS_HASLINES

%TVS_LINEATROOT

%TVS_DISABLEDRAGDROP

%TVS_SHOWSELALWAYS

%TVS_FULLROWSELECT

…and set following extended styles (these are the default styles and are likely to have been selected automatically):

%WS_EX_LEFT

%WS_EX_LTRREADING

%WS_EX_RIGHTSCROLLBAR

Finally, click the OK button (or press the ENTER key).

Now we'll create a small status display on the top/right corner of the display, using two LABEL controls. The first should be sized to 50x10, and located at x=245, y=5 with the %WS_BORDER style. Set the Caption text to " Status". Again, note the leading space character to provide a small margin to the left of the text.

The second LABEL control should be sized to 50x50, and located at x=245, y=15 and should be assigned the %WS_BORDER and %SS_CENTER styles. The Caption of this control should be cleared (empty).

Finally, we will add three BUTTON controls to the dialog.

Double-click the button control in the toolbox window image\bm15.gif. This will create our first new button control immediately below the last LABEL control that was added. Click and drag the button down to maintain a one grid gap below the LABEL, and if necessary, resize the control to 50x15 dialog units. Open the Button Properties dialog and set the Caption text to "O&ptions".

Double-click the button control in the toolbox window to create another button, and move the new button to x=245, y=160. If necessary, resize to 50x15 as well. The Caption text should read "&Open File".

For the last button, double click the button control in the toolbox window, and move the control down slightly to x=245, y = 180. Again, set the size of the control to 50x15, and set the Caption text to "&Quit".

This last button needs two more small changes to complete its settings. In the Button Properties dialog, set the ID Name to %IDCANCEL and the ID Value to 2. This ID is chosen because it is the standard windows ID Value for the button that closes (cancels) a dialog.

 

Next Step: Setting the Tab Order