In most other cases, a property page appears in a group with other pages. It functions like a group of pieces of paper placed on top of each other. Each piece is represented by a tab that allows the user to identify it:

To use a property page, the user clicks the header, also called tab, of the desired page. This brings that page up and sends the other(s) in the background:

If the user needs access to another page, he or she can click the desired tab, which would bring that page in front and send the previously selected page to the back.

The pages are grouped and hosted by an object called a property sheet. The property pages of a property sheet are simply used to carry or hold other controls. The major idea of using a property sheet is its ability to have many controls available in a relatively smaller area.

There are two types of property sheets: modal and modeless. A modeless property sheet does not display buttons. A modal property sheet is equipped with command buttons that allow the user to make a decision after selecting items on the pages or changing the values of the page's controls. By default, after creating a property sheet, it is equipped with the OK, the Cancel, and the Apply buttons.

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++. In the right list, click MFC Application
4. Change the Name to Algebra1
5. Click OK
6. In the first page of the MFC Application Wizard, read the text and click Next
7. In the second page of the wizard, click Dialog Based
8. Click Next
9. In the third page, click About Box to remove its check mark and click Next
10. In the fourth page of the wizard, click Next
11. In the fifth page of the wizard and in the General Classes list, click CAlgebra1Dlg
12. In the Class Name, change the name of the class to CQuadrilateralDlg
13. Change the .h File to QuadrilateralDlg.h
14. Change the .cpp File to QuadrilateralDlg.cpp
     
    
15. Click Finish
16. On the dialog box, click the TODO line and press Delete
17. While the OK button is selected, press Delete
18. Also delete the Cancel button
19. If the Resource View is not visible, on the main menu, click View -> Other Windows -> Resource View.
    In the Resource View, right-click Algebra1.rc and click Add Resource...
20. In the Add Resource dialog box, click Bitmap
     
    
21. Click Import...
22. From the resources that accompany these lessons, select quadrilateral.bmp
23. Click Open
24. If the picture displays, close it.
    In the Resource View, expand the Bitmap node and click IDB object
25. In the Properties window, click ID, type IDB_QUADRILATERAL and press Enter
26. In the same way, import the circular.bmp and change its ID to IDB_CIRCULAR
27. Import the dimensional.bmp and change its ID to IDB_DIMENSIONAL3
28. In the Toolbox, click the Picture Control button and click the dialog box
29. In the Properties window, click Type and select Bitmap
30. Click Image. Then click the arrow of its combo box and select IDB_QUADRILATERAL and heighten the dialog box so the bitmap would display completely
     
    

As mentioned already, a property is made of property pages. There are many steps you must follow to create a property sheet and its property pages.

A property page is an object or type CPropertyPage, which is a class derived from CDialog:

class CPropertyPage : public CDialog

In reality, you should start by creating a dialog box for each property page. Set the size as you wish. If you are creating many property pages, their dialog boxes don't have to have the same size (but it is better if they do). If they have different sizes, when the property sheet receives them, it will apply the largest width of one of the dialog boxes and the highest height of the property pages to apply it to the other property pages.

Besides the size of the dialog box, each must have the following properties (set in the Properties window):

• Border: Thin
• Disabled: True
• Style: Child
• Title Bar: True

Besides these, set the caption to the string you want to display on the tab.

Instead of creating te dialog box of a property page from scratch, Microsoft Visual C++ provides already-formatted objects ready to be designed. To use one of them, display the Add Resource dialog box and expand the Dialog node. Under Dialog, select either IDD_PROPPAGE_LARGE, IDD_PROPPAGE_MEDIUM, or IDD_PROPPAGE_SMALL:

As their names indicate, the sizes of the dialog boxes depend on the option. After selecting the desired option, click New. This would create a dialog box with the necessary options already set. You can then design the dialog box as you see fit.

After designing the dialog box, create its associated dialog box. When doing this, set the base class to CPropertyPage.

1. Click the body of the dialog boxe to make sure it has focus.
   In the Properties window, change the following characteristics:
   Border: Thin
   Caption: Quadrilateral
   Disabled: True
   ID: IDD_QUADRILATERAL_DLG
   Style: Child
2. In the Solution Explorer, expand the project and the Header Files node. Double-click QuadrilateralDlg.h
3. Change the document as follows:

   // QuadrilateralDlg.h : header file
   //
   
   #pragma once
   
   // CQuadrilateralDlg dialog
   class CQuadrilateralDlg : public CPropertyPage
   {
   // Construction
   public:
   	CQuadrilateralDlg(CWnd* pParent = NULL); // standard constructor
   
   // Dialog Data
   	enum { IDD = IDD_QUADRILATERAL_DLG };
   
   	protected:
   	virtual void DoDataExchange(CDataExchange* pDX); // DDX/DDV support
   
   // Implementation
   protected:
   	HICON m_hIcon;
   
   	// Generated message map functions
   	virtual BOOL OnInitDialog();
   	afx_msg void OnPaint();
   	afx_msg HCURSOR OnQueryDragIcon();
   	DECLARE_MESSAGE_MAP()
   };

4. Access the QuadrilateralDlg.cpp file and change it as follows:

   // QuadrilateralDlg.cpp : implementation file
   //
   
   #include "stdafx.h"
   #include "Algebra1.h"
   #include "QuadrilateralDlg.h"
   #include "afxdialogex.h"
   
   #ifdef _DEBUG
   #define new DEBUG_NEW
   #endif
   
   // CQuadrilateralDlg dialog
   
   CQuadrilateralDlg::CQuadrilateralDlg(CWnd* pParent /*=NULL*/)
   	: CPropertyPage(CQuadrilateralDlg::IDD)
   {
   	m_hIcon = AfxGetApp()->LoadIcon(IDR_MAINFRAME);
   }
   
   void CQuadrilateralDlg::DoDataExchange(CDataExchange* pDX)
   {
   	CPropertyPage::DoDataExchange(pDX);
   }
   
   BEGIN_MESSAGE_MAP(CQuadrilateralDlg, CPropertyPage)
   	ON_WM_PAINT()
   	ON_WM_QUERYDRAGICON()
   END_MESSAGE_MAP()
   
   // CQuadrilateralDlg message handlers
   
   BOOL CQuadrilateralDlg::OnInitDialog()
   {
   	CPropertyPage::OnInitDialog();
   
   	SetIcon(m_hIcon, TRUE);		// Set big icon
   	SetIcon(m_hIcon, FALSE);	// Set small icon
   
   	// TODO: Add extra initialization here
   
   	return TRUE;  // return TRUE  unless you set the focus to a control
   }
   
   void CQuadrilateralDlg::OnPaint()
   {
       if (IsIconic())
       {
   	CPaintDC dc(this); // device context for painting
   
   	SendMessage(WM_ICONERASEBKGND,
   		    reinterpret_cast<WPARAM>(dc.GetSafeHdc()), 0);
   
   	// Center icon in client rectangle
   	int cxIcon = GetSystemMetrics(SM_CXICON);
   	int cyIcon = GetSystemMetrics(SM_CYICON);
   	CRect rect;
   	GetClientRect(&rect);
   	int x = (rect.Width() - cxIcon + 1) / 2;
   	int y = (rect.Height() - cyIcon + 1) / 2;
   
   	// Draw the icon
   	dc.DrawIcon(x, y, m_hIcon);
       }
       else
       {
   	CPropertyPage::OnPaint();
       }
   }
   
   HCURSOR CQuadrilateralDlg::OnQueryDragIcon()
   {
       return static_cast<HCURSOR>(m_hIcon);
   }

5. In the Resource View, expand the name of the project. Expand Algebra1.rc. Expand Dialog.
   Right-click Dialog and click Insert Dialog
6. On the new dialog box, click OK and press Delete
7. As the Cancel button is selected, press Delete
8. In the Properties window, change the following characteristics of the dialog box:
   Border: Thin
   Caption: Circular Shapes
   Disabled: True
   ID: IDD_CIRCULAR_DLG
   Style: Child
9. Add a picture control and set its bitmap to IDB_QUADRILATERAL
    
   
10. In the Resource View, right-click the name of the project and click Add Resource...
11. Click Bitmap and click Import...
12. Select circular.bmp and click Open
13. To create a class for the dialog box, right-click the body of the dialog box and click Add Class...
14. Set the Class Name to CCircularDlg
15. Set the Base Class to CPropertyPage
     
    
16. Click Finish
17. To create a new property page, in the Resource View, right-click Dialog and click Add Resource...
18. In the Add Resource dialog box, expand Dialog and click IDD_PROPPAGE_LARGE
19. Click New
20. In the Properties window, change the following characteristics:
    Caption: 3-Dimensional
    ID: IDD_DIMENSION3_DLG
21. Add a picture control and set its bitmap to IDB_QUADRILATERAL
     
    
22. Right-click the body of the dialog box and click Add Class...
23. Set the Class Name to CDiamension3Dlg
24. Set the Base Class to CPropertyPage
25. Click Finish

A property sheet is the host of property pages. A property sheet is based on the CPropertySheet class, which is derived from CWnd:

class CPropertySheet : public CWnd

To get a property sheet, create a class that is derived from CPropertySheet. To associate each property page to the property sheet, you must call the AddPage() member function of the CPropertySheet class. Its syntax is:

void AddPage(CPropertyPage *pPage);

You can call this member function where the property sheet is created. This could be in the constructor of the CPropertySheet-derived class.

1. To create a new class, on the main menu, click Project -> Add Class...
2. Click MFC Class and click Add
3. Set the Class Name to CAlgebraSheet
4. Set the Base Class to CPropertySheet
    
   
5. Click Finish
6. Change the AlgebraSheet.h document as follows:

   #pragma once
   
   #include "QuadrilateralDlg.h"
   #include "CircularDlg.h"
   #include "Diamension3Dlg.h"
   
   // CAlgebraSheet
   
   class CAlgebraSheet : public CPropertySheet
   {
       DECLARE_DYNAMIC(CAlgebraSheet)
   
   public:
       CAlgebraSheet(UINT nIDCaption,
       		  CWnd* pParentWnd = NULL,
       		  UINT iSelectPage = 0);
       CAlgebraSheet(LPCTSTR pszCaption,
        		  CWnd* pParentWnd = NULL,
         		  UINT iSelectPage = 0);
       virtual ~CAlgebraSheet();
   
   private:
       CQuadrilateralDlg dlgQuadrilateral;
       CCircularDlg      dlgCircular;
       CDiamension3Dlg   dlgDiamension3;
   
   protected:
       DECLARE_MESSAGE_MAP()
   };

7. Access the RepairOrderSheet.dpp file and change the constructor that takes a string as its first argument as follows:

   CAlgebraSheet::CAlgebraSheet(LPCTSTR pszCaption,
   			     CWnd* pParentWnd,
   			     UINT iSelectPage)
   	:CPropertySheet(pszCaption, pParentWnd, iSelectPage)
   {
   	this->AddPage(&dlgQuadrilateral);
   	this->AddPage(&dlgCircular);
   	this->AddPage(&dlgDiamension3);
   }

A property sheet is primarily a dialog box. As such, to display it, you can simply call the DoModal() member function of the CDialog class.

1. In the Solution Explorer, double-click Algebra1.cpp
2. Change the file as follows:

   // Algebra1.cpp : Defines the class behaviors for the application.
   //
   
   #include "stdafx.h"
   #include "Algebra1.h"
   #include "QuadrilateralDlg.h"
   #include "AlgebraSheet.h"
   
   #ifdef _DEBUG
   #define new DEBUG_NEW
   #endif
   
   
   . . . No Change
   
   BOOL CAlgebra1App::InitInstance()
   {
   	// InitCommonControlsEx() is required on Windows XP if an application
   	// manifest specifies use of ComCtl32.dll version 6 or later to enable
   	// visual styles.  Otherwise, any window creation will fail.
   	INITCOMMONCONTROLSEX InitCtrls;
   	InitCtrls.dwSize = sizeof(InitCtrls);
   	// Set this to include all the common control classes you want to use
   	// in your application.
   	InitCtrls.dwICC = ICC_WIN95_CLASSES;
   	InitCommonControlsEx(&InitCtrls);
   
   	CWinApp::InitInstance();
   
   	AfxEnableControlContainer();
   
   	// Create the shell manager, in case the dialog contains
   	// any shell tree view or shell list view controls.
   	CShellManager *pShellManager = new CShellManager;
   
   	// Standard initialization
   	// If you are not using these features and wish to reduce the size
   	// of your final executable, you should remove from the following
   	// the specific initialization routines you do not need
   	// Change the registry key under which our settings are stored
   	// TODO: You should modify this string to be something appropriate
   	// such as the name of your company or organization
   	SetRegistryKey(_T("Local AppWizard-Generated Applications"));
   
   	// CQuadrilateralDlg dlg;
   	CAlgebraSheet dlg(L"Elementary Algebra");
   
   	m_pMainWnd = &dlg;
   	
   	INT_PTR nResponse = dlg.DoModal();
   	if (nResponse == IDOK)
   	{
   		// TODO: Place code here to handle when the dialog is
   		//  dismissed with OK
   	}
   	else if (nResponse == IDCANCEL)
   	{
   		// TODO: Place code here to handle when the dialog is
   		//  dismissed with Cancel
   	}
   
   	// Delete the shell manager created above.
   	if (pShellManager != NULL)
   	{
   		delete pShellManager;
   	}
   
   	// Since the dialog has been closed, return FALSE so that we exit the
   	//  application, rather than start the application's message pump.
   	return FALSE;
   }

3. To execute the application, press F5
    
   
4. Close the dialog box and return to your programming environment