Home

MFC Property Sheets and Property Pages

   

Introduction to the MFC Property Sheet

 

Description

The classic property sheets have been part of the Microsoft Windows operating system for a long time. Applications functionalities and requirements have seen an increase in the last few years with new aesthetic features. To keep the trend, the new MFC brought new controls. One of them is a new type of property sheet.

The MFC property sheet adds new behaviors to the classic property sheet in the ways the tabs display or their contents are accessed.

Practical LearningPractical Learning: Introducing MFC Property Sheets

  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 LifePlanning
  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 Next
  10. In the fourth page of the wizard, click Next
  11. In the fifth page of the wizard, click Finish
  12. On the dialog box, click the TODO line and press Delete

Creating an MFC Property Page

The MFC property sheet and its property page(s) are primarily created like the classic property sheet. In fact, a property page is created as a dialog box with the following characteristics:

  • Border: Thin
  • Caption: Set the string you want to display on the tab (or button)
  • Disabled: True
  • Style: Child
  • Title Bar: True

An MFC property page is based on a class named CMFCPropertyPage that is derived from CPropertyPage. Therefore, to create an MFC property page:

  1. Create a dialog box resource with the characteristics of a property page
  2. Add a class to the dialog box. The class must be derived from CMFCPropertyPage
  3. Optionally add the functionalities (controls, events, etc) you want the property page to execute

Practical LearningPractical Learning: Creating MFC Property Pages

  1. On the main menu, click Project -> Class Wizard...
  2. Click Add Class
  3. Set the Class Name to CComputerScience
  4. Set the Base Class to CMFCPropertyPage
     
    MFC Add Class Wizard
  5. Click Finish
  6. Click Add Class
  7. Set the Class Name to CInformationTechnology
  8. Set the Base Class to CMFCPropertyPage
  9. Click Finish
  10. Click Add Class
  11. Set the Class Name to CHistory
  12. Set the Base Class to CMFCPropertyPage
  13. Click Finish
  14. Click Add Class
  15. Set the Class Name to CCulinaryServices
  16. Set the Base Class to CMFCPropertyPage
  17. Click Finish
  18. Click Add Class
  19. Set the Class Name to CCareers
  20. Set the Base Class to CMFCPropertyPage
  21. Click Finish
  22. Click OK
  23. In the Resource View, right-click LifePlanning and click Add Resource...
  24. In the Add Resource dialog box, expand the Dialog node
  25. Click IDD_PROPPAGE_LARGE
  26. Click New
  27. In the Properties window, change the following characteristics:
    Caption: Computer Science
    ID: IDD_COMPUTERSCIENCE
  28. On the Toolbox click Button and click the dialog box
  29. Access the ComputerScience.h file and change it as follows:
    #pragma once
    
    // CComputerScience
    
    class CComputerScience : public CMFCPropertyPage
    {
    	DECLARE_DYNAMIC(CComputerScience)
    
    // Dialog Data
    	enum { IDD = IDD_COMPUTERSCIENCE };
    
    public:
    	CComputerScience();
    	virtual ~CComputerScience();
    
    protected:
    	DECLARE_MESSAGE_MAP()
    };
  30. In the Resource View, right-click LifePlanning and click Add Resource...
  31. In the Add Resource dialog box, expand the Dialog node
  32. Expand Dialog and click IDD_PROPPAGE_LARGE
  33. Click New
  34. In the Properties window, change the following characteristics:
    Caption: Information Technology
    ID: IDD_INFORMATIONTECHNOLOGY
  35. On the Toolbox click Check Box and click the dialog box
  36. Access the InformationTechnology.h file and change it as follows:
    #pragma once
    
    // CInformationTechnology
    
    class CInformationTechnology : public CMFCPropertyPage
    {
    	DECLARE_DYNAMIC(CInformationTechnology)
    
    // Dialog Data
    	enum { IDD = IDD_INFORMATIONTECHNOLOGY };
    
    public:
    	CInformationTechnology();
    	virtual ~CInformationTechnology();
    
    protected:
    	DECLARE_MESSAGE_MAP()
    };
  37. In the Resource View, right-click LifePlanning.rc and click Add Resource...
  38. In the Add Resource dialog box, expand the Dialog node
  39. Expand Dialog and double-click IDD_PROPPAGE_SMALL
  40. In the Properties window, change the following characteristics:
    Caption: History
    ID: IDD_HISTORY
  41. On the Toolbox click Edit Control and click the dialog box
  42. Access the History.h file and change it as follows:
    #pragma once
    
    // CHistory
    
    class CHistory : public CMFCPropertyPage
    {
    	DECLARE_DYNAMIC(CHistory)
    
    // Dialog Data
    	enum { IDD = IDD_HISTORY };
    
    public:
    	CHistory();
    	virtual ~CHistory();
    
    protected:
    	DECLARE_MESSAGE_MAP()
    };
  43. In the Resource View, right-click LifePlanning and click Add Resource...
  44. In the Add Resource dialog box, expand the Dialog node
  45. Expand Dialog and double-click IDD_PROPPAGE_MEDIUM
  46. In the Properties window, change the following characteristics:
    Caption: Culinary Services
    ID: IDD_CULINARYSERVICES
  47. On the Toolbox click Picture Control and click the dialog box
  48. Access the CulinaryServices.h file and change it as follows:
    #pragma once
    
    // CCulinaryServices
    
    class CCulinaryServices : public CMFCPropertyPage
    {
    	DECLARE_DYNAMIC(CCulinaryServices)
    
    // Dialog Data
    	enum { IDD = IDD_CULINARYSERVICES };
    
    public:
    	CCulinaryServices();
    	virtual ~CCulinaryServices();
    
    protected:
    	DECLARE_MESSAGE_MAP()
    };
  49. In the Resource View, right-click LifePlanning and click Add Resource...
  50. In the Add Resource dialog box, expand the Dialog node
  51. Expand Dialog and double-click IDD_PROPPAGE_LARGE
  52. In the Properties window, change the following characteristics:
    Caption: Careers
    ID: IDD_CAREERS
  53. On the Toolbox click Static Text and click the dialog box
  54. Access the Careers.h file and change it as follows:
    #pragma once
    
    // CCareers
    
    class CCareers : public CMFCPropertyPage
    {
    	DECLARE_DYNAMIC(CCareers)
    
    // Dialog Data
    	enum { IDD = IDD_CAREERS };
    
    public:
    	CCareers();
    	virtual ~CCareers();
    
    protected:
    	DECLARE_MESSAGE_MAP()
    };

Creating an MFC Property Sheet

An MFC property sheet is primarily a normal property sheet. In fact, the class used for it is named CMFCPropertySheet and it is directly derived from CPropertySheet. Therefore, to create an MFC property sheet, create an MFC class based on CMFCPropertySheet.

To specify the pages of the property sheet, in the constructor of your property sheet class or just before displaying the property sheet, call the CPropertySheet::AddPage() method for each property page.

To display the property sheet, call the CDialog::DoModal() member function it inherits from its parent.

Practical LearningPractical Learning: Creating an MFC Property Sheet

  1. On the main menu, click Project -> Class Wizard...
  2. Click Add Class
  3. Set the Class Name to CLifePlanningSheet
  4. Set the Base Class to CMFCPropertySheet
  5. Click Finish
  6. Click OK

Characteristics of an MFC Property Sheet

 

Characteristics of MFC Property Pages

The MFC property page gets most of its functionality from its parent: the Win32's property page that is implemented through the CPropertyPage. Still, the CMFCPropertyPage has its own constructor that is different from its parent class. The constructor comes in two versions whose syntaxes are:

CMFCPropertyPage(UINT nIDTemplate, UINT nIDCaption=0);
CMFCPropertyPage(LPCTSTR lpszTemplateName, UINT nIDCaption=0);

The first argument, which is also the only one required, is either the resource ID of the dialog box or the name of the template that holds the characteristics of the dialog box template. The second argument, which is optional, is the string ID of the caption.

Practical LearningPractical Learning: Configuring MFC Property Pages

  1. Access the ComputerScience.cpp file and change the constructor as follows:
    // ComputerScience.cpp : implementation file
    //
    
    #include "stdafx.h"
    #include "LifePlanning.h"
    #include "ComputerScience.h"
    
    // CComputerScience
    
    IMPLEMENT_DYNAMIC(CComputerScience, CMFCPropertyPage)
    
    CComputerScience::CComputerScience()
    	: CMFCPropertyPage(CComputerScience::IDD)
    {
    
    }
    
    CComputerScience::~CComputerScience()
    {
    }
    
    BEGIN_MESSAGE_MAP(CComputerScience, CMFCPropertyPage)
    END_MESSAGE_MAP()
    
    // CComputerScience message handlers
  2. Access the InformationTechnology.cpp file and change the constructor as follows:
    IMPLEMENT_DYNAMIC(CInformationTechnology, CMFCPropertyPage)
    
    CInformationTechnology::CInformationTechnology()
    	: CMFCPropertyPage(CInformationTechnology::IDD)
    {
    
    }
  3. Access the History.cpp file and change the constructor as follows:
    CHistory::CHistory()
    	: CMFCPropertyPage(CHistory::IDD)
    {
    
    }
  4. Access the CulinaryServices.cpp file and change the constructor as follows:
    CCulinaryServices::CCulinaryServices()
    	: CMFCPropertyPage(CCulinaryServices::IDD)
    {
    
    }
  5. Access the Careers.h file and change it as follows:
    CCareers::CCareers()
    	: CMFCPropertyPage(CCareers::IDD)
    {
    
    }

Introduction to the Looks of an MFC Property Sheet

The most fundamental difference between a classic property sheet and an MFC property sheet is on how the latter displays its property pages. To allow the options, the CMFCPropertySheet class is equipped with the SetLook() member function. Its syntax is:

void SetLook(PropSheetLook look, int nNavControlWidth = 100);

Only the first argument is required and it specifies how the property pages should be accessed. To set the option, call the CMFCPropertySheet enumeration and access the desired member (next sections). The second argument is optional and it doesn't apply to all options (we will come back to it in the next sections).

Practical LearningPractical Learning: Introducing the Look of an MFC Property Sheet

  • Access the LifePlanningSheet.h file and change it as follows:
    #pragma once
    
    #include "ComputerScience.h"
    #include "InformationTechnology.h"
    #include "History.h"
    #include "CulinaryServices.h"
    #include "Careers.h"
    
    // CLifePlanningSheet
    
    class CLifePlanningSheet : public CMFCPropertySheet
    {
        DECLARE_DYNAMIC(CLifePlanningSheet)
    
    public:
        CLifePlanningSheet();
        virtual ~CLifePlanningSheet();
    
    private:
        CComputerScience		pgeComputerScience;
        CInformationTechnology	pgeInformationTechnology;
        CHistory			pgeHistory;
        CCulinaryServices		pgeCulinaryServices;
        CCareers			pgeCareers;
    
    protected:
        DECLARE_MESSAGE_MAP()
    };

The Classic Look of an MFC Property Sheet

 As mentioned already, an MFC property is primarily a Win32 property sheet. It you just want to create a normal property sheet, before it can display, simply call its AddPage() member function and add the desired property pages. Here are examples:

CExerciseSheet::CExerciseSheet()
{
    AddPage(&pgeFirst);
    AddPage(&pgeSecond);
    AddPage(&pgeThird);
}

In the same way, to create the classic property sheet, call the CMFCPropertySheet::SetLook() member function and specofy the PropSheetLook_Tabs option. Here are examples:

CExerciseSheet::CExerciseSheet()
{
    AddPage(&pgeFirst);
    AddPage(&pgeSecond);
    AddPage(&pgeThird);
    
    SetLook(CMFCPropertySheet::PropSheetLook_Tabs); 
}

The result would be the same.

Practical LearningPractical Learning: Setting the Classic Look

  1. Access the LifePlanningSheet.cpp file and change it as follows:
    CLifePlanningSheet::CLifePlanningSheet()
    {
        AddPage(&pgeComputerScience);
        AddPage(&pgeInformationTechnology);
        SetLook(CMFCPropertySheet::PropSheetLook_Tabs);
    }
  2. Display the first dialog box and add a button to it
  3. Using the Properties window, change its characteristics as follows:
    Caption: Plan Your Life...
    ID: IDC_PLAN_YOUR_LIFE
  4. Double-click the button
  5. Change the file as follows:
    // LifePlanningDlg.cpp : implementation file
    //
    
    #include "stdafx.h"
    #include "LifePlanning.h"
    #include "LifePlanningDlg.h"
    #include "afxdialogex.h"
    #include "LifePlanningSheet.h"
    
    #ifdef _DEBUG
    #define new DEBUG_NEW
    #endif
    
    // CLifePlanningDlg dialog
    
    . . . No Change
    
    void CLifePlanningDlg::OnBnClickedPlanYourLife()
    {
        // TODO: Add your control notification handler code here
        CLifePlanningSheet dlgLifePlanning;
    
        dlgLifePlanning.SetTitle(L"Career Planning and Life Achievement");
        dlgLifePlanning.DoModal();
    }
  6. To execute, press F5
  7. Click the Plan Your Life...
     
    Career Planning and Life Achievement
  8. Close the property sheet
  9. Close the dialog box and return to your programming environment

The One-Note Look of an MFC Property Sheet

To make the tabs more appealling, you can make them look like those of the Microsoft OneNote application. To get this option, call the SetLook() member function and apply the PropSheetLook_OneNoteTabs option.

Practical LearningPractical Learning: Setting the OneNote Look

  1. Access the LifePlanningSheet.cpp file and change it as follows:
    CLifePlanningSheet::CLifePlanningSheet()
    {
        // 1. Classic property sheet
    /*  AddPage(&pgeComputerScience);
        AddPage(&pgeInformationTechnology);
        SetLook(CMFCPropertySheet::PropSheetLook_Tabs); */
    	
        // 2. Microsoft OneNote tabs
        AddPage(&pgeComputerScience);
        AddPage(&pgeInformationTechnology);
        AddPage(&pgeHistory);
        AddPage(&pgeCulinaryServices);
        SetLook(CMFCPropertySheet::PropSheetLook_OneNoteTabs);
    }
  2. To execute, press F5
  3. Click the Plan Your Life...
  4. Click the Culinary Services tab
  5. Click History
     
    Career Planning and Life Achievement
  6. Close the property sheet
  7. Close the dialog box and return to your programming environment

The Outlook Bar on an MFC Property Sheet

Instead of displaying tabs in the top section of a property sheet, you can create a vertical bar on the left side of the dialog box and make it display a button for each tab. This is popularly referred to as the Outlook or Outlook Bar look of an application. In this case, the property sheet would be divided in two sections: a frame on the left and the right area used to display the property pages.

Remember that the syntax of the CMFCPropertySheet::SetLook() member function is:

void SetLook(PropSheetLook look, int nNavControlWidth = 100);

The second argument specifies the width of the left frame. The default with is 100 pixels, which applies if you don't pass the second argument. To specify your desired width, pass the second argument.

If you are familiar with Microsoft Outlook bar, you may know that each button displays a picture on top. Before considering getting the Outlook bar look, you should (must) first create one ore more icons, an icon for each button that would lead to the corresponding property page. You can create the list of icons as a long bitmap resource. After creating the physical bitmap, declare a variable of type CImageList and call its Create() member function to initialize it. Pass the bitmap resource to it.

To let you get the Outlook bar, the CMFCPropertySheet is equipped with the SetIconsList() member function that is overloaded with two vesions. Their syntaxes are:

void SetIconsList(HIMAGELIST hIcons);
BOOL SetIconsList(UINT uiImageListResID,
   		  int cx,
   		  COLORREF clrTransparent=RGB(255,0,255));

The first version tabkes a handle to a Win32's image list as argument.

The second version takes two required arguments and an optional argument. The first argument is the ID of an image list resource. The second argument specifies the width or each picture in the image list. The third argument optionally specifies the level or transparency of hte pictures.

To get the Outlook bar, call the SetLook() member function and apply the PropSheetLook_OutlookBar option.

 
 
 

Practical LearningPractical Learning: Using the Outlook Bar

  1. In the Resource View, right-click LifePlanning -> Add -> Resource...
  2. In the Add Resource dialog box, click Bitmap and click New
  3. In the Properties window, change the following values:
    Color: 24 bit
    Height: 32
    Width: 96
  4. In the Resource View, click IDB_BITMAP1
  5. In the Properties window, click ID, type IDB_OUTLOOK and press Enter
  6. Design the bitmap as follows:
     
    Career Planning and Life Achievement
  7. Access the LifePlanningSheet.h file and declare a CImageList variable named m_OutlookImages:
    #pragma once
    
    #include "ComputerScience.h"
    #include "InformationTechnology.h"
    #include "History.h"
    #include "CulinaryServices.h"
    #include "Careers.h"
    
    // CLifePlanningSheet
    
    class CLifePlanningSheet : public CMFCPropertySheet
    {
        DECLARE_DYNAMIC(CLifePlanningSheet)
    
    public:
        CLifePlanningSheet();
        virtual ~CLifePlanningSheet();
    
    private:
        CComputerScience	pgeComputerScience;
        CInformationTechnology	pgeInformationTechnology;
        CHistory		pgeHistory;
        CCulinaryServices	pgeCulinaryServices;
        CCareers		pgeCareers;
    
        CImageList m_OutlookImages;
    
    protected:
        DECLARE_MESSAGE_MAP()
    };
  8. Access the LifePlanningSheet.cpp file and change it as follows:
    CLifePlanningSheet::CLifePlanningSheet()
    {
        // 1. Classic property sheet
    /*  AddPage(&pgeComputerScience);
        AddPage(&pgeInformationTechnology);
        SetLook(CMFCPropertySheet::PropSheetLook_Tabs); */
    	
        // 2. Microsoft OneNote tabs
    /*  AddPage(&pgeComputerScience);
        AddPage(&pgeInformationTechnology);
        AddPage(&pgeHistory);
        AddPage(&pgeCulinaryServices);
        SetLook(CMFCPropertySheet::PropSheetLook_OneNoteTabs); */
    	
        // 3. Outlook Bar
        AddPage(&pgeComputerScience);
        AddPage(&pgeHistory);
        AddPage(&pgeCulinaryServices);
        m_OutlookImages.Create(IDB_OUTLOOK, 32, 1, RGB(128, 128, 128));
        SetIconsList(m_OutlookImages);
        SetLook(CMFCPropertySheet::PropSheetLook_OutlookBar);
    }
  9. To execute, press F5
  10. Click the Culinary Services icon
  11. Position the mouse on Computer Science
     
    Career Planning and Life Achievement
  12. Close the property sheet
  13. Close the dialog box and return to your programming environment

Using a List of Labels

Instead of using tabs or buttons, you can create strings that each would behave like a link. The user can create a label to access a property page. To get this behavior, call the SetLook() member function and apply the PropSheetLook_List option.

As seen for the Outlook bar, if you use a list of strings, there would be a bar on the left side of the property sheet and that bar would be equipped with the strings.

Practical LearningPractical Learning: Using a List

  1. Change the LifePlanningSheet.cpp file it as follows:
    CLifePlanningSheet::CLifePlanningSheet()
    {
        // 1. Classic property sheet
    /*  AddPage(&pgeComputerScience);
        AddPage(&pgeInformationTechnology);
        SetLook(CMFCPropertySheet::PropSheetLook_Tabs); */
    	
        // 2. Microsoft OneNote tabs
    /*  AddPage(&pgeComputerScience);
        AddPage(&pgeInformationTechnology);
        AddPage(&pgeHistory);
        AddPage(&pgeCulinaryServices);
        SetLook(CMFCPropertySheet::PropSheetLook_OneNoteTabs); */
    	
        // 3. Outlook Bar
    /*  AddPage(&pgeComputerScience);
        AddPage(&pgeHistory);
        AddPage(&pgeCulinaryServices);
        m_OutlookImages.Create(IDB_OUTLOOK, 32, 1, RGB(128, 128, 128));
        SetIconsList(m_OutlookImages);
        SetLook(CMFCPropertySheet::PropSheetLook_OutlookBar); */
    	
        // 4. List
        AddPage(&pgeComputerScience);
        AddPage(&pgeInformationTechnology);
        AddPage(&pgeCulinaryServices);
        SetLook(CMFCPropertySheet::PropSheetLook_List, 150);
    }
  2. To execute, press F5
     
    Career Planning and Life Achievement
  3. Close the property sheet
  4. Close the dialog box and return to your programming environment

Using a Tree List of Nodes

One of the characteristics of a list of labels is that each string is independent of the others. As alternative, you can create a tree of labels so that it would show that some labels belong to a group, and consequently some property pages work together. The labels in this case are called nodes.

If you use a tree list, the property sheet displays a bar on the left side. The list on that side can have strings like those of the previously seen list. To enhance it, you can create one or more nodes that behave as parents to other nodes. When a node is used as a parent, if the user clicks it, it expands to show its child nodes. If the user clicks that parent node again, it collapses to hid its child nodes. In all cases, if the user clicks a node on the left side, its property page displays on the right side.

To get a tree list, first call the SetLook() member function and apply the CMFCPropertySheet::PropSheetLook_Tree. If you stop there, the property sheet would behave like that of the list of labels. If you want an actual list, you must create. Fortunately, it is easy as long as you follow the right steps.

To let you create a tree list, the CMFCPropertySheet class is equipped with the AddTreeCategory() member function. Its syntax is:

CMFCPropertySheetCategoryInfo* AddTreeCategory(
   LPCTSTR lpszLabel,
   int nIconNum = -1,
   int nSelectedIconNum = -1,
   const CMFCPropertySheetCategoryInfo* pParentCategory = NULL 
);

When calling this function get a reference to the CMFCPropertySheetCategoryInfo object it returns. This function takes four argument but only one is required. The first argument is the string of the parent node. You can pass just that argument and the property sheet would work fine. If you want a node to display an icon, pass the zero-based index of that icon as the second argument. In this case, you can also pass a third argument as the icon that would display when the parent node is selected. If the node you are currently creating is the top node, pass the third argument as NULL. If that node has its own parent, pass its reference as the fourth argument.

After calling this member function, call the the AddPageToTree() member function. Its syntax is:

void AddPageToTree(
   CMFCPropertySheetCategoryInfo* pCategory,
   CMFCPropertyPage* pPage,
   int nIconNum=-1,
   int nSelIconNum=-1 
);

The first argument is a reference to a parent node you must have previously created. The second argument is a reference to a property page, the exact same argument you would pass for a regular property page in a Win32 property sheet. If the node should display an icon, pass the optional third argument. Also, you can optionally pass the fourth argument to specify what icon the node should display when it is selected.

Practical LearningPractical Learning: Using a Tree List

  1. Change the LifePlanningSheet.cpp file it as follows:
    CLifePlanningSheet::CLifePlanningSheet()
    {
        // 1. Classic property sheet
    /*  AddPage(&pgeComputerScience);
        AddPage(&pgeInformationTechnology);
        SetLook(CMFCPropertySheet::PropSheetLook_Tabs); */
    	
        // 2. Microsoft OneNote tabs
    /*  AddPage(&pgeComputerScience);
        AddPage(&pgeInformationTechnology);
        AddPage(&pgeHistory);
        AddPage(&pgeCulinaryServices);
        SetLook(CMFCPropertySheet::PropSheetLook_OneNoteTabs); */
    	
        // 3. Outlook Bar
    /*  AddPage(&pgeComputerScience);
        AddPage(&pgeHistory);
        AddPage(&pgeCulinaryServices);
        m_OutlookImages.Create(IDB_OUTLOOK, 32, 1, RGB(128, 128, 128));
        SetIconsList(m_OutlookImages);
        SetLook(CMFCPropertySheet::PropSheetLook_OutlookBar); */
    	
        // 4. List
    /*  AddPage(&pgeComputerScience);
        AddPage(&pgeInformationTechnology);
        AddPage(&pgeCulinaryServices);
        SetLook(CMFCPropertySheet::PropSheetLook_List, 150); */
    	
        // 5. Tree List
        SetLook(CMFCPropertySheet::PropSheetLook_Tree, 150);
        CMFCPropertySheetCategoryInfo * pscComputers = AddTreeCategory(_T("Computers"));
        AddPageToTree(pscComputers, &pgeComputerScience);
        AddPageToTree(pscComputers, &pgeInformationTechnology);
    
        AddPage(&pgeHistory);
        AddPage(&pgeCulinaryServices);
    }
  2. To execute, press F5
     
    Career Planning and Life Achievement
     
    Career Planning and Life Achievement
  3. Close the property sheet
  4. Close the dialog box and return to your programming environment
  5. In the Resource View, right-click LifePlanning -> Add -> Resource...
  6. In the Add Resource dialog box, click Bitmap and click New
  7. In the Properties window, change the following values:
    Color: 24 bit
    Height: 16
    Width: 64
  8. In the Resource View, click IDB_BITMAP2
  9. In the Properties window, click ID, type IDB_TREELIST and press Enter
  10. Design the bitmap as follows:
     
    Career Planning and Life Achievement
  11. Access the LifePlanningSheet.h file and declare a CImageList variable named m_OutlookImages:
    #pragma once
    
    #include "ComputerScience.h"
    #include "InformationTechnology.h"
    #include "History.h"
    #include "CulinaryServices.h"
    #include "Careers.h"
    
    // CLifePlanningSheet
    
    class CLifePlanningSheet : public CMFCPropertySheet
    {
        DECLARE_DYNAMIC(CLifePlanningSheet)
    
    public:
        CLifePlanningSheet();
        virtual ~CLifePlanningSheet();
    
    private:
        CComputerScience		pgeComputerScience;
        CInformationTechnology	pgeInformationTechnology;
        CHistory			pgeHistory;
        CCulinaryServices		pgeCulinaryServices;
        CCareers			pgeCareers;
    
        CImageList m_OutlookImages;
        CImageList m_TreeListImages;
    	
    protected:
        DECLARE_MESSAGE_MAP()
    };
  12. Access the LifePlanningSheet.cpp file and change it as follows:
    CLifePlanningSheet::CLifePlanningSheet()
    {
        // 1. Classic property sheet
    /*  AddPage(&pgeComputerScience);
        AddPage(&pgeInformationTechnology);
        SetLook(CMFCPropertySheet::PropSheetLook_Tabs); */
    	
        // 2. Microsoft OneNote tabs
    /*  AddPage(&pgeComputerScience);
        AddPage(&pgeInformationTechnology);
        AddPage(&pgeHistory);
        AddPage(&pgeCulinaryServices);
        SetLook(CMFCPropertySheet::PropSheetLook_OneNoteTabs); */
    	
        // 3. Outlook Bar
    /*  AddPage(&pgeComputerScience);
        AddPage(&pgeHistory);
        AddPage(&pgeCulinaryServices);
        m_OutlookImages.Create(IDB_OUTLOOK, 32, 1, RGB(128, 128, 128));
        SetIconsList(m_OutlookImages);
        SetLook(CMFCPropertySheet::PropSheetLook_OutlookBar); */
    	
        // 4. List
    /*  AddPage(&pgeComputerScience);
        AddPage(&pgeInformationTechnology);
        AddPage(&pgeCulinaryServices);
        SetLook(CMFCPropertySheet::PropSheetLook_List, 150); */
    	
        // 5. Tree List
        // Add the icons to the image list
        m_TreeListImages.Create(IDB_TREELIST, 16, 1, RGB(255, 255, 255));
        // Indicate that the tree list will use icons
        SetIconsList(m_TreeListImages);
        // Indicate that the property sheet will use a tree list
        SetLook(CMFCPropertySheet::PropSheetLook_Tree, 185);
        // Create the top node and name it College Majors
        CMFCPropertySheetCategoryInfo * pscCollgeMajors = 
        		AddTreeCategory(_T("College Majors"), 0, 1);
        // Under the College Majors node, create a category named Computers Related
        CMFCPropertySheetCategoryInfo * pscComputers = 
        		AddTreeCategory(_T("Computers Related"), 2, 3, pscCollgeMajors);
        // Add the pages to the category
        AddPageToTree(pscComputers, &pgeComputerScience);
        AddPageToTree(pscComputers, &pgeInformationTechnology);
    
        // Add two categories to the College Majors node
        AddPageToTree(pscCollgeMajors, &pgeHistory);
        AddPageToTree(pscCollgeMajors, &pgeCulinaryServices);
    
        // Add a node that doesn't have a parent
        AddPage(&pgeCareers);
    }
  13. To execute, press F5
     
    Career Planning and Life Achievement
     
    Career Planning and Life Achievement
     
    Career Planning and Life Achievement
  14. Close the property sheet
  15. Close the dialog box and return to your programming environment
  16. Change the design of the bitmap as follows:
     
    Career Planning and Life Achievement
  17. Access the LifePlanningSheet.cpp file and change it as follows:
    CLifePlanningSheet::CLifePlanningSheet()
    {
        // 1. Classic property sheet
    /*  AddPage(&pgeComputerScience);
        AddPage(&pgeInformationTechnology);
        SetLook(CMFCPropertySheet::PropSheetLook_Tabs); */
    	
        // 2. Microsoft OneNote tabs
    /*  AddPage(&pgeComputerScience);
        AddPage(&pgeInformationTechnology);
        AddPage(&pgeHistory);
        AddPage(&pgeCulinaryServices);
        SetLook(CMFCPropertySheet::PropSheetLook_OneNoteTabs); */
    	
        // 3. Outlook Bar
    /*  AddPage(&pgeComputerScience);
        AddPage(&pgeHistory);
        AddPage(&pgeCulinaryServices);
        m_OutlookImages.Create(IDB_OUTLOOK, 32, 1, RGB(128, 128, 128));
        SetIconsList(m_OutlookImages);
        SetLook(CMFCPropertySheet::PropSheetLook_OutlookBar); */
    	
        // 4. List
    /*  AddPage(&pgeComputerScience);
        AddPage(&pgeInformationTechnology);
        AddPage(&pgeCulinaryServices);
        SetLook(CMFCPropertySheet::PropSheetLook_List, 150); */
    	
        // 5. Tree List
        // Add the icons to the image list
        m_TreeListImages.Create(IDB_TREELIST, 16, 1, RGB(255, 255, 255));
        // Indicate that the tree list will use icons
        SetIconsList(m_TreeListImages);
        // Indicate that the property sheet will use a tree list
        SetLook(CMFCPropertySheet::PropSheetLook_Tree, 185);
        // Create the top node and name it College Majors
        CMFCPropertySheetCategoryInfo * pscCollgeMajors = 
        		AddTreeCategory(_T("College Majors"), 0, 1);
        // Under the College Majors node, create a category named Computers Related
        CMFCPropertySheetCategoryInfo * pscComputers = 
        		AddTreeCategory(_T("Computers Related"), 0, 1, pscCollgeMajors);
        // Add the pages to the category
        AddPageToTree(pscComputers, &pgeComputerScience);
        AddPageToTree(pscComputers, &pgeInformationTechnology);
    
        // Add two categories to the College Majors node
        AddPageToTree(pscCollgeMajors, &pgeHistory);
        AddPageToTree(pscCollgeMajors, &pgeCulinaryServices);
    
        // Add a node that doesn't have a parent
        AddPage(&pgeCareers);
    }
  18. Press F5 to execute
     
    Career Planning and Life Achievement
  19. Close the property sheet
  20. Close the dialog box and return to your programming environment
 
 
   
 

Home Copyright © 2010 FunctionX, Inc.