Windows 2000 Style Wizards

Download demo project - 107 Kb

Download source files - 7 Kb

A Page from the Windows 2000 Style Wizard

Introduction

There are two main differences between the traditional MFC-CPropertySheet wizards and the Windows 2000 wizards:

1. The Windows 2000 wizard has a white background.
2. The "page" portion of the Windows 2000 wizard extends all the way to the edge of the dialog.

The Microsoft GUI designers are fickle. I remember developing for Windows 3.1 and going through a lot of trouble to make grey dialog backgrounds instead of white backgrounds. Now we go through a lot of trouble to make white backgrounds instead of grey ones.

This article presents two classes that allows you to create Windows 2000 style wizards relatively easily. Both classes are actually derived from CDialog, rather than CPropertySheet or CPropertyPage. The classes make use of some techniques presented in Zoran M.Todorovic's CodeProject article on stacked dialog boxes, however there are extensive code changes from Zoran's work.

Another big advantage of this method of creating wizards is that you have total control over the placement and text of the wizard buttons, and you can even add other control outside of the wizard pages.

The Classes

The CNewWizDialog Class

CNewWizDialog is derived from CDialog, but it is analagous to CPropertySheet when creating a standard MFC wizard. You create a dialog template with Back, Next, Cancel, and Finish buttons. You create a CNewWizDialog-derived class for your dialog resource.

The CNewWizPage Class

CNewWizPage is also derived from CDialog, however it is analagous to CPropertyPage when creating a standard MFC wizard. You create a dialog resource for each page of the wizard. You create a CNewWizPage-derived class for each wizard page.

CNewWizDialog and CNewWizPage have very similar class interfaces to CPropertySheet and CPropertyPage respectively, so it should not be too difficult to convert your existing wizards to windows 2000 style wizards.

Creating the Main Dialog

1. In the Visual C++ resource editor, create a dialog template for the main wizard window. Be sure to give it Next, Back, Finish, and Cancel buttons. Buttons should have the following identifiers to match the standard MFC wizard:

Cancel -- IDCANCEL
Finish -- ID_WIZFINISH
Back -- ID_WIZBACK
Next -- ID_WIZNEXT

Placing the Cancel and Finish Buttons

In the traditional MFC wizards, The Finish button and the Cancel button are in the same position. One is hidden when the other is shown. If you want to mimic that behavior in these classes, it is simple enough, but you will have to make changes to the CNewWizDialog::EnableFinish(BOOL bEnable) function to show are hide the proper buttons.

The Wizard Page Placeholder Control

You will also need to give your main wizard dialog a frame rectangle (picture) control to act as a placeholder. If you make the frame "etched", you will get a nicer appearance. Your dialog should look something like the one below.

2. Using ClassWizard, create a CDialog-derived class for your dialog resource. Change the base class from CDialog to CNewWizDialog. It is very important that you also change your message map to call the base class CNewWizDialog instead of CDialog as shown below. Otherwise, your wizards buttons will not work!

BEGIN_MESSAGE_MAP(CMasterDlg, CNewWizDialog)
	//{{AFX_MSG_MAP(CMasterDlg)

	//}}AFX_MSG_MAP

END_MESSAGE_MAP()

3. Override WM_INITDIALOG. Before calling the base class implementation of OnInitDialog, you must call CNewWizDialog::SetPlaceholderID() passing the control ID of the place holder rectangle as a parameter.

Be sure to call the base class implementation CNewWizDialog::OnInitDialog and not CDialog::OnInitDialog as show below:

BOOL CMasterDlg::OnInitDialog() 
{
	// you must call this function in OnInitDialog before you call the base class!

	SetPlaceholderID(IDC_SHEETRECT);

	// make sure to call the proper base class

	CNewWizDialog::OnInitDialog();
	
	return TRUE;  // return TRUE unless you set the focus to a control

	              // EXCEPTION: OCX Property Pages should return FALSE

}

Creating the Wizard Pages

Follow the these steps for each page in your wizard.

1. Create a dialog resource for the page. The dialog should have the following properties:

• Child Style
• No Border
• Not Visible
• Disabled

Place the desired contols on the dialog.

Note: You should make each wizard page the same size as the placeholder on your main wizard dialog.

2. Use ClassWizard to create a CDialog-derived class for the dialog resource. Add any handlers for controls that you may require.

3. Change the base class from CDialog to CNewWizPage. It is very important that you change the base classes for OnInitDialog, the constructor, and the message map.

BEGIN_MESSAGE_MAP(CSetupPage, CNewWizPage)
	//{{AFX_MSG_MAP(CSetupPage)

	//}}AFX_MSG_MAP

END_MESSAGE_MAP()

4. Override any of the following functions to add functionality and data validation to your wizard page:

// these functions behave the same as CPropertyPage

virtual void CNewWizPage::OnCancel();
virtual BOOL CNewWizPage::OnKillActive();
virtual void CNewWizPage::OnSetActive();
virtual BOOL CNewWizPage::OnQueryCancel( );
virtual LRESULT CNewWizPage::OnWizardBack();
virtual LRESULT CNewWizPage::OnWizardNext();
virtual BOOL CNewWizPage::OnWizardFinish();

Putting it All Together

Once you have created all of your dialog classes as described above, you put the wizard together just as you would with a standard MFC CPropertySheet-based wizard. The only difference is that you must pass the ID of each pages's dialog resource to CNewWizDialog::AddPage().

CMasterDlg Dlg(this);
	
CSetupPage SetupPage;
CHardwarePage HardwarePage;
CPrinterPage PrinterPage;
	

Dlg.AddPage(&HardwarePage, CHardwarePage::IDD);
Dlg.AddPage(&SetupPage, CSetupPage::IDD);
Dlg.AddPage(&PrinterPage, CPrinterPage::IDD);

if (Dlg.DoModal() == ID_WIZFINISH)
{
	AfxMessageBox("Finished Wizard");
}
else
{
	AfxMessageBox("Cancelled Wizard");
}

Implementing the White Background

One of the new features in the Windows 2000 style wizards is a white background. This is pretty easy to implement, and it is also easy to disable if you do not like it.

1. In the declaration for CNewWizPage, we give the page it's own brush.

class CNewWizPage : public CDialog
{

[snip]

protected:
	CBrush m_Brush;

[snip]

2. Override WM_INITDIALOG and create a white brush.

BOOL CNewWizPage::OnInitDialog() 
{
	CDialog::OnInitDialog();
	
	// create the white brush for the background

	m_Brush.CreateSolidBrush(RGB(255, 255, 255));

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

	              // EXCEPTION: OCX Property Pages should return FALSE

}

3. Override the WM_CTLCOLOR message, and return the white brush and set text background colors as appropriate.

HBRUSH CNewWizPage::OnCtlColor(CDC* pDC, CWnd* pWnd, UINT nCtlColor) 
{
	HBRUSH hbr = CDialog::OnCtlColor(pDC, pWnd, nCtlColor);
	
	switch (nCtlColor)
	{	   
		case CTLCOLOR_STATIC:
			pDC->SetTextColor(RGB(0, 0, 0));
			pDC->SetBkColor(RGB(255,255,255));
		case CTLCOLOR_EDIT:
			pDC->SetTextColor(RGB(0, 0, 0));
			pDC->SetBkColor(RGB(255,255,255));
		case CTLCOLOR_LISTBOX:
			pDC->SetTextColor(RGB(0, 0, 0));
			pDC->SetBkColor(RGB(255,255,255));
		case CTLCOLOR_SCROLLBAR:
			pDC->SetTextColor(RGB(0, 0, 0));
			pDC->SetBkColor(RGB(255,255,255));
		case CTLCOLOR_BTN:
			pDC->SetTextColor(RGB(0, 0, 0));
			pDC->SetBkColor(RGB(255,255,255));
		case CTLCOLOR_DLG:	    
			return m_Brush;
	}	
	
	// TODO: Return a different brush if the default is not desired

	return m_Brush;
}

Potential Problems

Many of the data validation functions for CNewWizPage return FALSE if the dialog data is not validated as desired. I did not spend a lot of time checking to make sure the classes worked as required when FALSE is returned from these functions. If you are doing a lot of data validation, be sure to test your wizard with invalid data so that it behaves as desired.