How to Use MFC Tab Control in Developing VC++ Applications

In this article, I will show you how to use a VC++ MFC Tab Control in a dialog application.

Introduction

One of the most aggravating things about using a tab control is having to use property sheets or embedding child dialogs into the tab control. Both approaches work, but cause the program to have more code than I think is necessary. So I decided to create a very simple way to use tab control class. This method is very easy to use, and requires very little coding, and should save you a lot of time! It supports as many tabs as you need right out of the box, and can create as many controls as you need as well!

Example

This example is based on Visual Studio 2010.

1-First, Let’s create a new MFC project named Test and save it. This project is based on dialog, so you must choose this option. The Integrated Developing Environment will create a dialog named Test automatically, and three classes(CAboutDlg, CTestApp, CTestDlg) are built .

2-Drag a Tab Control onto the Test dialog.

3-Change the ID as IDC_MyTab.

4-Name the Tab as m_MyTab in the class wizard.

5-Insert another dialog named ChildDlg and drag four Static Texts and Edit Controls with any names. In the next steps, we will insert this dialog into the tab control and display it.

Set style as “child”, border as “none” in the attributes.

6-Create the class of ChildDlg and name it as ChildDlg.

7-Include the head file of ChildDlg in TestDlg.h

// TestDlg.h : 头文件
//

#pragma once
#include "ChildDlg.h"

8-Create two pages for m_MyTab in OnInitialDlg() of CTestDlg.

m_MyTab.InsertItem(0,_T("Velocity"));
m_MyTab.InsertItem(1,_T("Temperature"));

9-Create two dialogs in CTestDlg.h file.

ChildDlg m_Dialog1;
ChildDlg m_Dialog2;

10-Create two dialogs’ map in OnInitialDlg() of CTestDlg.

m_Dialog1.Create(IDD_ChildDlg, &m_MyTab);
m_Dialog2.Create(IDD_ChildDlg, &m_MyTab);

11-Define the display boundary of dialogs and move the dialogs into the tab.

CRect rc;
m_MyTab.GetClientRect(rc);
rc.top += 20;
rc.bottom -= 10;
rc.left += 10;
rc.right -= 10;
m_Dialog1.MoveWindow(&rc);
m_Dialog2.MoveWindow(&rc);

12-Initiate the display of dialog.

m_Dialog1.ShowWindow(TRUE);
m_Dialog2.ShowWindow(FALSE);
m_MyTab.SetCurSel(0);

The whole code added in the OnInitialDlg() as follows:

    m_MyTab.InsertItem(0,_T("Velocity"));
    m_MyTab.InsertItem(1,_T("Temperature"));

    m_Dialog1.Create(IDD_ChildDlg, &m_MyTab);
    m_Dialog2.Create(IDD_ChildDlg, &m_MyTab);

    CRect rc;
    m_MyTab.GetClientRect(&rc);
    rc.top += 20;
    rc.bottom -= 10;
    rc.left += 10;
    rc.right -= 10;
    m_Dialog1.MoveWindow(&rc);
    m_Dialog2.MoveWindow(&rc);

    m_Dialog1.ShowWindow(TRUE);
    m_Dialog2.ShowWindow(FALSE);
    m_MyTab.SetCurSel(0);

13-Add TCN_SELCHANGE event for tab control.

Add code as follows:

void CTestDlg::OnTcnSelchangingMytab(NMHDR *pNMHDR, LRESULT *pResult)
{
    int CurSel = m_MyTab.GetCurSel();
    switch(CurSel)
    {
        case 0:
            m_Dialog1.ShowWindow(true);
            m_Dialog2.ShowWindow(false);
            break;
        case 1:
            m_Dialog1.ShowWindow(false);
            m_Dialog2.ShowWindow(true);
            break;
        default:
            ;
    }   
    *pResult = 0;
}

Till now, the application works perfectly. But when you try to edit the editbox of the childdlg, bugs appears: the editboxs can’t be edited anyway. This bug may not appear in you application, but it confused me this whole afternoon. I searched many ways on Internet and try to solve it, including a lot of codes, but all failed. Finally, before dinner, I happen to find the “disabled” attribute of the childdlg is “True”. It means that the childdlg can never be edit anyway…… So after I had change the attribute to “False”, all works.