Home

Introduction to Dialog Boxes

    

Fundamentals of Dialog Boxes

 

Introduction

 

A dialog box is a rectangular window whose main role is to host or hold other Windows controls. For this reason, a dialog box is referred to as a container. It is the primary interface of user interaction with the computer. By itself, a dialog box means nothing. The controls it hosts accomplish the role of dialog between the user and the machine. Here is an example of a dialog box:

Add Resource

A dialog box has the following characteristics:

  • It is equipped with the system Close button , , or . As the only system button, this button allows the user to dismiss the dialog and ignore whatever the user would have done on the dialog box
  • It cannot be minimized, maximized, or restored. A dialog box does not have any other system button but Close
  • It is usually modal, in which case the user is not allowed to continue any other operation until the dialog box is dismissed
  • It provides a way for the user to close or dismiss the dialog. Most dialog boxes have the OK and the Cancel buttons, although this depends on the application developer. When the dialog has the OK and the Cancel buttons, the OK button is configured to behave as if the user had pressed Enter. In that case, whatever the user had done would be acknowledged and transferred to the hosting dialog box, window, or application. Pressing Esc applies the same behavior as if the user had clicked Cancel.

Practical LearningPractical Learning: Introducing Dialog Boxes

  1. Start Microsoft Visual Studio
  2. To create a new Application, on the main menu, click File -> New Project...
  3. In the left list, click Visual C++
  4. In the right list, click Win32 Project
  5. Set the Name to CruisePreparation1
  6. Click OK
  7. In the first page of the wizard, click Next
  8. In the second page, click Windows Application and click Empty Project
  9. Click Finish
  10. In the Solution Explorer, right-click CruisePreparation1 and click Properties...
  11. In the left list, click Configuration Properties.
    In the right list, change Use of MFC to Use MFC in a Shared DLL
  12. Click OK
  13. To create the application class of the project, on the main menu, click Project -> Add New Item...
  14. In the Files property page or in the Templates section, click C++ (Source) File
  15. Set the File Name to Preparation
  16. Click Add
  17. To create the application, change the file as follows:
    #include <afxwin.h>
    
    class CPreparationApp : public CWinApp
    {
    public:
            BOOL InitInstance();
    };
    
    BOOL CPreparationApp::InitInstance()
    {
            return TRUE;
    }
    
    CPreparationApp theApp;
  18. Save All

Dialog Box Creation

A dialog box is created from a class named CDialog. The CDialog class implements a class named CWnd. The CWnd class is derived from CCmdTarget:

CDialog

To visually create a dialog box in Microsoft Visual C++, from the Add Resources dialog box, click Dialog and click New. Then you can manipulate its characteristics using the Properties window.

In reality, unlike most or all other controls, a dialog box requires some preparation before actually programmatically creating it. While most other controls can be easily added to a host, a dialog box must already “exist” before it is asked to display. Based on this, a dialog box can first be manually created as a text file (in a resource file). In the file, you create a section for the dialog box. This section itself is divided in lines each serving a specific purpose. /p>

Like most other controls, a dialog box must be identified. The identifier of a dialog box usually starts with IDD_ (the second D stands for dialog). An example of a dialog identifier would be IDD_SCHOOL_SURVEY. Therefore, the section of the dialog box in the file can start with:

IDD_SCHOOL_SURVEY

At design time, the identifier of the dialog box is specified using the ID combo box:

Properties Window

The Win32 library provides a series of ready-made names for classes to create controls. In the same way, a dialog box has two types of classes used to create a dialog box. The DIALOG statement was primarily used to create a dialog box. It has been updated and replaced by the DIALOGEX name. Therefore, to indicate in the file that the section you are creating is for a dialog box, type DIALOGEX. Here is an example:

IDD_SCHOOL_SURVEY DIALOGEX

Practical LearningPractical Learning: Creating a Dialog Box

  1. To create a dialog box, in the Solution Explorer, right-click Resource Files -> Add -> Resource...
  2. In the Add Resource dialog box, click Dialog
  3. Click New
  4. Click the middle of the dialog box to make sure it has focus.
    In the Properties window, click ID (the property name)
  5. Type IDD_PREPARATION_DLG and press Enter

Dialog Box Location

A dialog box must be “physically” located on an application. Because a dialog box is usually created as a parent to other controls, its location depends on its relationship to its parent window or to the desktop. The location of a dialog box is defined by x for the distance from the left border of the monitor to the left border of the dialog box and by y for the distance from the top border of the monitor to the top border of the dialog box:

IDD_SCHOOL_SURVEY DIALOGEX x, y,

At design time, the x value is set using the X Pos field of the Properties window:

X Pos

The y value is set using the Y Pos value in the Properties window.

If you specify these two dimensions as 0, the left and top borders of the dialog box would be set so the object appears in the center-middle of the screen:

IDD_SCHOOL_SURVEY DIALOGEX 0, 0,

If you set the value of x or X Pos property to a number less than or equal to 0, the left border of the dialog box would be aligned with the left border of the monitor. If you set the value of x or of the X Pos property higher than 0, the value would be used as the distance, in Dialog Box Unit (DLU), from the left border of the screen to the left border of the dialog box. This scenario also applies for the y value or the Y Pos property.

Dialog Box Dimensions

The dimensions of a dialog box are its width and its height. At design time, to set the desired width, position the mouse to its right border until the mouse pointer appears as a horizontal double arrow Then click and drag left or right.

To set the desired height, position the mouse to the bottom border until the mouse cursor appears as a vertical double arrow . Then click and drag up or down.

To set both the width and the height in one operation, position the mouse in the bottom-right corner until the mouse pointer becomes a North-West <=> South-East diagonal double arrow. Then click and drag up, down, left, or right as necessary.

While dragging in any of these operations, you can refer to the right section of the status bar to get the current width and height. In the resource file, the width and the height of the dialog box follow the location values. Here is an example:

IDD_SCHOOL_SURVEY DIALOGEX 0, 0, 340, 268

There are other items that can be entered on this first line but the identifier, the DIALOGEX statement, the location, and the dimensions are required.

Practical LearningPractical Learning: Setting Dialog Box Dimensions

  1. Position the mouse to the right border of the dialog box with a horizontal mouse cursor
     
    Resizing a Dialog Box
  2. Click and hold the mouse. Then drag in the right direction. Meanwhile, observe the change of the width on the Status Bar
  3. When the width value gets to 340, release the mouse
  4. Position the mouse to the right border of the dialog box with a vertical mouse cursor
  5. Click and hold the mouse. Then drag up. Meanwhile, observe the change of the height on the Status Bar
  6. When the height values gets to 202, release the mouse

Windows Styles for a Dialog Box

 

Introduction

As the most regular used parent of Windows controls, a dialog box must have some characteristics that would allow it to be as efficient as possible. The characteristics of a dialog box, as done with the controls, are referred to as its styles. In the resource file, to specify these aspects, start a line with the STYLE keyword:

IDD_SCHOOL_SURVEY DIALOGEX 0, 0, 340, 268
STYLE

To programmatically change the style of a dialog box, you can call the SetWindowLongPtr() function. Its syntax is:

LONG_PTR SetWindowLongPtr(HWND hWnd, int nIndex, LONG_PTR dwNewLong);

The first argument is a handle to the dialog box. For a normal application, you can use m_hWnd that we will study in Lesson 7.

The nIndex argument represents the type of change you want to make. In Lesson 8, we will come back to the possible values of this argument; but for now, if you want to change the style of a dialog box, this argument should have the GWL_STYLE value.

The dwNewLong argument represents the new value you want to apply for the second argument. In this case, it would be the style you want to apply.

To get the styles that a dialog box has, you can call the GetWindowLongPtr() function. Its syntax is:

LONG_PTR GetWindowLongPtr(HWND hWnd, int nIndex);

Both arguments follow the same rules as the first two parameters of the SetWindowLongPtr() function.

The Caption of a Dialog Box

Because a dialog box serves only to hold other objects, it should indicate what it is used for. The top side of a dialog box is made of a horizontal section that we call the title bar. To have a title bar on a dialog box, it must be created with the WS_CAPTION style:

IDD_SCHOOL_SURVEY DIALOGEX 0, 0, 340, 268
STYLE WS_CAPTION

The main area of this bar contains a word or a group of words forming a sentence called a caption. There are various ways you can change it. At design time, in the Properties window, change the value of the Caption field. If you are creating a resource file, start a new line with the CAPTION keyword and provide the word or group of words as a null-terminated string. Here is an example:

IDD_SCHOOL_SURVEY DIALOGEX 0, 0, 340, 268
STYLE WS_CAPTION
CAPTION "Exercise"

To programmatically specify the caption of a dialog box, call the SetWindowText() function (the following code, given as a reference, contains the OnCreate() and the SetWindowText() and the OnCreate() functions that we haven't studied yet; we will find out about them in the next lessons):

int CExerciseDlg::OnCreate(LPCREATESTRUCT lpCreateStruct)
{
    if (CDialog::OnCreate(lpCreateStruct) == -1)
	return -1;

    SetWindowText(_T("Yugo National Bank - Employees Records"));

    return 0;
}

Practical LearningPractical Learning: Changing a Dialog Style

  1. Click the middle of the dialog box to give it focus.
    In the properties window, delete the value in the Caption field
  2. Replace it with Cruise Preparation and press Enter

Scroll Bars

When creating a dialog box, you can equip it with either or both a vertical scroll bar and/or a horizontal scroll bar. To do this, in the Properties window, set the Horizontal Scrollbar and/or the Vertical Scrollbar fields to the desired value.

The System Icon of a Dialog Box

Depending on how it is designed, a dialog box may display a system icon on the left side of the title bar:

System Icon

To make a dialog box display a system icon, at design time, access its Properties window and set its System Menu option to True. Otherwise, in its resource file, add the WS_SYSMENU style. Here is an example:

IDD_SCHOOL_SURVEY DIALOGEX 0, 0, 340, 268
STYLE WS_CAPTION | WS_SYSMENU
CAPTION "Exercise"

By default, Microsoft Visual Studio or the operating system provides a default icon for the dialog box. If you want, you can change it. Probably the easier way is to access the IDR_MAINFRAME item from the Resource View and change its design. You can also use create another icon or use any icon you want. At run-time, you can change the icon by calling  the LoadIcon() function. This function comes in two versions whose syntaxes are:

HICON LoadIcon(LPCTSTR lpszResourceName) const;
HICON LoadIcon(UINT nIDResource) const;

If you had designed a new icon and added its resource, you can call the second version. Here is an example (the following code, given as a reference, contains the OnInitDialog(), the LoadIcon(), and the SendMessage() functions that we haven't studied yet; we will find out about them in other lessons):

BOOL CDialogExample1Dlg::OnInitDialog()
{
    CDialog::OnInitDialog();

    // Set the icon for this dialog.  The framework does this automatically
    //  when the application's main window is not a dialog
    SetIcon(m_hIcon, TRUE);			// Set big icon
    SetIcon(m_hIcon, FALSE);		// Set small icon

    // TODO: Add extra initialization here
    HICON hCustomIcon = LoadIcon(AfxGetApp()->m_hInstance,
	                         MAKEINTRESOURCE(IDI_SOME_ICON));
	 
    if(hCustomIcon)
	  SendMessage(WM_SETICON, ICON_SMALL, (LPARAM)hCustomIcon);
	 
    return TRUE;  // return TRUE  unless you set the focus to a control
}

The System Menu of a Dialog Box

If a dialog box is equipped with a system icon, the user can click the icon and this would display a system menu:

System Menu

The presence of the system menu comes with a system Close button on the right side of the title bar. As mentioned already, this is made possible by adding the WS_SYSMENU style as seen earlier. As mentioned already, if you want to programmatically change the style of a dialog box, call the SetWindowLongPtr() function. To hide the system icon and its menu from the title bar, first call the function to remove the system menu, then call it again to add the WS_CAPTION style. here is an example  (the following code, given as a reference, contains the OnInitDialog() function that we haven't studied yet):

BOOL CDialogExample1Dlg::OnInitDialog()
{
	CDialog::OnInitDialog();

	// Set the icon for this dialog.  The framework does this automatically
	//  when the application's main window is not a dialog
	SetIcon(m_hIcon, TRUE);			// Set big icon
	SetIcon(m_hIcon, FALSE);		// Set small icon

	// TODO: Add extra initialization here
	SetWindowLongPtr(m_hWnd, GWL_STYLE, ~WS_SYSMENU);
	SetWindowLongPtr(m_hWnd, GWL_STYLE, WS_CAPTION);
	 
	return TRUE;  // return TRUE  unless you set the focus to a control
}

This would produce:

Style

The Minimize Button of a Dialog Box

Normally, the standard characteristics of a dialog box state that it does not need to be minimize. Still, if you want, you can add a minimize and a maximize buttons to it. If you want to add the minimize button, at design time, set the Minimize Box property to True. This is equivalent to adding the WS_MINIMIZEBOX style to the class.

To programmatically do this, call the SetWindowLongPtr() function and add the WS_MINIMIZEBOX style to the third argument. Here is an example:

SetWindowLongPtr(m_hWnd, GWL_STYLE, WS_MINIMIZEBOX | WS_CAPTION | WS_SYSMENU);

If you create a dialog box and equip it with the minimize button so the user can shrink it to the task bar, if you want the dialog box to be minimized when it comes up, if you are making the changes from the resource file, add the WS_MINIMIZE style. This would be done as follows:

IDD_SCHOOL_SURVEY DIALOGEX 0, 0, 340, 268
STYLE WS_CAPTION | WS_SYSMENU | WS_MINIMIZEBOX | WS_MINIMIZE
CAPTION "Exercise"

Remember that a dialog box can be minimized only if its system menu indicates so.

The Maximize Button of a Dialog Box

WS_MAXIMIZEBOX: If you want the Maximize button , set the Maximize Box property to True or checked. This is equivalent to adding the WS_MAXIMIZEBOX style.

WS_MAXIMIZE: If you create a dialog box equipped with the Maximize button, if you want the dialog box to be automatically maximized when it displays, you can add the WS_MAXIMIZE style to the resource file. This would be done as follows:

IDD_SCHOOL_SURVEY DIALOGEX 0, 0, 340, 268
STYLE WS_CAPTION | WS_SYSMENU | WS_MINIMIZEBOX | WS_MINIMIZE |
WS_MAXIMIZEBOX | WS_MAXIMIZE
CAPTION "Exercise"

Remember that a window box can be maximized only if it includes the WS_MAXIMIZEBOX style.

Setting one of these two system button properties to True or checked or adding either WS_MAXIMIZEBOX or WS_MINIMIZEBOX and not the other would disable the other system button. Therefore, here are the combinations you can get:

System Menu

System Menu = False

This is equivalent to:

BOOL CDialogExample1Dlg::OnInitDialog()
{
	CDialog::OnInitDialog();

	// Set the icon for this dialog.  The framework does this automatically
	//  when the application's main window is not a dialog
	SetIcon(m_hIcon, TRUE);			// Set big icon
	SetIcon(m_hIcon, FALSE);		// Set small icon

	// TODO: Add extra initialization here
	SetWindowLongPtr(m_hWnd, GWL_STYLE, ~WS_CAPTION);
	SetWindowLongPtr(m_hWnd, GWL_STYLE, WS_SYSMENU);

	return TRUE;  // return TRUE  unless you set the focus to a control
}

System Menu

There is no system button

System Menu = True
Minimize Box = False
Maximize Box = True
System Menu
  The Minimize button is disabled
 
System Menu = True
Minimize Box = True
Maximize Box = False
System Menu
  The Maximize button is disabled
 
System Menu = True
Minimize Box = True
Maximize Box = True
System Menu
  Both the Minimize and Maximize buttons are enabled
 
System Menu = True
Minimize Box = False
Maximize Box = False
System Menu
  Only the Close button is available

The Borders of a Dialog Box

The borders of an object allow the user to "physically" locate it on the screen. Obviously a dialog box should have borders. Win32 allows you to customize the borders of a dialog box. At design time, the type of border used on a dialog box is controlled by the Border combo box in the Properties window. If you are working from the resource file, the dialog box provides a set of properties you can use.

The options used to control the borders of a dialog box are:

  • Property Window: Border: None
    Resource File: Style: No DS_ style, no WS_CAPTION, no WS_SYSMENU

None

  • Property Window: Border: Thin

None

  • Resizing: The user will be able to enlarge, shrink, heighten, or shorten the dialog box by dragging its borders
  • Property Window: Border = Dialog Frame
    Resource File: Style: DS_MODALFRAME
    The dialog box will have thick borders
 
 
 

The Frame Thickness

Based on the Microsoft Windows standards and suggestions, a dialog box usually uses constant dimensions. This means that the user should not change its width and/or height. If you want to give the user the ability to resize a dialog box, change its Border value to Resizing. With this type of object, the user can position the mouse on of its borders or corners, click, hold down the mouse and drag in the desired direction to change its dimensions. In the resource file, this can also be done by creating the dialog box with the WS_THICKFRAME style:

IDD_SCHOOL_SURVEY DIALOGEX 0, 0, 340, 268
STYLE WS_CAPTION | WS_SYSMENU | WS_POPUP | WS_THICKFRAME
CAPTION "Exercise"

A Thin value gives a thin border to the dialog box.

A Popup Dialog Box

A window is referred to as popup if it can be displayed on the screen. That is, if it can be "physically" located. To create a popup dialog box, at design time, select Popup from the Style combo box. In the resource file, this can be done by adding the WS_POPUP style:

IDD_SCHOOL_SURVEY DIALOGEX 0, 0, 340, 268
STYLE WS_CAPTION | WS_SYSMENU | WS_POPUP
CAPTION "Exercise"

If you do not want borders at all on the dialog box, set its Border value to None. This also removes the title bar and thus the system buttons:

System Menu

This is equivalent to using only the WS_POPUP style:

IDD_SCHOOL_SURVEY DIALOGEX 0, 0, 340, 268
STYLE WS_POPUP
CAPTION "Exercise"

The Child of a Dialog Box

A window is referred to as child if its appearance is dependent of the appearance of another window. All of the objects we will place on our dialog boxes are child window. As we will see when studying property sheets and wizards, a dialog box that is designed to be "embedded" in a property sheet or a wizard must be created as a child. To specify that a dialog box is a child of another window, at design time, select the Child value on the Style combo box. This characteristic can be applied by adding the WS_CHILD style.

A Overlapped Dialog Box

A window is called overlapped if it has the following characteristics:

  • It has a title bar equipped with a caption and at least one of the system buttons (usually at least the system Close button)
  • It has borders

To get an overlapped dialog box, at design time, access the Properties window for the dialog box. Set the Style combo box to the Overlapped value. This is equivalent to the WS_OVERLAPPED style.

To create a dialog box equipped with a title bar, a system menu, the ability to pop up, and a border, instead of combining the WS_CAPTION, the WS_SYSMENU, the WS_POPUP, and the WS_BORDER styles, use the WS_OVERLAPPEDWINDOW value, which combines them all.

The Regular Styles of a Dialog Box

 

The Context Help

We saw already how to manage the title bar and its system buttons. If you are creating a strict dialog box, one that is equipped with only the system close button, if you intend to provide help on the dialog box, you can add a context-sensitive help button to the left of the close button. To do this at design time, in the Properties window, set its Context Help property to True or create it with the DS_CONTEXTHELP style. 

A Modal Frame

By design, a dialog box has thick borders and cannot be resized from its borders or corners, even if the system buttons are available. This characteristic of dialog boxes is controlled by the Border property. The default border of a dialog box is Dialog Frame. This is the same as applying the DS_MODALFRAME dialog style:

IDD_SCHOOL_SURVEY DIALOGEX 0, 0, 340, 268
STYLE WS_CAPTION | WS_SYSMENU | WS_POPUP | DS_MODALFRAME
CAPTION "Exercise"

A 3-D Look

In previous versions of MS Windows, namely Windows NT 3.51, to get a 3-dimensional appearance, you needed to apply the DS_3DLOOK style. At this time, this style is added by default.

The Coordinates of a Dialog Box

Earlier, when reviewing the techniques of setting the location of a dialog box, we mentioned that, if the x and the y values, or the X Pos and the Y Pos properties, are set to 0, the dialog box is positioned in the middle of the screen. This is because, like all other objects that can act as children of a parent window, the location of a dialog box is set according to its parent. That is, the location of a dialog box is based on its ability to be a client (also called child) of another window (called a parent). This system is referred to as client coordinate. If you are creating an application based on a dialog box, that is, an application whose main or even only container is the dialog box, such a dialog box does not have a parent. In this case, it does not have a referential window to base its location on. Consequently, it gets positioned to the middle of the screen. If you want the location of the dialog box to be based on the monitor screen, at design time, set its Absolute Align property to True in the Properties window. In a resource file, this would be done by adding the DS_ABSALIGN style. This system is referred as the screen coordinate.

Centering a Dialog Box

Based on the coordinate system you decide to use, screen or client, when the dialog box of a dialog-based application comes up, if you want the dialog to be centered on the monitor screen, even if you are using the screen coordinate system with the DS_ABSALIGN style, set its Center property to True in the Properties window. This is also done by adding the DS_CENTER style. If the dialog box is participating in an application that is view-based, if you set its Center property to True, it would be centered with regards to the window that called it.

We have described how to control the location of the dialog box when it comes up, depending on the coordinate system you are using, and the DS_CENTER style. Alternatively, if you want the dialog box to be displayed based on the location of the user's mouse cursor, at design time, set its Center Mouse property to True in the Properties window. In this case, when the dialog box comes up, it would find the mouse pointer and position itself so the mouse cursor would be in the middle-center of the dialog box. This ability is also applied by adding the DS_CENTERMOUSE style.

Practical LearningPractical Learning: Centering a Dialog Box

  1. In the Properties window, double-click the Center field to set it to True
  2. On the Standard toolbar, click the Save All button

The Font of a Dialog Box

To display its controls, the dialog box uses a predefined font known as MS Shell Dlg. To change it at design time, in the Properties window, click Font (Size) to reveal its combo box. Then click its ellipsis button. This would open the Font dialog box where you can select the font and its options.

The font characteristics are managed through the DS_SHELLFONT, the DS_SETFONT, and the DS_FIXEDSYS styles. The section of the resource file that specifies the general font starts with the FONT keyword:

IDD_SCHOOL_SURVEY DIALOGEX 0, 0, 340, 268
STYLE DS_SETFONT | DS_FIXEDSYS | WS_CAPTION | WS_SYSMENU | WS_POPUP | DS_MODALFRAME
CAPTION "Exercise"
FONT

The FONT keyword is followed by the characteristics of the font using the following syntax:

FONT size, name, weight, italic, charset

Here is an example:

IDD_SCHOOL_SURVEY DIALOGEX 0, 0, 340, 268
STYLE WS_CAPTION | WS_SYSMENU | WS_POPUP | DS_MODALFRAME
CAPTION "Exercise"
FONT 8, “MS Shell Dlg”, 400, 0, 0x1

If you want to manage the fonts, weights, and colors of the controls on the dialog box of an MFC application, you must do this programmatically.

The Background Color of a Dialog Box

The primary technique used to create a dialog is to derive a class from CDialog. To enhance it, Microsoft created a new class named CDialogEx. This class is derived from CDialog and it added only two characteristics: a color background and a picture background.

To give you the ability to paint a dialog box with a color of your choice, the CDialogEx class is equipped with the SetBackgroundColor() member function. Its syntax is:

void SetBackgroundColor(COLORREF color, BOOL bRepaint = TRUE);

The fist argument, which is required, specifies the color to apply to the body of the dialog box. The second argument is optional and it indicates whether the dialog box should be repainted with this member function is called. Here is an example:

BOOL CExampleDlg::OnInitDialog()
{
	CDialogEx::OnInitDialog();

	// Set the icon for this dialog.  The framework does this automatically
	//  when the application's main window is not a dialog
	SetIcon(m_hIcon, TRUE);			// Set big icon
	SetIcon(m_hIcon, FALSE);		// Set small icon

	// TODO: Add extra initialization here

	SetBackgroundColor(278394);

	return TRUE;  // return TRUE  unless you set the focus to a control
}

Background Color

The Background Picture of a Dialog Box

Instead of a color, you may want to paint a dialog box with a picture. To support this, the CDialogEx class provides the SetBackgroundImage() member function. It comes in two versions whose syntaxes are:

void SetBackgroundImage(
   HBITMAP hBitmap,
   BackgroundLocation location=BACKGR_TILE,
   BOOL bAutoDestroy=TRUE,
   BOOL bRepaint=TRUE 
);
BOOL SetBackgroundImage(
   UINT uiBmpResId,
   BackgroundLocation location=BACKGR_TILE,
   BOOL bRepaint=TRUE 
);

In both cases, the first argument is required and it holds the bitmap to use. The other arguments are optional.

The first version expects a handle to a BITMAP object. To use it, you must programmatically create a BITMAP or a CBitmap object and pass it to the function. The second version of this member function is probably the easier. Before using it, you can first import a bitmap (a picture with the .bmp extension), and give it an ID. Once the bitmap is ready, pass its ID to the member function. Here is an example:

BOOL CExample1Dlg::OnInitDialog()
{
	CDialogEx::OnInitDialog();

	// Set the icon for this dialog.  The framework does this automatically
	//  when the application's main window is not a dialog
	SetIcon(m_hIcon, TRUE);			// Set big icon
	SetIcon(m_hIcon, FALSE);		// Set small icon

	// TODO: Add extra initialization here

	SetBackgroundImage(IDB_CITY);

	return TRUE;  // return TRUE  unless you set the focus to a control
}

Background Picture

The Extended Styles of a Dialog Box

 

Introduction

Besides the regular Windows styles and the styles specific to a dialog box, Microsoft Windows provides some extended styles used to improve the appearance or the role of a dialog box on an application. To use these styles in the resource file, start a new line with the EXSTYLE keyword:

IDD_SCHOOL_SURVEY DIALOGEX 0, 0, 340, 268
STYLE WS_CAPTION | WS_SYSMENU | WS_POPUP | DS_MODALFRAME
EXSTYLE
CAPTION "Exercise"
FONT 8, "MS Shell Dlg", 400, 0, 0x1

A Dialog Box as a Tool Window

A tool window is a parent object mostly used to float, like a toolbar, on a frame of another window. It has a short title bar that displays its caption. It can neither be minimized nor maximized but it can be equipped with a circumstantial system menu:

To create a tool window, when designing the dialog box, set the Tool Window field to True in the Properties window. This can also be applied by adding the WS_EX_TOOLWINDOW extended style:

IDD_SCHOOL_SURVEY DIALOGEX 0, 0, 340, 268
STYLE WS_CAPTION | WS_SYSMENU | WS_POPUP | DS_MODALFRAME
EXSTYLE WS_EX_TOOLWINDOW
CAPTION "Exercise"
FONT 8, "MS Shell Dlg", 400, 0, 0x1

If you want the user to be able to resize the tool window by dragging its borders or corners, at design time, set its Border value to Resizing or create it with the WS_THICKFRAME style. If you do not want the user to be able to resize the tool window, at design time, set its Border to either Thin or Dialog Frame. In the resource file, you can also do this by creating it with the WS_CAPTION and WS_SYSMENU style.

A Dialog Box as an Application Window

As mentioned already, a window without the system Minimize button cannot be minimized. This, of course, is the same for a tool window. Also, by default, a tool window does not display a button on the task bar. If you are creating a window that will depend on a main window such as a frame, you should keep that default. If for any reason you want to display a button on the task bar for the tool window, add the WS_EX_APPWINDOW extended style.

Staying on Top

If you want your window to stay on top of another or other windows, at design time, set the Topmost field to True in the Properties window. If you are working from a resource file, add the WS_EX_TOPMOST extended style to it (if the window you are creating, such as a dialog box, is being added to a frame-based or a form-based application and you want that window to always be on top of its parent window, add the WS_VISIBLE style to it and display it using ShowWindow(SW_SHOW)).

A Client Edge for a Dialog Box

A window appears sunken when its body is sunk with regards to its borders. To create a dialog box with a sunken body, at design time, set its Client Edge field to True in the Properties window. If you are working from a resource file, add the WS_EX_CLIENTEDGE extended style.

A Window Edge for a Dialog Box

A window can have an inside body that appears to be raised with regards to its borders. To get such an edge, at design time, set the Window Edge field to True in the Properties window. If you are working from a resource file, add the WS_EX_WINDOWEDGE extended style.

A Static Edge for a Dialog Box

To create a window with a 3-dimensional thin border, at design time, set its Static Edge to True in the Properties window. This is the same as adding the WS_EX_STATICEDGE extended style.

A Palette Window

To create a dialog box that has a raised border and stays on top of others, which is equivalent to combining the WS_EX_WINDOWEDGE and the WS_EX_TOPMOST styles, in the resource file, add the WS_EX_PALETTEWINDOW value in the EXSTYLE line

An Extended Overlapped Window

A window is referred to as overlapped when it presents a combination of a sunk and a raised edge. Such a window can be created by either combining the WS_EX_CLIENTEDGE and the WS_EX_WINDOWEDGE styles or by using the WS_EX_OVERLAPPEDWINDOW.

A Window that Accepts Files

If you are creating a dialog box that will be accepting files dragged from other windows, at design time, set the Accept Files field to True in the Properties window. You can also do this in the resource file by adding the WS_EX_ACCEPTFILES extended style.

Finalizing a Dialog Box

 

Creating the Dialog Resource File

As mentioned already, a dialog box means nothing except for the objects it hosts. The objects are listed in a section that starts with the BEGIN and ends with the END keywords. Here is an example:

IDD_SCHOOL_SURVEY DIALOGEX 0, 0, 340, 268
STYLE WS_CAPTION | WS_SYSMENU | WS_POPUP | DS_MODALFRAME
EXSTYLE WS_EX_TOOLWINDOW
CAPTION "Exercise"
FONT 8, "MS Shell Dlg", 400, 0, 0x1
BEGIN
END

If you design a dialog box and it is the first object of your application, you must save it before using it. Even if you had decided to manually create the dialog box as a text file, you must save it before using it. In both cases, whether saving the dialog box designed or the text file, saving it results in creating a resource file. This file should have the .rc extension.

If your resource file is using some identifiers, which is the case for most or all objects you will use in your application, you must list them in a header file. This file is traditionally called Resource.h or resource.h. Each identifier must be listed using the following syntax:

#define Identifier Constant

When you save the resource file, Microsoft Visual C++ automatically creates the resource header file and names it resource.h

Creating a Class for the Dialog

After creating the resource for the dialog box, you must create a class that will be used to handle its assignment(s). To do this, you must derive a class from CDialog. You have various options. You can create a header file and a source file for the dialog box. In the header file of the dialog's class, define an enumeration whose only member is called IDD and initialize it with the identifier of the dialog box. Because the identifier is listed in the resource header file, you must include this resource header in the file in which you are using the dialog's identifier.

Instead of explicitly creating the header and source files, you can create a class for the dialog box. There are two ways you can do this:

  • While the dialog box has focus, on the main menu, you can click Project -> Add Class...
  • You can right-click the body of the dialog box and click Add Class...

This would open the MFC Add Class Wizard. In the Class Name text box, enter the intended name of the class. In the Base Class combo box, select either CDialog (the default) or another:

MFC Add Class Wizard

When you are ready, click Finish. A header file and a source file would be created for you. All the necessary ingredients of a dialog box class will be added in the code for you, including issues we will study in other lessons.

Practical LearningPractical Learning: Creating the Dialog's Class

  1. Click the Preparation.cpp tab to get to the file
  2. To create a class for the dialog box, open the Preparation.cpp file created earlier and add the following:
    #include <afxwin.h>
    #include <afxdlgs.h>
    #include "resource.h"
    
    class CPreparationApp : public CWinApp
    {
    public:
    	BOOL InitInstance();
    };
    
    class CPreparationDlg : public CDialog
    {
    public:
    	enum { IDD = IDD_PREPARATION_DLG };
    };
    
    BOOL CPreparationApp::InitInstance()
    {
    	return TRUE;
    }
    
    CPreparationApp theApp;
  3. Save All

Dialog Box Methods

A dialog box is based on the CDialog class. As seen above, when creating your dialog box, you can derive a class from CDialog. The CDialog class itself provides three constructors as follows:

CDialog();
CDialog(UINT nIDTemplate, CWnd* pParentWnd = NULL);
CDialog(LPCTSTR lpszTemplateName, CWnd* pParentWnd = NULL);

The default constructor, CDialog(), can be used to declare a variable whose behavior is not yet known or, for one reason or another, cannot yet be defined. When creating your class, you should also declare at least a default constructor.

The identifier of the dialog box, such as IDD_DIALOG1, can be used as the first argument, nIDTemplate, of a CDialog() constructor to create a dialog box from an existing resource.

If you are using a Win32 template to create your dialog box, pass the name of this template as a string to a CDialog() constructor, lpszTemplateName.

When implementing your default constructor, initialize the parent CDialog constructor with the IDD enumerator declared in your class. If your dialog box has an owner, specify it as the pParentWnd argument. If you set it to NULL, the application will be used as the dialog's parent.

If you dynamically create objects for your application using your dialog class, it is a good idea to also declare and define a destructor. This would be used to destroy such dynamic objects.

Most other methods of a dialog box depend on circumstances we have not yet reviewed

Practical LearningPractical Learning: Creating a Dialog Box

  1. Declare a default constructor and a destructor for your dialog class and implement them as follows (in the same file):
    class CPreparationDlg : public CDialog
    {
    public:
        enum { IDD = IDD_PREPARATION_DLG };
    
        CPreparationDlg();
        ~CPreparationDlg();
    };
    
    CPreparationDlg::CPreparationDlg()
       : CDialog(CPreparationDlg::IDD)
    {
    }
    
    CPreparationDlg::~CPreparationDlg()
    {
    }
  2. Before using the new class, declare a variable of it as follows:
    BOOL CPreparationApp::InitInstance()
    {
        CPreparationDlg Dlg;
    
        m_pMainWnd = &Dlg;
    
        return TRUE;
    }
  3. Save All

Modal Dialog Boxes

There are two types of dialog boxes: modal and modeless. A Modal dialog box is one that the user must first close in order to have access to any other framed window or dialog box of the same application.

One of the scenarios in which you use a dialog box is to create an application that is centered around a dialog box. In this case, if either there is no other window in your application or all the other windows depend on this central dialog box, it must be created as modal. Such an application is referred to as dialog-based

There are two main techniques you can use to create a dialog-based application: from scratch or using one of Visual C++ wizards. After creating a dialog resource and deriving a class from CDialog, you can declare a variable of your dialog class. To display your dialog box as modal, you can call the CDialog::DoModal() method in your CWinApp::InitInstance() method. Its syntax is:

virtual int DoModal();

This method by itself does nothing more than displaying a dialog box as modal. We will learn that you can use this method to find out how the user had closed such a dialog box.

Practical LearningPractical Learning: Displaying a Modal Dialog Box

  1. To display the dialog box as modal, in the InitInstance() event of your CWinApp derived class, call the DoModal() method using your dialog variable:
    #include <afxwin.h>
    #include <afxdlgs.h>
    #include "resource.h"
    
    class CPreparationApp : public CWinApp
    {
    public:
        BOOL InitInstance();
    };
    
    class CPreparationDlg : public CDialog
    {
    public:
        enum { IDD = IDD_PREPARATION_DLG };
    
        CPreparationDlg();
        ~CPreparationDlg();
    };
    
    CPreparationDlg::CPreparationDlg()
    	: CDialog(CPreparationDlg::IDD)
    {
    }
    
    CPreparationDlg::~CPreparationDlg()
    {
    }
    
    BOOL CPreparationApp::InitInstance()
    {
        CPreparationDlg Dlg;
    
        m_pMainWnd = &Dlg;
        Dlg.DoModal();
    
        return TRUE;
    }
    
    CPreparationApp theApp;
  2. Execute the application
     
    Dialog Box
  3. Close the dialog box and return to your programming environment
 
 
   
 

Previous Copyright © 2010 FunctionX, Inc. Next