简介MFC 开发中标准 CTabCtrl 的默认样式常常局限界面表现这份自绘控件源码正是面向需要定制标签页的 Windows 开发者帮助实现颜色、字体、边框、图标乃至动画效果的自定义。压缩包共 2 个文件1 个 cpp、1 个 h整体仅 6KB代码紧凑易于直接阅读与集成。已有 354 人学习该示例。核心逻辑集中在 OnPaint 消息处理中兼顾 WM_NCPAINT、WM_ERASEBKGND 等消息展示如何借助 GDI 绘制标签区域并通过定时器与动画帧设计实现动态切换体验对照 CoolTabCtrl.h/.cpp 文件既能快速搭建自绘控件的基础框架也可学习到 MFC 自定义控件的绘制流程与常见技巧。 说实话我一开始拿到“自绘CTabCtrl”这个需求时心里是有点拒绝的。原因很简单在MFC项目里动Tab Control往往意味着要跟Win32控件那套老旧的绘制机制搏斗还要考虑视觉样式、DPI缩放、边框像素这些细枝末节。但真咬着牙把它们一个个理顺之后你会发现这个“老控件”其实有非常大的自定义空间能做到的效果也一点不比那些商业界面库差。这篇文章想把整个思考链路和实现过程都记录下来从为什么默认控件不够用到Owner-Draw机制背后容易踩的视觉样式坑再到一段可以直接抄的DrawItem实现最后附上我实际项目里碰到过的几个定位问题和解决办法。适合现在正在做MFC/Win32桌面端、被CTabCtrl默认样式折磨过、又不想为此引入重型界面库的开发者。1. 为什么我会去折腾CTabCtrl自绘很多人第一反应是CTabCtrl还能用为什么要自己画答案是当你的界面风格和系统默认风格差异较大时默认控件那个“蓝色高亮Tab 灰底边框”的观感会显得非常突兀。我当时的场景是一个企业内部工具主界面要求偏深色、扁平标签栏需要展示“选中项左侧有一条高亮竖线 文字加粗”这种风格。系统自带的CTabCtrl无论如何都做不到这种效果它的高亮区域是系统主题控制的选中态和非选中态之间还会自动切换成不同的系统颜色你很难在视觉上做统一。这类需求往往集中在三种场景想让标签栏跟整体界面风格一致比如深色主题、扁平化设计、自定义品牌色系。需要给每个标签加上“关闭按钮”或者角标、提示点等额外信息。希望标签的点击反馈、Hover状态、选中动画由自己完全控制而不是跟着系统的变化走。在动手之前我建议你先判断一下你到底需要“自绘”还是“伪自绘”。如果你的需求只是“标签宽度统一、切换不跳动”那不用自绘设置TCS_FIXEDWIDTH并调用SetItemSize再配合TCN_SELCHANGE刷新页面即可代码量少一半。如果要的是图标和文字的组合排列同样可以通过TCITEM里的iImage加ImageList实现。真正的自绘是在这些基础功能都无法满足视觉要求时才启动的方案。也就是说自绘不是手段而是“系统不给力后的兜底方案”。下手之前先把默认控件能做的都做完剩下的才交给自绘。2. 自绘前的两个关键认知Owner-Draw机制与主题冲突2.1 TCS_OWNERDRAWFIXED到底把绘制权交给了谁CTabCtrl的自绘入口是TCS_OWNERDRAWFIXED样式。这个样式一旦设置系统就不再直接绘制每个Tab标题区而是发送WM_DRAWITEM消息给控件的所属窗口让开发者通过DRAWITEMSTRUCT结构拿到每一项的矩形区域、状态和HDC然后自己绘制。在MFC里有两个处理路径一个是在父窗口中处理WM_DRAWITEM这也是Win32最原始的Owner-Draw机制另一个是使用MFC的消息反射机制在CTabCtrl子类里直接处理ON_WM_DRAWITEM_REFLECT这样控件自身的绘制逻辑更内聚不用把父窗口的OnDrawItem写成一坨。我推荐在子类里处理原因很简单如果你的项目里有多个Tab控件用父窗口处理就得加一个switch(nIDCtl)分发代码会很散。子类化之后每个CTabCtrl子类都自带绘制逻辑后续维护更清晰。DRAWITEMSTRUCT里有两个字段需要特别注意itemID当前要绘制的Tab项索引。itemState当前项的状态ODS_SELECTED表示选中态ODS_FOCUS表示获得焦点。rcItem系统给出的Tab标题区矩形你的所有绘制内容都必须在这个矩形内。很多人第一次写DrawItem时总想从GetItemRect或者GetItemText里去拿完整信息。其实没必要itemID已经够用了至于文字画在哪完全由你自己算。这也是Owner-Draw的乐趣和麻烦所在系统只给你一块画布画布上的内容是留白还是精心排版全看你自己。2.2 一个必须先处理的问题视觉样式与WM_DRAWITEM的相爱相杀这里要单独拉出来说因为这是我在Win10上实际花了大半天才搞清楚的问题。在Windows XP之后的系统里通用控件默认会被UxTheme接管。即使你设置了TCS_OWNERDRAWFIXED系统在发送WM_DRAWITEM之后依然会根据当前的视觉样式在部分区域绘制默认的Tab背景、边框或高光。最典型的表现是你自己的DrawItem执行完了但选中项下方还会残留一条蓝色的高亮边或者Tab标题区右侧出现系统画的灰色渐变块。这个问题的根源是主题绘制和Owner-Draw并存。两者没有优先级系统只是默认把部分绘制交给了主题。解决办法很朴素把目标控件的主题机制关掉。::SetWindowTheme(m_tab.GetSafeHwnd(), L, L);SetWindowTheme是uxtheme.dll里的函数MFC项目里包含#include uxtheme.h之后可以直接调用。第一个参数是控件句柄第二个和第三个参数传入空字符串表示让该控件使用“无主题”模式也就是回退到经典的3D风格绘制逻辑。这样Tab标题区就会完全交给你的DrawItem不再受到主题干扰。不过要注意这会让Tab控件左侧、右侧以及页面边框区域也一并回归到老式“凸起边框”的绘制风格。也就是说如果你想要的是一个干净的扁平化页面边框光靠SetWindowTheme是不够的还需要在WM_ERASEBKGND和页面区域背景上做联动处理。这一点我放在第5节细说。另外还有一个高频问题如果程序启动后用户手动切换了系统主题已经关闭主题的控件不会自动感知到。你需要在代码里预留一个WM_THEMECHANGED的处理一旦收到主题变更消息就重新调用一次SetWindowTheme否则控件会进入一个不稳定的绘制状态。3. 一步步写出可用的自绘Tab控件3.1 设置控件样式并让窗口取消主题化先声明一个CTabCtrl子类我这里叫CTabCtrlEx。在OnCreate或者外部初始化函数里做四件事修改样式、关闭主题、初始化字体、设置固定的Tab尺寸。// TabCtrlEx.h class CTabCtrlEx : public CTabCtrl { DECLARE_DYNAMIC(CTabCtrlEx) public: CTabCtrlEx(); virtual ~CTabCtrlEx(); void Init(); // 初始化 void SetCustomFont(); BOOL GetCloseButtonRect(int iItem, CRect outRect) const; // 用于关闭按钮热区 protected: afx_msg BOOL OnEraseBkgnd(CDC* pDC); afx_msg void DrawItem(LPDRAWITEMSTRUCT lpDrawItemStruct); DECLARE_MESSAGE_MAP() private: CFont m_fontNormal; CFont m_fontBold; };// TabCtrlEx.cpp void CTabCtrlEx::Init() { // 开启Owner-Draw样式同时使用固定宽度 ModifyStyle(0, TCS_OWNERDRAWFIXED | TCS_FIXEDWIDTH); // 关闭主题否则DrawItem会被系统主题覆盖 ::SetWindowTheme(m_hWnd, L, L); // 固定Tab高度在标准96DPI下设为36像素 SetItemSize(CSize(140, 36)); SetCustomFont(); }这里有个选择TCS_FIXEDWIDTH加上SetItemSize会让所有Tab的宽度一样视觉上更整齐而且切换时不会因为文字宽度不同导致标题区跳动。代价是文字过长会被裁剪所以通常配合超长省略号逻辑使用。3.2 在DrawItem里完整绘制选项卡状态接下来是核心的DrawItem实现。我习惯分成三个步骤先画背景再画选中指示条最后画文字。void CTabCtrlEx::DrawItem(LPDRAWITEMSTRUCT lpDIS) { CDC* pDC CDC::FromHandle(lpDIS-hDC); CRect rcItem(lpDIS-rcItem); BOOL bSelected (lpDIS-itemState ODS_SELECTED) ! 0; // 1. 整个Tab标题区的背景 if (bSelected) pDC-FillSolidRect(rcItem, RGB(255, 255, 255)); else pDC-FillSolidRect(rcItem, RGB(238, 238, 238)); // 2. 选中项左侧的高亮竖线 CRect rcIndicator rcItem; rcIndicator.right rcIndicator.left 3; pDC-FillSolidRect(rcIndicator, bSelected ? RGB(0, 120, 215) : RGB(200, 200, 200)); // 3. 绘制文字 CString strText; GetItemText(lpDIS-itemID, strText); CFont* pOldFont pDC-SelectObject(bSelected ? m_fontBold : m_fontNormal); pDC-SetBkMode(TRANSPARENT); pDC-SetTextColor(bSelected ? RGB(20, 20, 20) : RGB(128, 128, 128)); CRect rcText rcItem; rcText.left 10; // 让文字避开左侧指示条 pDC-DrawText(strText, rcText, DT_LEFT | DT_VCENTER | DT_SINGLELINE | DT_END_ELLIPSIS); pDC-SelectObject(pOldFont); }这段代码看起来简单但有几个细节要注意。CDC::FromHandle和CDC::Detach需要配对使用。我这里为了让代码精炼省略了Detach但在实际中用CClientDC或直接Attach的话一定要记得释放HDC否则在频繁重绘时会造成GDI资源泄漏。稳妥的做法是自己在函数末尾调用pDC-Detach()。GetItemText的第一个参数是Tab项索引而不是项ID。Owner-Draw中lpDIS-itemID实际上就是索引如果不放心可以先用GetItemCount做一次范围校验。SetBkMode(TRANSPARENT)不能省。很多自绘控件文字出现白底就是因为背景模式下DrawText会把文字区域的背景填成当前背景色。3.3 设置字体与尺寸避免默认字体一眼暴露“违和感”默认的CTabCtrl在自绘模式下依然使用系统默认UI字体如果和你的界面字体不一致画出来会非常突兀。所以建议创建两套字体常规体和粗体分别用于非选中和选中状态。void CTabCtrlEx::SetCustomFont() { LOGFONT lf {0}; SystemParametersInfo(SPI_GETICONTITLELOGFONT, sizeof(lf), lf, 0); lf.lfHeight -14; // 或按DPI换算-MulDiv(14, dpi, 72) lf.lfWeight FW_NORMAL; m_fontNormal.CreateFontIndirect(lf); lf.lfWeight FW_SEMIBOLD; m_fontBold.CreateFontIndirect(lf); }如果你做了高DPI适配这里的lf.lfHeight不能写死。标准做法是lf.lfHeight -MulDiv(14, pDC-GetDeviceCaps(LOGPIXELSY), 72);然后在WM_DPICHANGED时重建字体并Invalidate。在第3.2的DrawItem里标题区矩形是系统算好的固定宽度。如果你还想要每个Tab自带一个“关闭按钮”可以在画文字时留出右侧空间然后单独画一个“×”字符。热区计算我放在第4节讲因为这里最容易被忽略。4. 我实际踩过的五个坑以及定位思路自绘CTabCtrl最费时间的往往不是写绘制代码而是排查各种看起来莫名其妙的“被系统干预”问题。我把踩过的坑按现象整理成一个速查表再挑几个典型场景展开说。现象可能原因定位思路DrawItem画完被系统主题覆盖视觉样式未关闭调用SetWindowTheme清空主题标签区域背景出现灰白断层Tab控件默认背景与自绘背景不一致重写OnEraseBkgnd并整体填充背景色选中项切换时标题有轻微跳动文字宽度不一致导致系统计算宽度变化使用TCS_FIXEDWIDTH SetItemSize关闭按钮热区与绘制位置对不上热区计算错位或DPI缩放未处理把热区计算抽成统一函数和绘制共用高DPI下文字模糊、矩形错位程序未声明DPI Aware或字体未重建配置manifest并监听WM_DPICHANGED4.1 画完的标签总被系统的“夜光”盖住这个坑最隐蔽。现象是你的DrawItem确实执行了但选中项下方总有一条蓝色或半透明的细线无论如何都盖不掉。排查到后面你会发现是主题绘制在作祟。我之前有一版代码在样式设置上加了TCS_OWNERDRAWFIXED却没有调用SetWindowTheme于是Win10系统在DrawItem之后又用默认视觉样式画了一遍选中态的高亮边框。表面上看就是“我画的内容被系统盖住了一部分”。建议你在写任何自绘Tab之前第一次初始化就明确调用::SetWindowTheme(m_hWnd, L, L);并做好主题变更监听。这样至少能保证绘制环境一致性后续排查范围会小很多。4.2 标签区域背景出现“断层”关闭主题后Tab控件会把标签栏区域、页面区域按照老式3D控件风格绘制成浅灰色。如果你自绘的背景是白色或者其他颜色就会看到标签栏和页面区域之间出现很明显的色块割裂。处理方法有两个方向一个方向是把整个Tab控件的背景统一成你的目标色。需要在子类里重写OnEraseBkgnd把所有区域填充成同一颜色再在DrawItem里继续画每个Tab标题块。BOOL CTabCtrlEx::OnEraseBkgnd(CDC* pDC) { CRect rcClient; GetClientRect(rcClient); pDC-FillSolidRect(rcClient, RGB(255, 255, 255)); return TRUE; }另一个方向是让页面区域真正交给页面子窗口去承担背景Tab控件只要管好自己那一行。很多时候我们会在Tab控件下面叠一个静态背景窗口或容器把页面区域的视觉统一交给那个容器处理。这种做法更灵活但需要处理好父子窗口的重叠位置。4.3 选中态和非选中态之间宽度不一致导致跳动系统默认的Tab控件每个Tab宽度由文字长度决定。自绘时如果不做处理切换选中项后标题区宽度会重新计算造成明显的移动感。解决方式非常简单在Init里加一行ModifyStyle(0, TCS_OWNERDRAWFIXED | TCS_FIXEDWIDTH); SetItemSize(CSize(140, 36));这里你就会发现TCS_FIXEDWIDTH实际上是自绘的好朋友。它把每个Tab的标题区固定成同样大小你的绘制坐标、关闭按钮热区、选中指示条位置都能基于固定宽度做省了很多动态计算。4.4 加了关闭按钮之后热区完全对不上要说自绘Tab里最烦人的细节就是关闭按钮的热区。我第一次实现时直接在DrawItem里固定画了一个(rcItem.right - 18, rcItem.top 8)的矩形作为“×”按钮结果鼠标点击时发现按钮区域根本点不准。原因很简单绘制时使用rcItem计算但点击时用的是窗口坐标两者没有统一换算。更稳妥的做法是把热区计算提取成独立函数绘制和命中测试都调用它。BOOL CTabCtrlEx::GetCloseButtonRect(int iItem, CRect outRect) const { CRect rcItem; if (!GetItemRect(iItem, rcItem)) return FALSE; outRect CRect( rcItem.right - 20, rcItem.top 8, rcItem.right - 8, rcItem.top 20); return TRUE; }在WM_LBUTTONDOWN里先遍历所有Tab项判断点击位置是否落在某个关闭按钮的热区内再决定是切换页面还是关闭页面。命中测试和绘制共用一套函数就能避免“画在A处点在B处”的老大难问题。4.5 DPI缩放下文字发虚、矩形错位这个问题在Win10下尤其常见尤其是笔记本外接高分屏时。如果程序没有声明DPI AwareWindows会对整个窗口做位图拉伸看起来就是文字发虚、矩形边界对不齐。两个必要操作一是在项目manifest里声明PerMonitorV2级别的DPI Aware二是在WM_DPICHANGED消息里根据新DPI重建字体、重新计算SetItemSize然后Invalidate(FALSE)强制重绘。如果你用的是Visual Studio的MFC工程可以在项目属性里开启“DPI感知”选项也可以手动加manifest片段。声明了DPI Aware之后GetDeviceCaps(LOGPIXELSY)才会返回真实DPI而不是系统缓存的96字体换算逻辑才能真正生效。5. 页面区域的联动自绘别让标签栏“独美”很多自绘方案最后看起来很奇怪原因不是Tab标题区画得不好而是页面区域没有跟着改。一个白色自绘标签栏配上一个系统默认灰色页面边框整体视觉依然是割裂的。要实现完整的观感统一需要处理两部分页面区域的边框和背景、以及Tab控件客户区内部的填充色。5.1 用TCN_SELCHANGE把页面绘制和标签联动起来CTabCtrl自带通知消息TCN_SELCHANGE在用户切换选中页时发送给父窗口。MFC里通常在对话框上处理这个通知然后切换对应的页面子窗口显示状态。void CMainDlg::OnTcnSelchangeTab(NMHDR* pNMHDR, LRESULT* pResult) { int iSel m_tab.GetCurSel(); // 切换页面对应的子窗口显示 for (int i 0; i m_pageCount; i) { if (m_pages[i].GetSafeHwnd()) m_pages[i].ShowWindow(i iSel ? SW_SHOW : SW_HIDE); } *pResult 0; }如果页面区域是纯色背景设置子窗口背景颜色的常用做法是用WM_CTLCOLOR返回一个画刷并调用SetBkColor设置文字背景色。这样做的好处是每个页面子窗口的背景自然统一不会出现Tab和页面之间颜色不一致的情况。5.2 把自绘范围扩展到边框你的逼格才算真的到位如果你想要更彻底的视觉效果可以放弃Tab控件自带的页面边框用一个半透明或细线的客户区来代替。具体做法是设置Tab控件为无边框样式然后在父窗口中自己画一条水平的1像素分割线作为Tab标题区和页面内容区的分界线。这种方案下自绘CTabCtrl就不再是“一个控件”而是在扮演一个界面框架的角色。实现难度会稍微上升但视觉效果会干净非常多。我做的那个深色主题工具最终就是把Tab控件放在一个有自定义背景的容器上页面内容区用独立的CView/CWnd承载整体看起来就接近现代软件的标签页观感了。顺着这个思路延伸你还可以在TCN_SELCHANGE触发时给页面切换加一点淡入动画或者为Tab标签增加拖拽排序功能。这些都属于自绘控件之上的交互增强只要绘制基础打牢了扩展起来并不会太难。最后分享一个我在项目里反复提醒自己的经验自绘控件最忌讳“一次画到位”的心态。系统在切窗口状态、调整尺寸、改变主题、改变DPI时都会触发重绘你要做的不是追求第一次画得完美而是保证所有触发路径下最终的绘制结果一致。把DrawItem、OnEraseBkgnd、热区计算、DPI重建字体这几件事分开封装好后面遇到任何奇怪的重绘问题你都能用“先清掉残余绘制再统一重画”的思路快速定位。这套方法论比任何一份现成的自绘代码都值钱。本文还有配套的精品资源点击获取