Placing a control on a dialog

When your dialog-based application is generated, go to the Resources in the Workspace window. Select the dialog IDD_USINGCTRLSINDIALOGS_DIALOG in the Dialog section. For this example, use the Button control, select it from the Control palette. The cross shaped cursor indicates where the centre of the Button will be placed.

There are a number of common controls you use shown below with their tool tips. These controls are discussed in more detail in other tutorials on this site.

Sizing the control on the dialog

As the cursor moves over the 'widened border', it will change to a double headed arrow indicating the directions in which you can resize the control. You will see the position and the dimensions of the control on the status bar at the bottom right. I must point out that these are in dialog units and not pixels. Care must be taken therefore if an image is to be placed on the control.

Dialog unit (DLU)

A unit of horizontal or vertical distance within a dialog box. A horizontal DLU is the average width of the current dialog box font divided by 4. A vertical DLU is the average height of the current dialog-box font divided by 8.

As can be seen from the above definition, DLUs depend on the font and assume that font's aspect ratio is 2:1 (height:width). This is why some dialogs will look good on the system on which they were designed but not so good on others. It is extremely important with multilingual applications, because not only can the length of the text vary in another language but also the style of the font.

Aligning controls

The layout of a dialog is important if it is to be user friendly, so don't take this demo as a good example. The controls should be in a logical sequence and neatly layout. To assist with the latter, the resource editor can place a grid on the dialog for you and the controls will snap to the grid when it is turned on. The size of the grid can be adjusted by going to Layout >> Grid Setting. Also, there is a toolbar of alignment tools that are easy to use.

These tools allow selected controls to be left or right aligned, cantered same sized etc.

Above, the buttons have been placed with approximate vertical spacing, then press Space Down (Alt+UpArrow) which will keep the top and bottom buttons in place and evenly space the other in-between. Press Align Left (Ctrl+LeftArrow) and the button will be left aligned with Button 1 because it is highlighted. Had Button 2 been highlighted, Button 1 would have been moved to the right in line with Button 2.

Changing control Styles and properties

To change the style and properties of a control, select it, then select the Properties menu under View, or right click on the control and select Properties.

The Properties dialog has three tabs: General, Styles and Extended Styles. For most controls, the General and Extended Styles tabs are the same and provide for entering the control's ID and text, default enable/visible states, and if it is to be part of the tab order. Extended Style include border types and reading order for Hebrew and Arabic applications.

The Styles tab has the styles that are specific to the control type as shown for the list box above. The effect of these styles are discussed in other articles on this site in more detail.

Setting the tab order

The tab order is the order in which you move focus through a series of controls using the TAB key. By default, the tab order is the order in which the controls are placed on the dialog. Once the placement is complete, it is worth checking that the tab order follows a logical flow in which the controls are best accessed.

To do this, press CTRL+D, Layout menu Tab Order. The dialog will then be displayed (as below) with the numbers indicating the present tab order. Click each control in the order in which the controls are to be tabbed. If a control is already in the right sequence, still click it so that it maintains its position in the order. When the order is complete, press ENTER or click where there is no control.

If only a few controls are to be re-ordered, hold down the CTRL key and click on the control prior to the one that is to be changed, then release the CTRL key and proceed as before. If the control is double clicked, it will become the first in the tab order.

Linking variables to a control

To link a variable to a control such as pointer that will give access to control's class methods:

select View >> Class Wizard

select the Member Variables tab

select the control's ID

click on Add Variable button. To pop up the Add Member Variable dialog,

enter the variable name, select the category (there can be one variable for each category if needed), and variable type

Class Wizard will have made the following entry in the dialog's header file:

You will notice that Class Wizard will name the function OnButton1(). This was changed because the intention was to use the same handler for all four buttons. So the Message Map entry is moved outside the Class Wizard reserved section in both the header and code file.

The prototype is also modified to take the button ID as an input.

//}}AFX_MSG
afx_msg void OnButton(UINT nID);
DECLARE_MESSAGE_MAP()

The Message Map entry is modified to handle a range of button controls. For this to work, it is vital the IDs are in consecutive order.

Conclusion

I have shown on the basics here in a rather badly laid out dialog. It should give a starting point, however. More complete and advanced information can be found in other articles on this site.

Happy programming!

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

Share

About the Author

Started working with computers when I/O was with punched paper tape, using Algol. Then learned Fortran, Basic, various Assemblers, Forth and Postscript. Built a robot in the early '80s. When I finally got a PC I learned C, C++ and more recently worked on a variety of .NET and PHP projects. Senior Software Engineer at MedTech Global in Melbourne, Australia.

I have another question about RichEdit and Tab controls!
How to make the RichEdit and Tab control to apear in dialog project?
I suppose that this is somehow related to the #include, but how this works? If I simply drop down RichEdit or Tab controls,I can compile correctly but I cannot see my exe file in action?

You can use the dialog editor and make a good looking dialog on you own screen. However, when the same dialog is displayed on a screen with different resolution it may look like sh*t! How do you make sure that a dialog allways displayes correctly (regardless of screen resolution)?

Maybe, Maybe not it's quiet common for newbies to place combobox controls on dialogs and forget (don't understand) that they have to resize the drop portion as well if adding strings dynamically at runtime.

I too sometines belive that people can't be that stupid yet if I go back ten years I can just image how stupid I must have been.

Haven't you bought any furniture that was baggaged
in seperated pieces. The only thing you had to do
was to put it together. Luckily you had manual among
those pieces, but you were so smart that you didn't
need to read it carefully, just glanched at it at
rushed those pieces togeter.

Hmmm, something wrong, one or two pieces left ?
I was too stupid and proud to read any manuals

The article Wolfraw wroted is nice. He gives you
details insight into the resource editor:

* Describes all major controls in the editor.
* How to size, align and change properties of controls.
* How to assign a variable or subclass control with
ClassWizard (when I was beginning I used primitive
GetDlgItem(...) and Get/SetWindowText(...) commands,
thing I rarely do today).
* How to link notification functions to controls.

Sorry, there are programmers who are just starting out on this site also. An article like this is ideal and much better than one written by a professional who assumes everyone knows everything. Besides, it is under the "Beginner" section, but you of course, knew that.