Part 2: Window design tools

• Click on the "ResourceView" tab
• Click on the "Dialog" folder
• Double-click on your dialog box, as shown below:

 

• You should now have a dialog box with OK and Cancel buttons, and a "label" somewhere in the middle.
• Delete the "TO DO" label by clicking on it and pressing delete
• (Whenever C++ creates anything automatically, it places TODO reminders anywhere you need to alter the code.  Later, you will see code with the line "// TODO: ..." to indicate something you need to change)

 

• Now we are ready to start adding controls.  All the controls will be located in the toolbox - click once on the desired control within the toolbox, then once on your dialog box.  A control will appear, and you can move or resize it as necessary.
• To change the properties of a control, click on it (a sizing rectange will appear) right-click on it, and select the "properties" item on the popup menu.

Some popular controls:

The pointer is used to select controls, resize them, move them, whatever.  It is the only icon on the toolbox not used to insert a new control. The "Aa" icon is a static edit box.  It is used to display text on the screen which the user cannot change.  It can either label other controls, or display information. The xyz square is a frame, and is used to group the controls on your window into seperate groups based upon the function they perform. (eg. one frame might contain all your "personal" input fields) The "x"is a check box.  It is used where something can either be selected or not (eg. the "do you want help files" checkbox when you created the new project) The next box is called a "combo box."  Using this box, the user can eiher select an item from a drop-down list, or type in their own data. The "<>" icon is a horizontal scroll-bar, used to view the left and right edges of a large window. The up/down control is a "Spin" control, where you click on the up arrow to increase the value of something, and the down arrow to decrease it. The "-|--" slider control allows you to set something to a particular value within two limits.  The "List control" is a much more powerful version of the list box.  It allows you to add an icon to each line, lay out the list with columns, and much more. The "ab" is a rich edit box, and can process formatted text, eg. with different font styles and sized. The month calendar can simply be dropped onto your form, and will instantly provide a calendar control.

The cactus picture is a picture box.  It is used to display graphics (bitmaps, icons, metafiles) The "ab|" icon is an edit box.  It works just like a word processor - the user can edit, cut, paste, and delete text within it.  It can be either a single-line, or mult-line (where the user presses Enter to get a new line) The rectangle is a "button."  It can be clicked on to initiate an action. The OK and Cancel buttons are examples. The circle is an option control.  This is used where the user can select one and only one option from a group. (eg. animal/mineral/vegetable) The next item is a list box, which displays a drop-down list of items For a list which stays the same size, choose a standard list control Other, specialized controls include scroll-bars (like those on the side of windows) up-down and progress bars, slider contols, tree controls, etc. Visit microsoft's web site for a more dfetailed discussion of these controls.

Next stage: building your project