MFC自封装TabSheet控件：替代CTabCtrl实现多页面切换与布局管理

简介面向VC6.0下MFC界面开发者的TabSheet控件实现方案定位为可直接引入工程的自定义选项卡控件解决对话框或框架窗口中多页面切换与导航问题。压缩包共66个文件包含核心头文件与源文件、两个示例对话框类、演示工程文件及一份中文PDF用法总结rar包大小约423KB。已有227人学习下载。源码提供完整的CTabSheet类实现覆盖选项卡绘制、活动页切换、添加删除页面等关键接口并附带可运行的演示程序便于对照修改。包内还保留.svn目录和工程备份适合需要在VC6.0中快速集成多页签界面的中初级MFC开发者也可作为基于CWnd派生自定义控件的封装参考。对于MFC消息映射、自绘控件和动态页面管理等典型问题资料均有直观示例整体代码组织清晰注释简明从添加页签到切换页签的流程都能直接复用。 MFC里那个万年不变的Tab Control用过的老哥应该都有体会默认那套CTabCtrl标签栏丑不说页签切换逻辑还得自己写一大堆绑定子窗口、控制显示隐藏、处理焦点切换一整套下来代码量不小而且稍不注意就出各种焦点错乱、窗口闪烁的幺蛾子。前阵子维护一个VC6.0时代的遗留项目正好需要在一个对话框里塞五个子面板每个面板内部布局还挺复杂用默认Tab再做子窗口嵌套那代码简直没法看。干脆自己动手封装了一个TabSheet控件花了两天时间把整个逻辑理干净了实际效果比预期好不少。这个TabSheet方案本质上就是把CDialog当成页签容器把每一个页签页做成独立的子对话框然后通过Tab Control的切换消息来管理这些子对话框的显示和隐藏。好处是每个页面的业务逻辑可以完全独立对话框资源直接在上面拖控件不需要手工创建子窗口代码结构清爽不少。这篇文章就把这个控件的实现思路、完整步骤和我在实际过程中踩过的坑都盘一盘给还在用VC6.0的老哥们一个参考。1. 为什么不用系统自带的CTabCtrl直接搞先说清楚这个需求。VC6.0里自带的Tab Control本质上只是一个“标签栏”它只负责画那几个标签压根不帮你管标签对应的页面内容。你需要在主对话框上先放一个Tab Control然后在旁边再创建N个子窗口或者子对话框自己监听TCN_SELCHANGE消息手动把当前页的窗口ShowWindow出来把其他页的都隐藏掉。这套流程第一次写还行但一旦页面多起来主对话框的OnSelchange代码里密密麻麻全是ShowWindow和SetWindowPos看两天就烦。而且在VC6.0那个年代子窗口的创建方式还很原始如果你用Create来创建子对话框还得自己维护每个子对话框的成员变量指针、处理ID冲突、处理聚焦问题稍不留神就是一个槽。TabSheet的思路则完全不同。它把“标签栏”和“页面容器”做成了一个完整的控件类你只需要传入每个页面对应的对话框资源IDTabSheet内部自己负责创建子对话框、把它们定位到客户区、切换时自动完成显示隐藏。对使用方来说需要写的代码只有几行跟用CPropertySheet差不多但灵活度又比PropertySheet高很多因为每个页面可以是任意样式的CDialog不限于那种标准向导风格。另外还有一个很现实的理由项目历史包袱。老项目的对话框资源都是现成的使用方只希望有一个轻量的壳子把这几个现成的CDialog组合起来而不是推倒重来改成CPropertySheet的结构。TabSheet正好对应这种诉求。2. 整体设计思路做一个可复用的控件类TabSheet的核心结构并不复杂总共三个角色容器窗口通常是主对话框上的一个Tab Control或者一个Group Box区域、标签控件CTabCtrl和若干个子页面对话框CDialog。工作流程就是先告诉TabSheet一共有几页、每页对应的对话框资源ID是什么然后TabSheet负责在指定的容器区域内完成标签和页面的布局。2.1 类的核心接口设计我自己写的时候把对外接口收敛成了这么几个关键方法class CTabSheet { public: // 创建指定父窗口、标签控件ID和容器窗口ID BOOL Create(CWnd* pParentWnd, UINT nTabCtrlID, UINT nContainerID); // 添加一个页面nDialogID是子对话框资源IDstrTitle是标签标题 BOOL AddPage(UINT nDialogID, LPCTSTR strTitle); // 切换到指定索引的页面 void SetCurSel(int nIndex); // 获取当前页面索引 int GetCurSel() const; // 内部切换页面 void ShowPage(int nIndex); // 调整所有子页面的位置和尺寸 void ResizeAllPage(); };大概说下Create这一步在做什么。传入的nTabCtrlID是主对话框资源里放置的那个Tab Control的IDnContainerID则是用来限定页面显示范围的容器窗口ID最常用的情况就是把页面区域限定在Tab Control下方的那个矩形里。所以TabSheet会先拿到Tab Control的客户区尺寸然后用GetWindowRect和ScreenToClient换算成相对于父窗口的坐标把客户区往下偏移标签栏的高度剩下的那块矩形就是子页面要铺的区域这个区域可以由容器控件来承载。很多方案里直接把子页面设为Tab Control本身的子窗口但那样会在标签栏后面露出一截不太好看所以最好是单独用一个Group Box作为视觉容器。2.2 为什么子页面必须用对话框资源而不是手工创建有人可能会问直接用CreateWindow创建几个子窗口然后往里面放控件不也一样吗方案本身可行但维护性天差地别。对话框资源的好处是第一控件布局是可视化编辑的位置对不对鼠标拖一下就知道第二每个子对话框可以有自己的DDX变量绑定自己处理自己页面内的按钮事件逻辑完全内聚第三VC6.0的资源编辑器对这个工作流的支持非常成熟类向导直接就能生成对应的CDialog派生类。所以这个方案的底气在于每一个页签页都是一份独立的对话框资源、一个独立的CDialog派生类各自的OnInitDialog里初始化自己的控件各自的控件消息映射只在类内部处理。理解了这个设计后面的代码就顺理成章了。3. 核心实现一步一步写代码3.1 准备工作对话框资源和类结构假设现在要在主对话框IDD_MAIN_DLG上实现三个页签分别对应“基本设置”“高级选项”“关于信息”三个子页面。那么先在VC6.0的资源编辑器里把这三个子对话框资源创建出来ID分别为IDD_PAGE_BASIC、IDD_PAGE_ADVANCED、IDD_PAGE_ABOUT。注意每个子对话框的属性必须设置Style为ChildBorder为None这样它才能作为子窗口嵌入TabSheet里。接下来创建三个对应的CDialog派生类分别是CBasicPage、CAdvancedPage、CAboutPage基类都是CDialog构造函数里传入对应的资源ID。这里有个细节VC6.0的类向导在创建对话框类时会默认给你CDialog(IDD)的构造函数但作为子窗口嵌入后不应该在Create时自动调用DoModal所以后面要手动用Create来创建窗口。主对话框上拖一个Tab ControlID为IDC_TAB_MAIN和一个Group BoxID为IDC_TAB_AREAGroup Box的边框样式可以设置成没有标题的那种纯粹用来划定页面显示区域。3.2 CTabSheet类的具体实现核心的创建代码大概长这样BOOL CTabSheet::Create(CWnd* pParentWnd, UINT nTabCtrlID, UINT nContainerID) { if (!m_tabCtrl.Create(WS_CHILD | WS_VISIBLE | WS_CLIPSIBLINGS | WS_TABSTOP, CRect(0, 0, 0, 0), pParentWnd, nTabCtrlID)) return FALSE; m_pParentWnd pParentWnd; m_nTabCtrlID nTabCtrlID; m_nContainerID nContainerID; m_nCurrentPage -1; // 获取容器区域 CWnd* pContainer pParentWnd-GetDlgItem(nContainerID); if (pContainer ! NULL) { CRect rcContainer; pContainer-GetWindowRect(rcContainer); pParentWnd-ScreenToClient(rcContainer); m_rcPageArea rcContainer; } ResizeAllPage(); return TRUE; }这段代码里面有几个点值得注意。Tab Control创建时一定要加上WS_CLIPSIBLINGS样式这个样式可以避免子窗口互相覆盖时引起的刷新闪烁问题。另外获取容器区域时不能直接GetClientRect因为Group Box的客户区是从边框内部开始计算的而子页面要覆盖的区域应该是在容器控件的外部矩形内这样才能做到子页面把Group Box完全盖住。3.3 AddPage创建子对话框窗口AddPage的实现是本控件的核心每一步都不能省BOOL CTabSheet::AddPage(UINT nDialogID, LPCTSTR strTitle) { // 创建子对话框实例 CDialog* pDlg new CDialog(nDialogID, m_pParentWnd); if (pDlg-Create(nDialogID, m_pParentWnd) FALSE) { delete pDlg; return FALSE; } // 子对话框的初始位置不重要后面统一调整 pDlg-SetParent(m_pParentWnd); pDlg-ShowWindow(SW_HIDE); // 把子对话框放进Tab Control的Tab项里 TC_ITEM tcItem; tcItem.mask TCIF_TEXT; CString strTabTitle strTitle; tcItem.pszText (LPTSTR)(LPCTSTR)strTabTitle; m_tabCtrl.InsertItem(m_tabCtrl.GetItemCount(), tcItem); // 存好指针 m_pages.Add(pDlg); m_titles.Add(strTitle); // 第一个页面添加后自动定位 if (m_pages.GetSize() 1) { m_nCurrentPage 0; ResizeAllPage(); pDlg-ShowWindow(SW_SHOW); m_tabCtrl.SetCurSel(0); } return TRUE; }这里有几个环节很关键。第一CDialog对象要用new创建并且在控件销毁时负责delete因为子对话框窗口是动态创建的生命周期必须由TabSheet统一管理。第二创建时父窗口传入的是主对话框而不是Tab Control本身这样做的原因是子对话框在切换显示时有个层级关系问题。如果你把父窗口直接设为Tab Control那么在切换显示时可能会出现控件被Tab Control客户区裁剪的情况。第三所有页面初始都是SW_HIDE的最后调SetParent是为了确保父子关系正确防止Create时内部创建逻辑把父窗口设置为其他临时窗口。3.4 SetCurSel与切换逻辑页面切换是整个控件最见功力的地方。我的实现是在TCN_SELCHANGE消息里自动响应的但同时也暴露了一个手动切换的方法方便外部调用void CTabSheet::SetCurSel(int nIndex) { if (nIndex 0 || nIndex m_pages.GetSize()) return; if (nIndex m_nCurrentPage) return; // 先把当前页隐藏 if (m_nCurrentPage 0 m_nCurrentPage m_pages.GetSize()) m_pages[m_nCurrentPage]-ShowWindow(SW_HIDE); m_nCurrentPage nIndex; // 再显示新页面并设置焦点 m_pages[m_nCurrentPage]-ShowWindow(SW_SHOW); m_pages[m_nCurrentPage]-SetFocus(); // 同步Tab Control的选中状态 m_tabCtrl.SetCurSel(m_nCurrentPage); }这里面有一个很容易被忽略的点切换页签时必须让新页面获得焦点。如果不做这一步焦点还停留在上一个页面的某个控件里用户在新的页面上用Tab键导航时焦点会跑到奇怪的地方去这是默认Tab Control方案最常见的问题之一。另外如果子页面内有控件需要初始化或者刷新数据可以在对应的子对话框的OnShowWindow里处理。3.5 ResizeAllPage保证布局不变形页面尺寸的调整要放在WM_SIZE响应里。主对话框大小一变Tab Control和Group Box都会跟着变此时所有子页面也要同步调整否则页面内容会错位。void CTabSheet::ResizeAllPage() { if (m_pParentWnd NULL) return; // 重新获取容器区域 CWnd* pContainer m_pParentWnd-GetDlgItem(m_nContainerID); if (pContainer ! NULL) { CRect rcContainer; pContainer-GetWindowRect(rcContainer); m_pParentWnd-ScreenToClient(rcContainer); // 减去Group Box边框带来的偏移 m_rcPageArea rcContainer; m_rcPageArea.DeflateRect(2, 2, 2, 2); // 根据实际情况调整 } for (int i 0; i m_pages.GetSize(); i) { m_pages[i]-MoveWindow(m_rcPageArea); } }这里DeflateRect那句是经验之谈。因为Group Box的边框本身会占用几个像素如果不做偏移直接用容器矩形子页面的背景会盖住Group Box的边框线看起来会比较突兀。具体偏移量取决于你放的容器类型如果是Group Box且样式里没有标题2个像素就够了如果用的是Picture控件可能还要分静态边框和客户区边框的区别需要自己微调。4. 几个关键细节踩过的坑都在这了4.1 子对话框的Tab键失灵问题这是TabSheet方案最常见的坑。你把子对话框以Child方式创建之后子对话框内部的控件默认是可以Tab导航的但前提是子对话框本身要作为TopLevel窗口来管理控件导航。当你把子对话框嵌入到另一个对话框里Tab键导航往往会直接跳到父对话框的其他控件上导致子页面内的控件根本没法用键盘操作。解决方法是重写子对话框的PreTranslateMessage函数把键盘消息手动路由给子对话框本身处理BOOL CBasicPage::PreTranslateMessage(MSG* pMsg) { if (pMsg-message WM_KEYDOWN) { if (pMsg-wParam VK_TAB) { CWnd* pWnd GetNextDlgTabItem(NULL, GetKeyState(VK_SHIFT) 0); if (pWnd ! NULL) { pWnd-SetFocus(); return TRUE; } } } return CDialog::PreTranslateMessage(pMsg); }这样改了之后还有一个作用子页面内部用Tab导航时只会循环子页面内的控件不会跳出去体验就正常了。4.2 对话框内控件ID冲突问题VC6.0对对话框控件ID有范围限制和查重逻辑。如果两个子对话框里的按钮ID都是IDC_BUTTON_OK系统默认是IDOK嵌入TabSheet后消息映射会串处理函数会被触发两次或者触发到错误的页面。这个问题的根源在于CDialog的消息映射表是把ID映射到类的成员函数的子对话框的ID和父对话框的ID重合时容易走到父对话框的处理逻辑里。解决方案是在资源编辑器里把所有子对话框的控件ID都加上前缀或者统一规划一段ID范围比如IDC_PAGE1_BEGIN 2000每个页面控件ID按页面索引递增。这个纯属工程规范问题但在VC6.0里不做ID规划就是等着踩坑。4.3 窗口闪烁与背景重绘问题窗口切换时会出现页面内容“闪一下”再消失的问题尤其在低配电脑上特别明显。排查下来主要是两个原因一是Tab Control客户区和子页面的背景色不一致切换的瞬间会露出一片灰白二是子页面没有处理WM_ERASEBKGND默认会先擦除背景再画内容造成了视觉上的闪烁。解决办法第一子对话框在OnEraseBkgnd里直接返回TRUE禁止默认的背景擦除让子页面自己负责背景重绘或者把背景色设成和父对话框一致的COLOR_BTNFACE第二创建Tab Control时不加WS_CLIPCHILDREN样式反而有时能减少闪烁因为子页面本身会把自己的区域整个盖住。提示如果子页面很多且切换频繁建议在切换时用LockWindowUpdate临时锁定窗口更新切换完成后再解锁实测下来闪烁问题改善非常明显。4.4 Group Box作为容器的几个注意事项用Group Box划定页面区域有个好处设计时可以在资源编辑器里直观看到页面范围运行时子页面盖住Group Box的标题和边框代码上不用额外画背景。但这里有个细节Group Box的客户区矩形和窗口矩形不一样你要用的是窗口矩形否则子页面会比预期小一圈。如果你不想在客户区露出Group Box的边框可以在资源编辑器里把Group Box的Caption属性清空然后调整它的矩形大小运行的时候子页面把它完全盖住整体观感就是一个干干净净的卡片式页面。5. 完整的使用示例三行代码接入主对话框所有核心逻辑封装完成后使用方的工作量就非常小了。在主对话框的头文件里加入成员变量// 头文件 class CMainDlg : public CDialog { public: CTabSheet m_tabSheet; CBasicPage m_pageBasic; // CDialog派生类 CAdvancedPage m_pageAdvanced; CAboutPage m_pageAbout; };然后在主对话框的OnInitDialog里初始化BOOL CMainDlg::OnInitDialog() { CDialog::OnInitDialog(); // 创建TabSheet控件 m_tabSheet.Create(this, IDC_TAB_MAIN, IDC_TAB_AREA); // 添加三个页面 m_tabSheet.AddPage( IDD_PAGE_BASIC, _T(基本设置) ); m_tabSheet.AddPage( IDD_PAGE_ADVANCED, _T(高级选项) ); m_tabSheet.AddPage( IDD_PAGE_ABOUT, _T(关于信息) ); // 默认选中第一页 m_tabSheet.SetCurSel(0); return TRUE; }最后在主对话框的OnSize里调用m_tabSheet.ResizeAllPage()整个控件就接完了。每个子对话框内部的业务逻辑完全在各自的类里处理主对话框不用管任何一个页面的内部实现消息处理也互不打扰。这个结构在项目后期维护的时候优势很明显新加一个页签只需要新增一个对话框资源、写一个派生类、AddPage一行代码就搞定。6. 常见问题速查表问题现象根本原因解决办法页面切换时控件错位父窗口尺寸变化后没有重布局在父窗口OnSize中调用ResizeAllPage子页面内Tab键无响应键盘消息被父对话框截获重写PreTranslateMessage处理VK_TAB切换时严重闪烁子页面背景擦除与重绘顺序问题OnEraseBkgnd返回TRUE切换时LockWindowUpdate按钮点击触发父对话框处理函数控件ID与父对话框或他页控件ID冲突规划独立ID段避免重复页面背景是灰色与主题不符子对话框背景色未与父对话框统一在OnEraseBkgnd里填充系统背景色子页面显示时出现在标签栏上方页面区域矩形计算包含了标签栏高度用Group Box限定区域并用DeflateRect修正销毁时崩溃或内存泄漏CDialog对象指针没有释放在析构函数里遍历m_pages并delete7. 扩展能否用CPropertySheet替代有一部分人会觉得既然要做多页面为什么不用MFC自带的CPropertySheet。说实话在只做标准向导式属性页的场景下CPropertySheet确实能省事但它有几个限制属性页对话框必须是标准格式的CPropertyPage派生类页面的按钮区是系统统一画的不容易定制页面数量多了之后那种“上下一体化”的视觉效果也不太好看。而TabSheet本质上只是把Tab Control和子对话框做了一个管理封装页面区域可以做的很灵活比如在页面区域下面再加一行自己的按钮工具栏或者把Tab标签竖排这些在CPropertySheet里实现起来非常费劲。如果项目要求不高CPropertySheet完全可以满足需求。但如果目标是做一个像Chrome设置页那种左侧导航右侧内容的界面或者需要在页面区域内外自由布局其他控件那TabSheet这种组合方案才是正解。而且在VC6.0这种老环境下CPropertySheet对视觉风格的定制能力基本为零TabSheet反而更容易做出好看的样式。8. 写在最后的个人经验小结TabSheet这个控件实现本身并不难难的是把各种边界情况考虑清楚。前前后后写下来我最大的体会是子对话框的窗口样式和父窗口选择直接决定了很多隐藏问题的走向。一定要把子页面设成Child None边框创建父窗口选主对话框而不是Tab Control本身页面区域的矩形必须用容器窗口的窗口矩形而不是客户区矩形这三点做到了控件就成功了一大半。还有一个建议如果你要把这个控件用在多个项目里最好把CTabSheet做成一个独立的、不依赖具体业务类的模板化工具类页面管理部分只依赖CDialog基类指针这样换到别的项目里复制文件就能直接用。当年我就是偷懒把页面管理逻辑和具体页面类耦合在一起写后面想复用还得回头去改代码非常被动。另外切换逻辑里我用了LockWindowUpdate来避免闪烁但要注意这个API可能会影响子页面内部正在进行的重绘操作所以在切换完成后一定要及时解锁。初次调试的时候我还遇到过切换后整个区域卡住不刷新的问题后来锁定是因为LockWindowUpdate没有匹配的Unlock窗口一直被锁定着。这类问题排查起来很隐蔽重点检查API的配对使用。写到这里这个控件从设计到落地基本讲透了。如果你也在维护一个老项目正为多页面切换的事情头大不妨花半天时间照着这个思路封装一个后面每次新增页面都会省下不少功夫。本文还有配套的精品资源点击获取