VC Tab Control 控制項實現多頁面對話方塊切換完整教學

使用 MFC CTabCtrl 實現類似屬性頁的多子對話方塊動態切換，核心技巧：子對話方塊建立為 Child/無邊框，父視窗設為 Tab 控制項，配合 ShowWindow 切換可見性。

步驟 1：建立專案與 Tab 控制項

1. MFC 對話方塊專案，刪除預設控制項
2. 工具箱拖入 Tab Control，屬性設 ID = IDC_TAB1
3. 類別向導添加變數：CTabCtrl m_tabCtrl

步驟 2：初始化 Tab 項目

BOOL CMyTabDlg::OnInitDialog() {
    CDialog::OnInitDialog();
    m_tabCtrl.InsertItem(0, _T("頁面一"));
    m_tabCtrl.InsertItem(1, _T("頁面二"));
    // 更多頁面...
    return TRUE;
}

步驟 3：建立子對話方塊資源與類別

1. 資源視圖新增兩個對話方塊：IDD_PAGE1、IDD_PAGE2
2. 屬性關鍵設定：Style = Child、Border = None、字體/大小統一
3. 類別向導建立對應類別：CPage1 : public CDialog、CPage2 : public CDialog

步驟 4：主對話方塊宣告子對話方塊成員

class CMyTabDlg : public CDialog {
    CTabCtrl m_tabCtrl;
    CPage1 m_page1;
    CPage2 m_page2;
    // ...
};

步驟 5：OnInitDialog 中建立、定位、顯示子對話方塊

BOOL CMyTabDlg::OnInitDialog() {
    CDialog::OnInitDialog();
    
    // 1. 建立子對話方塊，父視窗指定為 Tab 控制項
    m_page1.Create(IDD_PAGE1, &m_tabCtrl);
    m_page2.Create(IDD_PAGE2, &m_tabCtrl);
    
    // 2. 獲取 Tab 客戶區矩形，計算子對話方塊顯示區域
    CRect rc;
    m_tabCtrl.GetClientRect(&rc);
    // 調整留出 Tab 標籤高度 (約 20-25 像素) 與邊距
    rc.top += 22;
    rc.bottom -= 4;
    rc.left += 2;
    rc.right -= 2;
    
    // 3. 移動子對話方塊至計算區域
    m_page1.MoveWindow(&rc);
    m_page2.MoveWindow(&rc);
    
    // 4. 初始顯示第一頁，隱藏其餘
    m_page1.ShowWindow(SW_SHOW);
    m_page2.ShowWindow(SW_HIDE);
    
    // 5. 設定預設選中項
    m_tabCtrl.SetCurSel(0);
    
    return TRUE;
}

步驟 6：處理 TCN_SELCHANGE 切換通知

void CMyTabDlg::OnTcnSelchangeTab1(NMHDR* pNMHDR, LRESULT* pResult) {
    int nSel = m_tabCtrl.GetCurSel();
    switch (nSel) {
        case 0:
            m_page1.ShowWindow(SW_SHOW);
            m_page2.ShowWindow(SW_HIDE);
            break;
        case 1:
            m_page1.ShowWindow(SW_HIDE);
            m_page2.ShowWindow(SW_SHOW);
            break;
        // 更多頁面...
    }
    *pResult = 0;
}

類別向導添加訊息映射：ON_NOTIFY(TCN_SELCHANGE, IDC_TAB1, OnTcnSelchangeTab1)

進階優化技巧

• 延遲建立：頁面多時，OnTcnSelchange 中首次切換到該頁才 Create，減少啟動開銷
• 動態頁面管理：使用 std::vector<CDialog*> 管理任意數量頁面，配合 InsertItem 索引對應
• 資料交換同步：切換前 UpdateData(TRUE) 保存當前頁資料，切換後 UpdateData(FALSE) 載入新頁資料
• Tab 字體/圖示自訂：SetItem 結合 TCITEM 設定圖示、字體、顏色

關鍵屬性設定總結

此模式輕量、無 CPropertySheet 框架開銷，完全掌控佈局與切換邏輯，是 MFC 多頁面 UI 經典實作。