How to use a CTabCtrl in a MFC dialog based application?

Question

I need to do something which i expected to be was simple - create a tab control which has 2 tabs, implying 2 modes of operation for my app. When user clicks on Tab1, he'll be presented with some buttons and textboxes, and when he clicks Tab2, some other input method. I noticed that there was a CTabCtrl class thats used in MFC to add tabs. However, once I added the tab ctrl using the UI designer, I couldn't specify how many tabs there'll be using property window. Searching on the net, I found some examples but all of them required you to derive from CtabCtrl , create 2 or more child dialogs etc and to write your own custom class. My question is, since I want to do something so basic, why couldn't I do it using the familiar Add Event handler/Add member variable wizard and then handle everything else inside my app's class ? Surely, the default CTabCtrl class can do something useful without needing to derive from it ?

Answer 1

The MFC tab control is a pretty thin wrapper over the win32 tab control, which works in pretty much the way you describe. It is a window, which provides switching between child windows using tabs. As it happens, in straight win32 this is the most useful way for it to work. If you want to do something more sophisticated than switching between individual windows, you do this by using child dialogs. MFC doesn't do a great deal to help you, but deriving from CTabCtrl and using child dialogs is really not very difficult to do, although if you're used to the way WinForms does tab controls it does seem unnecessary.

If you want the tab control at the root of the dialog, with no other controls along side it, you might want to look at CPropertySheet (http://msdn.microsoft.com/en-us/library/d3fkt014(VS.80).aspx) which is probably simpler to use. Unless you want to use any of the wizard functionality you don't even need to derive from it - you just create a couple of child dialog classes, then in the place where you want to create the property sheet, make an object, add the pages to it and invoke it.

Answer 2

Forget about CTabCtrl and use CMFCTabCtrl which is much easier to work with (this is assuming you are working on VS2008 SP1).

Failing that, you seem to misunderstand how the tab control works. It only provides the 'tab strip' at the top and sends messages when the user clicks on another one. It doesn't provide you with 'tab canvases' on which you can put controls. Showing and hiding the controls on the tab is something that the programmer needs to take care of. The resource editor provides little support there. Like Stewart says, the most common way of working is to have child dialogs in your tab and hide all of them except the one of the current tab.

You don't need to derive from CTabCtrl, you can also implement the switching behavior in the window that is the parent of the CTabCtrl.

Answer 3

The approach I took with an MFC dialog that contained a CTabCtrl was to derive a small class to manage the tab control and used dialog templates to create the actual tab window contents.

This is still being worked on so the source code is not very clean however here are some pieces. For instance CTabCtrlDialog needs constructor and destructor in order to release object which may have been created.

In the resource file I have a dialog template with a tab control followed by three dialog templates for each of the different tab content windows inserted into the tab control. While the dialog displaying the tab control has the WS_POPUP style, the dialog templates for the tab windows that are inserted into the tab control have a WS_CHILD style instead. This change makes the tab windows child windows so that when the dialog is moved, everything stays lined up properly with no further effort on my part.

In my case the tab windows which are inserted into the tab control display a set of check boxes to indicate various operational parameters. Using a dialog template approach makes it very easy to create the necessary tab window content.

I derive a class from CTabCtrl that extends the standard MFC class with an additional method for inserting into the tab control a tab window based on a specified dialog template id. Since this is just a single dialog, I just put this class into the same files, .h and .cpp, as the dialog components themselves.

class CTabCtrlDialog : public CTabCtrl
{
public:
    void InsertItemDialogTemplate (UINT nIDTemplate, int nItem, TCITEM* pTabCtrlItem);

public:
    struct {
        UINT     nIDTemplate;
        CDialog  *pDialog;
    }  m_pDialogData[10];
};

The method InsertItemDialogTemplate() looks like:

/*
 *  InsertItemDialogTemplate ()
 *
 *  Insert into a tab control a tab pane based on the specified dialog template.  The
 *  dialog template describes what the tab pane looks like so far as controls, etc.
 *
 *  NOTE: The STYLE description must be WS_CHILD and not WS_POPUP.  Also the dialog
 *        needs to have as its top coordinate some distance in pixels so that the
 *        various tab descriptions are visible.  For instance an example dialog
 *        template in the resource file may look like:
 *            IDD_CASHIER_TAB_ONE DIALOGEX 0, 10, 178, 113
 *            STYLE DS_SETFONT | DS_FIXEDSYS | WS_CHILD
 *            FONT 8, "MS Shell Dlg", 400, 0, 0x1
 *            BEGIN
 *                LTEXT           "Dialog Tab one",IDC_STATIC,6,44,90,17
 *            END
 *
**/
void CTabCtrlDialog::InsertItemDialogTemplate (UINT nIDTemplate, int nItem, TCITEM* pTabCtrlItem)
{
    InsertItem (nItem, pTabCtrlItem);
    m_pDialogData[nItem].nIDTemplate = nIDTemplate;
    m_pDialogData[nItem].pDialog = new CDialog ();
    m_pDialogData[nItem].pDialog->Create (nIDTemplate, this);
    m_pDialogData[nItem].pDialog->ShowWindow (FALSE);
}

For handling tab selection which displays the various tabs I have the following message map and then the two event handlers in the dialog.

BEGIN_MESSAGE_MAP(CDiaCashierEdit, CDialog)
    ON_NOTIFY(TCN_SELCHANGE, IDC_TAB_CASHIER_EDIT_STATUS, &CDiaCashierEdit::OnTcnSelchangeTabCashierEditStatus)
    ON_NOTIFY(TCN_SELCHANGING, IDC_TAB_CASHIER_EDIT_STATUS, &CDiaCashierEdit::OnTcnSelchangingTabCashierEditStatus)
END_MESSAGE_MAP()


    void CDiaCashierEdit::OnTcnSelchangeTabCashierEditStatus(NMHDR *pNMHDR, LRESULT *pResult)
    {
        // TODO: Add your control notification handler code here
        *pResult = 0;

        int i = TabCtrl_GetCurSel(pNMHDR->hwndFrom);
        m_TabCtrl.m_pDialogData[i + 1].pDialog->ShowWindow (TRUE);

    }

    void CDiaCashierEdit::OnTcnSelchangingTabCashierEditStatus(NMHDR *pNMHDR, LRESULT *pResult)
    {
        // TODO: Add your control notification handler code here
        *pResult = 0;

        int i = TabCtrl_GetCurSel(pNMHDR->hwndFrom);
        m_TabCtrl.m_pDialogData[i + 1].pDialog->ShowWindow (FALSE);

    }

In the DoDataExchange() method of the dialog I have the following which creates first the tab control and then creates each of the tab windows and inserts them into the tab control.

void CDiaCashierEdit::DoDataExchange(CDataExchange* pDX)
{
    CDialog::DoDataExchange(pDX);
    DDX_Control(pDX, IDC_EDIT_CASHIER_NAME, m_CashierName);
    DDX_Control(pDX, IDC_EDIT_CASHIER_SUPNO, m_SupervisorId);
    DDX_Control(pDX, IDC_EDIT_CASHIER_TEAMNO, m_TeamNumber);
    DDX_Control(pDX, IDC_EDIT_CASHIER_GCSTART, m_GuestCheckStart);
    DDX_Control(pDX, IDC_EDIT_CASHIER_GCEND, m_GuestCheckEnd);
    DDX_Control(pDX, IDC_TAB_CASHIER_EDIT_STATUS, m_TabCtrl);
    if (pDX->m_bSaveAndValidate) {
        m_CashierName.GetWindowText (m_paraCashier.auchCashierName, 20);
        m_paraCashier.usSupervisorID = m_SupervisorId.GetWindowTextAsInt();
        m_paraCashier.uchTeamNo = m_TeamNumber.GetWindowTextAsInt();
        m_paraCashier.usGstCheckStartNo = m_GuestCheckStart.GetWindowTextAsInt();
        m_paraCashier.usGstCheckEndNo = m_GuestCheckEnd.GetWindowTextAsInt();
        for (int i = 0; i < sizeof(m_TabItemOneStatus)/sizeof(m_TabItemOneStatus[0]); i++) {
            int iTab = m_TabItemOneStatus[i].sTabItem;
            int iDlg = m_TabItemOneStatus[i].iDlgItem;
            int iOffset = m_TabItemOneStatus[i].sOffset;
            CButton *p = (CButton *) m_TabCtrl.m_pDialogData[iTab].pDialog->GetDlgItem(iDlg);
            if (p->GetCheck()) {
                m_paraCashier.fbCashierStatus[iOffset] |= m_TabItemOneStatus[i].uchBit;
            } else {
                m_paraCashier.fbCashierStatus[iOffset] &= ~(m_TabItemOneStatus[i].uchBit);
            }
        }
    } else {
        m_CashierName.SetWindowText(m_paraCashier.auchCashierName);
        m_SupervisorId.SetWindowTextAsInt (m_paraCashier.usSupervisorID);
        m_TeamNumber.SetWindowTextAsInt (m_paraCashier.uchTeamNo);
        m_GuestCheckStart.SetWindowTextAsInt (m_paraCashier.usGstCheckStartNo);
        m_GuestCheckEnd.SetWindowTextAsInt (m_paraCashier.usGstCheckEndNo);
        m_TabCtrl.InsertItemDialogTemplate (IDD_CASHIER_TAB_ONE, 1, &m_TabItemOne);
        m_TabCtrl.InsertItemDialogTemplate (IDD_CASHIER_TAB_TWO, 2, &m_TabItemTwo);
        m_TabCtrl.InsertItemDialogTemplate (IDD_CASHIER_TAB_THREE, 3, &m_TabItemThree);
        for (int i = 0; i < sizeof(m_TabItemOneStatus)/sizeof(m_TabItemOneStatus[0]); i++) {
            int iTab = m_TabItemOneStatus[i].sTabItem;
            int iDlg = m_TabItemOneStatus[i].iDlgItem;
            int iOffset = m_TabItemOneStatus[i].sOffset;
            CButton *p = (CButton *) m_TabCtrl.m_pDialogData[iTab].pDialog->GetDlgItem(iDlg);
            if (m_paraCashier.fbCashierStatus[iOffset] & m_TabItemOneStatus[i].uchBit) {
                p->SetCheck (1);
            } else {
                p->SetCheck (0);
            }
        }
        m_TabCtrl.m_pDialogData[1].pDialog->ShowWindow (TRUE);
    }
}