简介这套自绘CTabCtrl源码包面向MFC开发者旨在突破系统默认标签页控件样式单一的局限实现高度可定制的标签外观与交互效果。压缩包共2个文件包含1个cpp与1个h源码体积仅6KB核心实现集中在CoolTabCtrl类中。已有358人学习下载适合希望掌握自定义控件绘制的中级Windows程序员参考。源码通过重写OnPaint配合GDI函数绘制标签、边框与文字并处理WM_NCPAINT、WM_ERASEBKGND消息完善非客户区绘制借助SetTimer/OnTimer实现滑动、淡入淡出等动画过渡同时预留颜色主题、图标扩展接口。整体结构紧凑既可直接集成到现有MFC工程也可作为理解设备上下文、消息映射与自绘机制的教学样例。1. 自绘 CTabCtrl原生控件跟不上需求时绕不开的一条路项目里有个用了许多年的 MFC 面板Tab 控件还是系统自带灰底黑框那副面孔。UI 提了 N 版要求选中块要圆角、悬停要变色、还要带关闭按钮。原生 CTabCtrl 连文字底色都按系统主题来想整套换皮只剩自绘这一条路。自绘没有多少神秘感说穿了就是把TCS_OWNERDRAWFIXED风格打开在DrawItem里自己画背景、文字和边框。这份资源给的是一个人人可抄的 CTabCtrl 自绘实现适合 MFC 项目里嫌 Tab 丑、又不想引第三方库的开发者。跟着做能拿到一个可配色、可加关闭按钮、可平滑切换的标签条。2. 选出 Owner-Draw 路线消息流、子类骨架与 DRAWITEMSTRUCT 字段2.1 自绘与 Custom Draw两条路线的适用边界MFC 里给 CTabCtrl 换肤有两条主流路线。第一条是TCS_OWNERDRAWFIXED加WM_DRAWITEM整个标签项都交给你画原生的绘制逻辑基本被旁路第二条是走NM_CUSTOMDRAW通知在绘制各阶段插手改颜色、改字体。我接手过不少老项目见得最多的反而是第一种原因很直接CTabCtrl 的 Custom Draw 在启用视觉样式后返回码组合比较绕CDDS_ITEMPREPAINT、CDRF_NOTIFYITEMDRAW这些状态很容易漏漏一个就出现“只改了半截”的怪样子。相比之下 Owner-Draw 更接近白纸作画逻辑更直白。两条路线的取舍我一般按下表判断维度Owner-DrawTCS_OWNERDRAWFIXEDCustom DrawNM_CUSTOMDRAW触发机制每个无效项发 WM_DRAWITEM绘制阶段发 NM_CUSTOMDRAW绘制自由度全项自绘底色、边框、文字全可控按阶段修改适合局部按摩上手难度中等需要处理完整绘制偏低但状态机易踩漏典型场景想要深色主题、圆角、关闭按钮只想改文字或选中色结论很朴素项不多、追求整体观感选 Owner-Draw只调一两处颜色Custom Draw 更快。这份资源的核心代码用的是 Owner-Draw 路线后面所有章节都围绕它展开。2.2 三步搭起子类骨架风格、反射消息与 DrawItem 入口自绘 CTabCtrl 的本质是一个从CTabCtrl派生的子类最关键的三个步骤缺一不可加自绘风格、反射WM_DRAWITEM、在OnDrawItem里接住绘制数据结构。先看子类声明和消息映射// CMyTabCtrl.h class CMyTabCtrl : public CTabCtrl { public: CMyTabCtrl(); protected: // 在窗口创建、绑定 DDX 时都会被调用 virtual void PreSubclassWindow() override; // WM_DRAWITEM 被反射到控件自身 afx_msg void OnDrawItem(int nIDCtl, LPDRAWITEMSTRUCT lpDrawItemStruct); DECLARE_MESSAGE_MAP() };// CMyTabCtrl.cpp BEGIN_MESSAGE_MAP(CMyTabCtrl, CTabCtrl) ON_WM_DRAWITEM() END_MESSAGE_MAP() void CMyTabCtrl::PreSubclassWindow() { CTabCtrl::PreSubclassWindow(); // 自绘风格必须在子类化阶段加上 ModifyStyle(0, TCS_OWNERDRAWFIXED); }PreSubclassWindow是 MFC 在控件被子类化时统一回调的入口无论是DDX_Control绑定还是SubclassDlgItem都会走到这里。在这个位置加TCS_OWNERDRAWFIXED比在Create之后ModifyStyle再手动刷新要稳避免了“风格晚一步、首次绘制还是老面孔”的问题。ON_WM_DRAWITEM是 MFC 对WM_DRAWITEM的反射宏系统发到父窗口的绘制消息会被路由回控件自身这样所有绘制逻辑都收拢在控件类内部。接着看OnDrawItem的初版实现void CMyTabCtrl::OnDrawItem(int nIDCtl, LPDRAWITEMSTRUCT lpDrawItemStruct) { if (lpDrawItemStruct nullptr) return; CDC* pDC CDC::FromHandle(lpDrawItemStruct-hDC); int nIndex (int)lpDrawItemStruct-itemID; CRect rcItem lpDrawItemStruct-rcItem; // 先覆盖整块客户区背景避免露出原生底色 CRect rcClient; GetClientRect(rcClient); pDC-FillSolidRect(rcClient, RGB(240, 240, 240)); // 接住选中、悬停、焦点状态 UINT nState lpDrawItemStruct-itemState; BOOL bSelected (nState ODS_SELECTED) ! 0; BOOL bHot (nState ODS_HOTLIGHT) ! 0; CString strText; GetItemText(nIndex, strText); // 后面章节再填充具体绘制 }注意CDC::FromHandle拿到的指针不需要也不应该DeleteDC它只是包装了一下已有句柄。这里先把整个客户区铺底是在给后面的绘制打底否则 item 之外的区域会透出对话框的灰色背景看起来就像“自绘了一半”。2.3 DRAWITEMSTRUCT 字段对照绘制前先弄清手上有哪些牌LPDRAWITEMSTRUCT是自绘控件的“数据合同”绘制前最好把字段逐个理清不然画着画着就会发现拿错了区域。常用字段如下字段含义自绘 Tab 里的用途CtlType控件类型自绘 Tab 里是ODT_TAB一般用不到防御性判断用CtlID控件 ID多个自绘控件共用一个处理函数时区分hDC绘制设备句柄所有 GDI 绘制的入口rcItem当前标签项的矩形区域画背景、文字、关闭按钮的基准itemID标签项索引GetItemText(nIndex)取文本itemAction绘制动作ODA_DRAWENTIRE等判断是整项重绘还是仅状态变化itemState项状态位ODS_SELECTED选中、ODS_HOTLIGHT热跟踪itemState里最容易漏的是ODS_HOTLIGHT。它只在同时具备TCS_HOTTRACK风格的系统里才会置位前面子类骨架里只加了TCS_OWNERDRAWFIXED是不够的后面避坑章节会专门展开。另一个常被误用的字段是rcItem——它只代表标签项本身不含下方的内容区所以画选中底时通常要在rcItem基础上再向外扩一两像素否则选中块和内容区之间会留一条缝。// 取选中态文本颜色的做法从系统主题里读或者自备配色 UINT nOldMode pDC-SetBkMode(TRANSPARENT); COLORREF clrOldText pDC-SetTextColor(bSelected ? RGB(30, 30, 30) : RGB(90, 90, 90)); pDC-DrawText(strText, rcItem, DT_CENTER | DT_VCENTER | DT_SINGLELINE); pDC-SetTextColor(clrOldText); pDC-SetBkMode(nOldMode);SetBkMode(TRANSPARENT)是自绘文字的关键它让文本背景不再覆盖前面画的底色。DrawText 的DT_VCENTER要求矩形高度足够如果标签项高度被压得太扁文字会贴顶这时要检查SetItemSize设置的高度是否把边框也算进去了。3. 绘制细节选中态、悬停态、文字与关闭按钮的像素级处理3.1 先画底再画字背景、边框、选中块的分层顺序自绘最忌讳想到哪画到哪。同一个标签项绘制顺序错了最后显示出来就是乱糟糟的一团。我一般按“客户区底色 → 所有标签项底 → 当前选中块 → 边框 → 文字 → 附加元素图标/关闭按钮→ 状态提示”的顺序来每一层只覆盖上一层的一部分后画的永远盖住先画的。void CMyTabCtrl::DrawTabItem(CDC* pDC, int nIndex, CRect rcItem, BOOL bSelected, BOOL bHot) { // 第一层所有标签项的公共底色 pDC-FillSolidRect(rcItem, bSelected ? RGB(255, 255, 255) : RGB(235, 235, 235)); // 第二层选中块根部压一条深色线和内容区形成视觉连接 if (bSelected) { CRect rcSel rcItem; rcSel.bottom 2; pDC-FillSolidRect(rcSel, RGB(255, 255, 255)); } // 第三层聚焦/悬停时给一个浅色描边 if (bHot !bSelected) { CPen pen(PS_SOLID, 1, RGB(180, 180, 180)); CPen* pOld pDC-SelectObject(pen); CBrush* pOldBr (CBrush*)pDC-SelectStockObject(NULL_BRUSH); pDC-Rectangle(rcItem); pDC-SelectObject(pOldBr); pDC-SelectObject(pOld); } }这段代码里的分层思想比代码本身更重要第一层保证每个标签项有均匀底色第二层把选中块和内容区连成一个整体第三层只对悬停项做描边。注意SelectStockObject(NULL_BRUSH)让Rectangle只画边框不填充避免把第一层的底色盖没。选中块的圆角处理常见做法是用CreateRoundRectRgn裁剪出圆角区域再填充CRgn rgn; CBrush br(RGB(255, 255, 255)); // 注意 right 1、bottom 1CreateRoundRectRgn 的右/下边界是排他性的 rgn.CreateRoundRectRgn(rcItem.left, rcItem.top, rcItem.right 1, rcItem.bottom 1, 8, 8); pDC-FillRgn(rgn, br);CreateRoundRectRgn的矩形参数左、上包含右、下不包含直接传rcItem.right会让最右一列像素圆角化不完整所以手工加 1。这是自绘控件里最常见的“差一个像素”来源之一。圆角半径 8 像素适合标签高度 28 左右标签高度更大时可以按rcItem.Height() / 3动态计算。3.2 文字不糊不清透明背景、字体缩放与状态配色文字是自绘里最容易翻车的环节。多数情况下文字发糊不是画法问题而是没有设置背景模式、或者字体没有随 DPI 缩放。第一件事永远是SetBkMode(TRANSPARENT)这一步漏掉DrawText 会用当前 DC 背景色填充文字矩形把精心画好的底色盖成一块方斑。void CMyTabCtrl::DrawTabText(CDC* pDC, int nIndex, CRect rcText, BOOL bSelected) { CString strText; GetItemText(nIndex, strText); // 字体随 DPI 缩放以 96 DPI 为基准按当前逻辑 DPI 等比放大 int nLogPixels pDC-GetDeviceCaps(LOGPIXELSY); int nFontSize MulDiv(12, nLogPixels, 96); CFont font; font.CreateFont(-nFontSize, 0, 0, 0, bSelected ? FW_SEMIBOLD : FW_NORMAL, FALSE, FALSE, 0, DEFAULT_CHARSET, OUT_DEFAULT_PRECIS, CLIP_DEFAULT_PRECIS, CLEARTYPE_QUALITY, DEFAULT_PITCH, _T(Microsoft YaHei)); CFont* pOldFont pDC-SelectObject(font); pDC-SetBkMode(TRANSPARENT); pDC-SetTextColor(bSelected ? RGB(30, 30, 30) : RGB(100, 100, 100)); pDC-DrawText(strText, rcText, DT_CENTER | DT_VCENTER | DT_SINGLELINE | DT_END_ELLIPSIS); pDC-SelectObject(pOldFont); }参数说明nFontSize是字体的磅值乘像素比后再取负CreateFont的负数高度表示按字符高度而不是全字高度计算这个细节能避免中文字符被截顶FW_SEMIBOLD用在选中态上让当前标签略粗视觉上更“实”CLEARTYPE_QUALITY在 100% 缩放下文字边缘更干净但如果你在旧系统上用灰色背景ClearType 反而会有彩色镶边需要退回ANTIALIASED_QUALITY。DT_END_ELLIPSIS的作用是标签文字过长时自动打省略号避免文字画出标签边界。不过这个标志在DT_VCENTER同时存在时某些系统会忽略垂直居中稳妥做法是给rcText各边预先缩进 6 像素再决定要不要保留该标志。3.3 给标签加关闭按钮与图标区域计算和命中测试带关闭按钮是这套自绘里相对加分的功能。关闭按钮不该改变标签项的文字绘制区域否则文字会撞到按钮上。我通常约定按钮占标签右侧 18 像素宽的正方形绘制文字时把rcText.right先减掉这 18 像素。void CMyTabCtrl::DrawCloseButton(CDC* pDC, CRect rcTab, BOOL bHot) { // 按钮矩形垂直居中宽高 12 像素 CRect rcBtn(rcTab.right - 18, rcTab.top (rcTab.Height() - 12) / 2, rcTab.right - 6, rcTab.top (rcTab.Height() - 12) / 2 12); // 悬停时给按钮画一个浅灰圆底提示可点击 if (bHot) { CRgn rgn; CBrush br(RGB(220, 220, 220)); rgn.CreateRoundRectRgn(rcBtn.left, rcBtn.top, rcBtn.right 1, rcBtn.bottom 1, 3, 3); pDC-FillRgn(rgn, br); } // 用两条交叉线画 X 形状 CPen pen(PS_SOLID, 1, bHot ? RGB(60, 60, 60) : RGB(150, 150, 150)); CPen* pOldPen pDC-SelectObject(pen); pDC-MoveTo(rcBtn.left 3, rcBtn.top 3); pDC-LineTo(rcBtn.right - 3, rcBtn.bottom - 3); pDC-MoveTo(rcBtn.right - 3, rcBtn.top 3); pDC-LineTo(rcBtn.left 3, rcBtn.bottom - 3); pDC-SelectObject(pOldPen); }画关闭按钮本身不难难在命中测试。绘制逻辑知道按钮位置点击判断却要重新算一遍两处如果不共用同一个矩形计算结果很容易出现“画在右边、点在左边”的错位。CRect CMyTabCtrl::GetCloseButtonRect(int nIndex) const { CRect rcItem; GetItemRect(nIndex, rcItem); return CRect(rcItem.right - 18, rcItem.top (rcItem.Height() - 12) / 2, rcItem.right - 6, rcItem.top (rcItem.Height() - 12) / 2 12); }按钮和文字区域分离后点击判断就集中到WM_LBUTTONUP里先遍历每个标签项判断点击位置落在哪个rcItem内再单独判断是否落在对应的关闭按钮矩形内。落在按钮上给父窗口发一个自定义通知可以是WM_USER 100也可以复用TCN_SELCHANGE旁边自定义的通知码落在非按钮区域则切换选中项。这里有个值得注意的习惯命中测试应基于GetItemRect实时计算而不是缓存上次绘制用的矩形因为标签可能在重排后位置变化缓存很容易造成热点漂移。4. 从灰壳到深色风一版可切换的两套配色完整实现4.1 把参数集中到结构体颜色、圆角、内边距、字体自绘控件最怕把 RGB 常量散落在各绘制函数里等客户提“能不能换个蓝色调”时得满文件找RGB关键字。与其这样不如一开始就抽一个配置结构体所有绘制函数只从结构体取参数。struct TabDrawParams { COLORREF clrBg; // 控件背景 COLORREF clrItemNormal; // 未选中标签底 COLORREF clrItemHover; // 悬停标签底 COLORREF clrItemSel; // 选中标签底 COLORREF clrBorder; // 描边颜色 COLORREF clrTextNormal; // 未选中文字 COLORREF clrTextSel; // 选中文字 COLORREF clrCloseNormal; // 关闭按钮默认颜色 COLORREF clrCloseHover; // 关闭按钮悬停颜色 int nCornerRadius; // 圆角半径 int nTextPadding; // 文字左右内边距 BOOL bShowClose; // 是否显示关闭按钮 };这样一个结构体解决两个问题一是换配色只改数据不动逻辑二是可以预置多套方案在运行时切换。下面是一套深色方案的典型取值字段典型取值说明clrBgRGB(32, 32, 32)整体底色要和内容区背景一致clrItemNormalRGB(45, 45, 48)未选中标签略亮于背景clrItemSelRGB(60, 63, 65)选中标签最亮形成层级clrTextNormalRGB(160, 160, 160)低对比文字clrTextSelRGB(255, 255, 255)高对比文字nCornerRadius6标签高度 28 时比较协调结构体就位后OnDrawItem里不再直接写颜色值而是从成员变量m_params取。这样第四章后面的切换逻辑才有立足点。4.2 集成到对话框消息映射、尺寸调整、重绘触发在对话框里集成自绘 Tab 分三步声明控件成员、绑定变量、初始化参数。假对话框类名是CMyDialog。// CMyDialog.h class CMyDialog : public CDialogEx { protected: CMyTabCtrl m_tab; HICON m_hIcon; void InitTabStyle(); };// CMyDialog.cppOnInitDialog 中调用 void CMyDialog::InitTabStyle() { // 绑定 DDX 时子类化PreSubclassWindow 中的自绘风格由此生效 if (!m_tab.SubclassDlgItem(IDC_TAB_MAIN, this)) { ASSERT(FALSE); return; } // 配置两套配色浅色和深色 TabDrawParams paramsLight MakeLightParams(); TabDrawParams paramsDark MakeDarkParams(); m_tab.SetDrawParams(0, paramsLight); m_tab.SetDrawParams(1, paramsDark); m_tab.SetActiveTheme(0); // 固定标签宽度让 4 个标签均匀分布 m_tab.ModifyStyle(0, TCS_FIXEDWIDTH | TCS_HOTTRACK); m_tab.SetItemSize(CSize(90, 28)); // 添加标签文本 m_tab.InsertItem(0, _T(概览)); m_tab.InsertItem(1, _T(配置)); m_tab.InsertItem(2, _T(日志)); m_tab.InsertItem(3, _T(关于)); }SetDrawParams内部只保存结构体并调用Invalidate(FALSE)关键在第二个参数FALSE它告诉系统只重绘无效区域、不擦除背景。自绘控件里背景擦除通常由OnEraseBkgnd负责如果这里传TRUEWindows 先擦掉整块背景再触发绘制中间过程会闪烁。这也是整个自绘工程里最容易被忽略的效能细节。CSize(90, 28)有一个隐含陷阱Tab 控件的标签高度测量包含顶部边框实际可用文字高度会比 28 像素少 2 到 4 像素。如果发现文字垂直方向被切不要继续加大字号而是把DrawText的矩形用InflateRect(0, -2, 0, -2)收缩一点通常比改标签高度更有效。4.3 两套配色切换局部刷新与状态保持切换配色听起来只是换一组颜色值实际做起来有两个容易忽略的点重绘范围要控制、切换前要把旧状态记下来。看代码void CMyTabCtrl::SetActiveTheme(int nTheme) { if (nTheme m_nActiveTheme) return; m_nActiveTheme nTheme; // 只重绘标签区不动内容区减少闪烁 Invalidate(FALSE); }这里Invalidate(FALSE)配合OnEraseBkgnd返回TRUE能做到不擦旧图、直接覆盖重画。视觉上切换过程是“瞬间换肤”没有先白后黑的中间态。但配色切换通常不只是 Tab 控件自己的事它往往由外部一个“深色模式”开关触发内容区、边框、静态文字都要跟着变。常见的做法是在对话框里加一个成员记录当前主题切换按钮的BN_CLICKED里先更新内容区颜色再调用m_tab.SetActiveTheme。顺序有讲究先切内容区、再切 Tab。如果反过来内容区重绘的瞬间 Tab 还是旧配色用户会看到一瞬的眼花。如果要让标签宽度随文字长度自适应不要每次InsertItem后手动算宽度。TCS_FIXEDWIDTH让所有标签等宽配合SetItemSize最省心如果确实需要不等宽就要去掉TCS_FIXEDWIDTH然后在InsertItem后遍历所有项用GetTextExtent取文字宽度再逐个SetItemSize。这里有个血泪经验不等宽模式下切换标签时rcItem可能因为字体变化而重新计算如果你缓存了旧的rcItem绘制就会出现错位所以任何绘制函数的矩形都必须实时从GetItemRect获取。5. 自绘 CTabCtrl 的避坑清单五个高频翻车点与排查办法5.1 选中态上残留原生底色或边框现象标签项大部分已经是自绘效果但选中项周围仍有一圈灰色或系统主题色看起来像没画干净。原因TCS_OWNERDRAWFIXED只接管标签项内容的绘制标签控件客户区里不属于任何rcItem的部分仍然由系统按默认方式处理。当标签高度小于客户区高度时底部会露出原生背景。解决在OnDrawItem里第一件事就是把整个客户区铺满底色而不是只画rcItem。我之前见到的另一种错误做法是只在OnEraseBkgnd里铺底但自绘触发重绘时OnEraseBkgnd未必被调用所以底色填充要放在绘制入口内而不是擦除入口。5.2 拖动窗口时闪烁不停现象窗口拖动或切换标签时Tab 区域频繁出现白色闪块严重时像在“抖”。原因默认的擦除背景和绘制分离EraseBkgnd先擦白WM_DRAWITEM后画内容两次操作之间屏幕刷新把中间状态暴露出来了。解决在控件类里拦掉背景擦除让自绘全程负责。BOOL CMyTabCtrl::OnEraseBkgnd(CDC* pDC) { // 背景统一在 OnDrawItem 里绘制这里直接吞掉 return TRUE; }OnEraseBkgnd返回TRUE表示“我已经擦了背景”系统便不再执行默认擦除。配合所有Invalidate调用都传FALSE闪烁基本能压住。如果还有轻微闪烁检查是否在OnDrawItem里调用了CClientDC或者重新GetDC导致重入。5.3 GDI 句柄泄漏看似卡顿实际是 DC 没释放现象程序刚启动正常切标签十来分钟后整个窗口失去响应任务管理器里 GDI 对象数持续增长最终绘制区域变黑。原因绘制代码里直接GetDC却不ReleaseDC或者每次绘制都new CPen、new CBrush而没删。GDI 句柄是系统级资源泄漏到一定数量后CreatePen就开始失败绘制函数静默返回。解决优先用栈对象让析构自动释放GetDC成对检查。void CMyTabCtrl::DrawBorder(CDC* pDC, CRect rc) { // 栈对象析构时自动 DeleteObject无需手动释放 CPen pen(PS_SOLID, 1, RGB(80, 80, 80)); CPen* pOldPen pDC-SelectObject(pen); pDC-Rectangle(rc); pDC-SelectObject(pOldPen); }排查方法在绘制函数入口和出口分别调用GetObjectCount打日志看退出后数量是否回到入口前的值。如果用的是GetDC而不是pDC-GetSafeHdc务必确认ReleaseDC在每一条分支上都执行包括异常分支。这块玄学问题很少几乎都是成对调用没写全。5.4 高分屏下文字发虚、标签错位现象在 125% 或 150% 缩放的屏幕上标签文字明显发糊点击热区与实际显示位置偏移。原因进程没有声明 DPI 感知系统把窗口整体放大但 GDI 绘制拿到的坐标还是逻辑像素字体又没有随 DPI 等比缩放于是文字被拉伸后显得虚。解决工程里加入 DPI 感知声明并在创建字体时按LOGPIXELSY缩放。最接近现代系统的做法是在app.manifest里声明PerMonitorV2让窗口缩放事件发生时系统给你重绘机会。代码层面3.2节里的MulDiv(12, nLogPixels, 96)就是字体的缩放基准不要把它写死成 12。实际调试时可以在绘制函数里临时OutputDebugString打印rcItem和字体高度对比 96 DPI 与 150% 下的数值确认缩放是否生效。5.5 热跟踪失效鼠标悬停没反应现象已经实现了ODS_HOTLIGHT分支但鼠标移到标签上始终不触发悬停描边完全没动静。原因ODS_HOTLIGHT只有在控件带TCS_HOTTRACK风格时才由系统置位。前面第 2 章骨架里只加了TCS_OWNERDRAWFIXED漏了热跟踪风格。解决在PreSubclassWindow里补上风格或者更稳妥地自己跟踪鼠标位置。void CMyTabCtrl::PreSubclassWindow() { CTabCtrl::PreSubclassWindow(); ModifyStyle(0, TCS_OWNERDRAWFIXED | TCS_HOTTRACK); }如果因为兼容旧主题仍收不到ODS_HOTLIGHT就自己维护悬停索引在WM_MOUSEMOVE里用HitTest判断光标落在哪个标签项保存为m_nHoverIndex然后只对那一项触发局部重绘。注意离开控件时要重置m_nHoverIndex -1并重绘否则鼠标移出后最后那个标签仍然保持悬停样式。用自定义索引还有个额外好处当你在同一个绘制函数里既画关闭按钮悬停、又画标签悬停时状态判断完全在自己手里不必依赖系统。6. 一个进阶技巧把绘制参数抽成配置结构连过渡动画一起收编自绘控件做到能换色、能加关闭按钮已经够用但还有一个值得做的升级把整套绘制收编成一个可配置的渲染函数让动画、主题切换都从同一个入口走而不是在OnDrawItem里堆一长串if else。我的做法是定义渲染入口输入只有四个——DC、索引、矩形、状态void CMyTabCtrl::DrawTab(CDC* pDC, int nIndex, CRect rcItem, const TabState state) { const TabDrawParams p m_params[m_nActiveTheme]; DrawTabBackground(pDC, rcItem, state, p); DrawTabText(pDC, nIndex, rcItem, state, p); if (p.bShowClose state.bHover) DrawCloseButton(pDC, rcItem, state.bCloseHot); }TabState里集中了bSelected、bHover、bCloseHot三个布尔位任何动画中间态都可以用这个结构体扩展。比如做一个“选中块平滑移动”的动画在SetTimer的回调里让一个 0 到 1 的系数递增每帧计算插值位置后Invalidate(FALSE)然后把插值矩形塞进rcItem渲染函数根本不用知道动画的存在它只负责把参数画出来。void CMyTabCtrl::OnTimer(UINT_PTR nIDEvent) { if (nIDEvent kAnimTimerId) { m_fAnim 0.15f; if (m_fAnim 1.0f) { m_fAnim 1.0f; KillTimer(kAnimTimerId); } Invalidate(FALSE); } CTabCtrl::OnTimer(nIDEvent); }动画结束后把m_fAnim收敛到 1.0保证最终画面和静态绘制完全一致。这类动画不要贪多标签切换 100 到 150 毫秒的短过渡最舒服太长的滑动反而让人觉得界面“肉”。有一回我为了赶需求把绘制逻辑直接堆在OnDrawItem里颜色常量散落得到处都是。三个月后客户要换主题我翻遍文件找RGB常量每一处都不敢乱改最后还是推倒重构成了配置结构。从那以后我每次接手自绘控件都强制走一遍“参数结构体 渲染函数收编”的流程换主题、加动画都变成改数据的小事。这份自绘 CTabCtrl 的实现如果一开始就按这个思路组织后续维护会省掉不少后悔药希望帮到你。本文还有配套的精品资源点击获取 
长河君 · 2026/10/16 13:25:05 · 阅读 1.2k MFC自绘CTabCtrl：Owner-Draw实现与深色主题切换完整指南
简介这套自绘CTabCtrl源码包面向MFC开发者旨在突破系统默认标签页控件样式单一的局限实现高度可定制的标签外观与交互效果。压缩包共2个文件包含1个cpp与1个h源码体积仅6KB核心实现集中在CoolTabCtrl类中。已有358人学习下载适合希望掌握自定义控件绘制的中级Windows程序员参考。源码通过重写OnPaint配合GDI函数绘制标签、边框与文字并处理WM_NCPAINT、WM_ERASEBKGND消息完善非客户区绘制借助SetTimer/OnTimer实现滑动、淡入淡出等动画过渡同时预留颜色主题、图标扩展接口。整体结构紧凑既可直接集成到现有MFC工程也可作为理解设备上下文、消息映射与自绘机制的教学样例。1. 自绘 CTabCtrl原生控件跟不上需求时绕不开的一条路项目里有个用了许多年的 MFC 面板Tab 控件还是系统自带灰底黑框那副面孔。UI 提了 N 版要求选中块要圆角、悬停要变色、还要带关闭按钮。原生 CTabCtrl 连文字底色都按系统主题来想整套换皮只剩自绘这一条路。自绘没有多少神秘感说穿了就是把TCS_OWNERDRAWFIXED风格打开在DrawItem里自己画背景、文字和边框。这份资源给的是一个人人可抄的 CTabCtrl 自绘实现适合 MFC 项目里嫌 Tab 丑、又不想引第三方库的开发者。跟着做能拿到一个可配色、可加关闭按钮、可平滑切换的标签条。2. 选出 Owner-Draw 路线消息流、子类骨架与 DRAWITEMSTRUCT 字段2.1 自绘与 Custom Draw两条路线的适用边界MFC 里给 CTabCtrl 换肤有两条主流路线。第一条是TCS_OWNERDRAWFIXED加WM_DRAWITEM整个标签项都交给你画原生的绘制逻辑基本被旁路第二条是走NM_CUSTOMDRAW通知在绘制各阶段插手改颜色、改字体。我接手过不少老项目见得最多的反而是第一种原因很直接CTabCtrl 的 Custom Draw 在启用视觉样式后返回码组合比较绕CDDS_ITEMPREPAINT、CDRF_NOTIFYITEMDRAW这些状态很容易漏漏一个就出现“只改了半截”的怪样子。相比之下 Owner-Draw 更接近白纸作画逻辑更直白。两条路线的取舍我一般按下表判断维度Owner-DrawTCS_OWNERDRAWFIXEDCustom DrawNM_CUSTOMDRAW触发机制每个无效项发 WM_DRAWITEM绘制阶段发 NM_CUSTOMDRAW绘制自由度全项自绘底色、边框、文字全可控按阶段修改适合局部按摩上手难度中等需要处理完整绘制偏低但状态机易踩漏典型场景想要深色主题、圆角、关闭按钮只想改文字或选中色结论很朴素项不多、追求整体观感选 Owner-Draw只调一两处颜色Custom Draw 更快。这份资源的核心代码用的是 Owner-Draw 路线后面所有章节都围绕它展开。2.2 三步搭起子类骨架风格、反射消息与 DrawItem 入口自绘 CTabCtrl 的本质是一个从CTabCtrl派生的子类最关键的三个步骤缺一不可加自绘风格、反射WM_DRAWITEM、在OnDrawItem里接住绘制数据结构。先看子类声明和消息映射// CMyTabCtrl.h class CMyTabCtrl : public CTabCtrl { public: CMyTabCtrl(); protected: // 在窗口创建、绑定 DDX 时都会被调用 virtual void PreSubclassWindow() override; // WM_DRAWITEM 被反射到控件自身 afx_msg void OnDrawItem(int nIDCtl, LPDRAWITEMSTRUCT lpDrawItemStruct); DECLARE_MESSAGE_MAP() };// CMyTabCtrl.cpp BEGIN_MESSAGE_MAP(CMyTabCtrl, CTabCtrl) ON_WM_DRAWITEM() END_MESSAGE_MAP() void CMyTabCtrl::PreSubclassWindow() { CTabCtrl::PreSubclassWindow(); // 自绘风格必须在子类化阶段加上 ModifyStyle(0, TCS_OWNERDRAWFIXED); }PreSubclassWindow是 MFC 在控件被子类化时统一回调的入口无论是DDX_Control绑定还是SubclassDlgItem都会走到这里。在这个位置加TCS_OWNERDRAWFIXED比在Create之后ModifyStyle再手动刷新要稳避免了“风格晚一步、首次绘制还是老面孔”的问题。ON_WM_DRAWITEM是 MFC 对WM_DRAWITEM的反射宏系统发到父窗口的绘制消息会被路由回控件自身这样所有绘制逻辑都收拢在控件类内部。接着看OnDrawItem的初版实现void CMyTabCtrl::OnDrawItem(int nIDCtl, LPDRAWITEMSTRUCT lpDrawItemStruct) { if (lpDrawItemStruct nullptr) return; CDC* pDC CDC::FromHandle(lpDrawItemStruct-hDC); int nIndex (int)lpDrawItemStruct-itemID; CRect rcItem lpDrawItemStruct-rcItem; // 先覆盖整块客户区背景避免露出原生底色 CRect rcClient; GetClientRect(rcClient); pDC-FillSolidRect(rcClient, RGB(240, 240, 240)); // 接住选中、悬停、焦点状态 UINT nState lpDrawItemStruct-itemState; BOOL bSelected (nState ODS_SELECTED) ! 0; BOOL bHot (nState ODS_HOTLIGHT) ! 0; CString strText; GetItemText(nIndex, strText); // 后面章节再填充具体绘制 }注意CDC::FromHandle拿到的指针不需要也不应该DeleteDC它只是包装了一下已有句柄。这里先把整个客户区铺底是在给后面的绘制打底否则 item 之外的区域会透出对话框的灰色背景看起来就像“自绘了一半”。2.3 DRAWITEMSTRUCT 字段对照绘制前先弄清手上有哪些牌LPDRAWITEMSTRUCT是自绘控件的“数据合同”绘制前最好把字段逐个理清不然画着画着就会发现拿错了区域。常用字段如下字段含义自绘 Tab 里的用途CtlType控件类型自绘 Tab 里是ODT_TAB一般用不到防御性判断用CtlID控件 ID多个自绘控件共用一个处理函数时区分hDC绘制设备句柄所有 GDI 绘制的入口rcItem当前标签项的矩形区域画背景、文字、关闭按钮的基准itemID标签项索引GetItemText(nIndex)取文本itemAction绘制动作ODA_DRAWENTIRE等判断是整项重绘还是仅状态变化itemState项状态位ODS_SELECTED选中、ODS_HOTLIGHT热跟踪itemState里最容易漏的是ODS_HOTLIGHT。它只在同时具备TCS_HOTTRACK风格的系统里才会置位前面子类骨架里只加了TCS_OWNERDRAWFIXED是不够的后面避坑章节会专门展开。另一个常被误用的字段是rcItem——它只代表标签项本身不含下方的内容区所以画选中底时通常要在rcItem基础上再向外扩一两像素否则选中块和内容区之间会留一条缝。// 取选中态文本颜色的做法从系统主题里读或者自备配色 UINT nOldMode pDC-SetBkMode(TRANSPARENT); COLORREF clrOldText pDC-SetTextColor(bSelected ? RGB(30, 30, 30) : RGB(90, 90, 90)); pDC-DrawText(strText, rcItem, DT_CENTER | DT_VCENTER | DT_SINGLELINE); pDC-SetTextColor(clrOldText); pDC-SetBkMode(nOldMode);SetBkMode(TRANSPARENT)是自绘文字的关键它让文本背景不再覆盖前面画的底色。DrawText 的DT_VCENTER要求矩形高度足够如果标签项高度被压得太扁文字会贴顶这时要检查SetItemSize设置的高度是否把边框也算进去了。3. 绘制细节选中态、悬停态、文字与关闭按钮的像素级处理3.1 先画底再画字背景、边框、选中块的分层顺序自绘最忌讳想到哪画到哪。同一个标签项绘制顺序错了最后显示出来就是乱糟糟的一团。我一般按“客户区底色 → 所有标签项底 → 当前选中块 → 边框 → 文字 → 附加元素图标/关闭按钮→ 状态提示”的顺序来每一层只覆盖上一层的一部分后画的永远盖住先画的。void CMyTabCtrl::DrawTabItem(CDC* pDC, int nIndex, CRect rcItem, BOOL bSelected, BOOL bHot) { // 第一层所有标签项的公共底色 pDC-FillSolidRect(rcItem, bSelected ? RGB(255, 255, 255) : RGB(235, 235, 235)); // 第二层选中块根部压一条深色线和内容区形成视觉连接 if (bSelected) { CRect rcSel rcItem; rcSel.bottom 2; pDC-FillSolidRect(rcSel, RGB(255, 255, 255)); } // 第三层聚焦/悬停时给一个浅色描边 if (bHot !bSelected) { CPen pen(PS_SOLID, 1, RGB(180, 180, 180)); CPen* pOld pDC-SelectObject(pen); CBrush* pOldBr (CBrush*)pDC-SelectStockObject(NULL_BRUSH); pDC-Rectangle(rcItem); pDC-SelectObject(pOldBr); pDC-SelectObject(pOld); } }这段代码里的分层思想比代码本身更重要第一层保证每个标签项有均匀底色第二层把选中块和内容区连成一个整体第三层只对悬停项做描边。注意SelectStockObject(NULL_BRUSH)让Rectangle只画边框不填充避免把第一层的底色盖没。选中块的圆角处理常见做法是用CreateRoundRectRgn裁剪出圆角区域再填充CRgn rgn; CBrush br(RGB(255, 255, 255)); // 注意 right 1、bottom 1CreateRoundRectRgn 的右/下边界是排他性的 rgn.CreateRoundRectRgn(rcItem.left, rcItem.top, rcItem.right 1, rcItem.bottom 1, 8, 8); pDC-FillRgn(rgn, br);CreateRoundRectRgn的矩形参数左、上包含右、下不包含直接传rcItem.right会让最右一列像素圆角化不完整所以手工加 1。这是自绘控件里最常见的“差一个像素”来源之一。圆角半径 8 像素适合标签高度 28 左右标签高度更大时可以按rcItem.Height() / 3动态计算。3.2 文字不糊不清透明背景、字体缩放与状态配色文字是自绘里最容易翻车的环节。多数情况下文字发糊不是画法问题而是没有设置背景模式、或者字体没有随 DPI 缩放。第一件事永远是SetBkMode(TRANSPARENT)这一步漏掉DrawText 会用当前 DC 背景色填充文字矩形把精心画好的底色盖成一块方斑。void CMyTabCtrl::DrawTabText(CDC* pDC, int nIndex, CRect rcText, BOOL bSelected) { CString strText; GetItemText(nIndex, strText); // 字体随 DPI 缩放以 96 DPI 为基准按当前逻辑 DPI 等比放大 int nLogPixels pDC-GetDeviceCaps(LOGPIXELSY); int nFontSize MulDiv(12, nLogPixels, 96); CFont font; font.CreateFont(-nFontSize, 0, 0, 0, bSelected ? FW_SEMIBOLD : FW_NORMAL, FALSE, FALSE, 0, DEFAULT_CHARSET, OUT_DEFAULT_PRECIS, CLIP_DEFAULT_PRECIS, CLEARTYPE_QUALITY, DEFAULT_PITCH, _T(Microsoft YaHei)); CFont* pOldFont pDC-SelectObject(font); pDC-SetBkMode(TRANSPARENT); pDC-SetTextColor(bSelected ? RGB(30, 30, 30) : RGB(100, 100, 100)); pDC-DrawText(strText, rcText, DT_CENTER | DT_VCENTER | DT_SINGLELINE | DT_END_ELLIPSIS); pDC-SelectObject(pOldFont); }参数说明nFontSize是字体的磅值乘像素比后再取负CreateFont的负数高度表示按字符高度而不是全字高度计算这个细节能避免中文字符被截顶FW_SEMIBOLD用在选中态上让当前标签略粗视觉上更“实”CLEARTYPE_QUALITY在 100% 缩放下文字边缘更干净但如果你在旧系统上用灰色背景ClearType 反而会有彩色镶边需要退回ANTIALIASED_QUALITY。DT_END_ELLIPSIS的作用是标签文字过长时自动打省略号避免文字画出标签边界。不过这个标志在DT_VCENTER同时存在时某些系统会忽略垂直居中稳妥做法是给rcText各边预先缩进 6 像素再决定要不要保留该标志。3.3 给标签加关闭按钮与图标区域计算和命中测试带关闭按钮是这套自绘里相对加分的功能。关闭按钮不该改变标签项的文字绘制区域否则文字会撞到按钮上。我通常约定按钮占标签右侧 18 像素宽的正方形绘制文字时把rcText.right先减掉这 18 像素。void CMyTabCtrl::DrawCloseButton(CDC* pDC, CRect rcTab, BOOL bHot) { // 按钮矩形垂直居中宽高 12 像素 CRect rcBtn(rcTab.right - 18, rcTab.top (rcTab.Height() - 12) / 2, rcTab.right - 6, rcTab.top (rcTab.Height() - 12) / 2 12); // 悬停时给按钮画一个浅灰圆底提示可点击 if (bHot) { CRgn rgn; CBrush br(RGB(220, 220, 220)); rgn.CreateRoundRectRgn(rcBtn.left, rcBtn.top, rcBtn.right 1, rcBtn.bottom 1, 3, 3); pDC-FillRgn(rgn, br); } // 用两条交叉线画 X 形状 CPen pen(PS_SOLID, 1, bHot ? RGB(60, 60, 60) : RGB(150, 150, 150)); CPen* pOldPen pDC-SelectObject(pen); pDC-MoveTo(rcBtn.left 3, rcBtn.top 3); pDC-LineTo(rcBtn.right - 3, rcBtn.bottom - 3); pDC-MoveTo(rcBtn.right - 3, rcBtn.top 3); pDC-LineTo(rcBtn.left 3, rcBtn.bottom - 3); pDC-SelectObject(pOldPen); }画关闭按钮本身不难难在命中测试。绘制逻辑知道按钮位置点击判断却要重新算一遍两处如果不共用同一个矩形计算结果很容易出现“画在右边、点在左边”的错位。CRect CMyTabCtrl::GetCloseButtonRect(int nIndex) const { CRect rcItem; GetItemRect(nIndex, rcItem); return CRect(rcItem.right - 18, rcItem.top (rcItem.Height() - 12) / 2, rcItem.right - 6, rcItem.top (rcItem.Height() - 12) / 2 12); }按钮和文字区域分离后点击判断就集中到WM_LBUTTONUP里先遍历每个标签项判断点击位置落在哪个rcItem内再单独判断是否落在对应的关闭按钮矩形内。落在按钮上给父窗口发一个自定义通知可以是WM_USER 100也可以复用TCN_SELCHANGE旁边自定义的通知码落在非按钮区域则切换选中项。这里有个值得注意的习惯命中测试应基于GetItemRect实时计算而不是缓存上次绘制用的矩形因为标签可能在重排后位置变化缓存很容易造成热点漂移。4. 从灰壳到深色风一版可切换的两套配色完整实现4.1 把参数集中到结构体颜色、圆角、内边距、字体自绘控件最怕把 RGB 常量散落在各绘制函数里等客户提“能不能换个蓝色调”时得满文件找RGB关键字。与其这样不如一开始就抽一个配置结构体所有绘制函数只从结构体取参数。struct TabDrawParams { COLORREF clrBg; // 控件背景 COLORREF clrItemNormal; // 未选中标签底 COLORREF clrItemHover; // 悬停标签底 COLORREF clrItemSel; // 选中标签底 COLORREF clrBorder; // 描边颜色 COLORREF clrTextNormal; // 未选中文字 COLORREF clrTextSel; // 选中文字 COLORREF clrCloseNormal; // 关闭按钮默认颜色 COLORREF clrCloseHover; // 关闭按钮悬停颜色 int nCornerRadius; // 圆角半径 int nTextPadding; // 文字左右内边距 BOOL bShowClose; // 是否显示关闭按钮 };这样一个结构体解决两个问题一是换配色只改数据不动逻辑二是可以预置多套方案在运行时切换。下面是一套深色方案的典型取值字段典型取值说明clrBgRGB(32, 32, 32)整体底色要和内容区背景一致clrItemNormalRGB(45, 45, 48)未选中标签略亮于背景clrItemSelRGB(60, 63, 65)选中标签最亮形成层级clrTextNormalRGB(160, 160, 160)低对比文字clrTextSelRGB(255, 255, 255)高对比文字nCornerRadius6标签高度 28 时比较协调结构体就位后OnDrawItem里不再直接写颜色值而是从成员变量m_params取。这样第四章后面的切换逻辑才有立足点。4.2 集成到对话框消息映射、尺寸调整、重绘触发在对话框里集成自绘 Tab 分三步声明控件成员、绑定变量、初始化参数。假对话框类名是CMyDialog。// CMyDialog.h class CMyDialog : public CDialogEx { protected: CMyTabCtrl m_tab; HICON m_hIcon; void InitTabStyle(); };// CMyDialog.cppOnInitDialog 中调用 void CMyDialog::InitTabStyle() { // 绑定 DDX 时子类化PreSubclassWindow 中的自绘风格由此生效 if (!m_tab.SubclassDlgItem(IDC_TAB_MAIN, this)) { ASSERT(FALSE); return; } // 配置两套配色浅色和深色 TabDrawParams paramsLight MakeLightParams(); TabDrawParams paramsDark MakeDarkParams(); m_tab.SetDrawParams(0, paramsLight); m_tab.SetDrawParams(1, paramsDark); m_tab.SetActiveTheme(0); // 固定标签宽度让 4 个标签均匀分布 m_tab.ModifyStyle(0, TCS_FIXEDWIDTH | TCS_HOTTRACK); m_tab.SetItemSize(CSize(90, 28)); // 添加标签文本 m_tab.InsertItem(0, _T(概览)); m_tab.InsertItem(1, _T(配置)); m_tab.InsertItem(2, _T(日志)); m_tab.InsertItem(3, _T(关于)); }SetDrawParams内部只保存结构体并调用Invalidate(FALSE)关键在第二个参数FALSE它告诉系统只重绘无效区域、不擦除背景。自绘控件里背景擦除通常由OnEraseBkgnd负责如果这里传TRUEWindows 先擦掉整块背景再触发绘制中间过程会闪烁。这也是整个自绘工程里最容易被忽略的效能细节。CSize(90, 28)有一个隐含陷阱Tab 控件的标签高度测量包含顶部边框实际可用文字高度会比 28 像素少 2 到 4 像素。如果发现文字垂直方向被切不要继续加大字号而是把DrawText的矩形用InflateRect(0, -2, 0, -2)收缩一点通常比改标签高度更有效。4.3 两套配色切换局部刷新与状态保持切换配色听起来只是换一组颜色值实际做起来有两个容易忽略的点重绘范围要控制、切换前要把旧状态记下来。看代码void CMyTabCtrl::SetActiveTheme(int nTheme) { if (nTheme m_nActiveTheme) return; m_nActiveTheme nTheme; // 只重绘标签区不动内容区减少闪烁 Invalidate(FALSE); }这里Invalidate(FALSE)配合OnEraseBkgnd返回TRUE能做到不擦旧图、直接覆盖重画。视觉上切换过程是“瞬间换肤”没有先白后黑的中间态。但配色切换通常不只是 Tab 控件自己的事它往往由外部一个“深色模式”开关触发内容区、边框、静态文字都要跟着变。常见的做法是在对话框里加一个成员记录当前主题切换按钮的BN_CLICKED里先更新内容区颜色再调用m_tab.SetActiveTheme。顺序有讲究先切内容区、再切 Tab。如果反过来内容区重绘的瞬间 Tab 还是旧配色用户会看到一瞬的眼花。如果要让标签宽度随文字长度自适应不要每次InsertItem后手动算宽度。TCS_FIXEDWIDTH让所有标签等宽配合SetItemSize最省心如果确实需要不等宽就要去掉TCS_FIXEDWIDTH然后在InsertItem后遍历所有项用GetTextExtent取文字宽度再逐个SetItemSize。这里有个血泪经验不等宽模式下切换标签时rcItem可能因为字体变化而重新计算如果你缓存了旧的rcItem绘制就会出现错位所以任何绘制函数的矩形都必须实时从GetItemRect获取。5. 自绘 CTabCtrl 的避坑清单五个高频翻车点与排查办法5.1 选中态上残留原生底色或边框现象标签项大部分已经是自绘效果但选中项周围仍有一圈灰色或系统主题色看起来像没画干净。原因TCS_OWNERDRAWFIXED只接管标签项内容的绘制标签控件客户区里不属于任何rcItem的部分仍然由系统按默认方式处理。当标签高度小于客户区高度时底部会露出原生背景。解决在OnDrawItem里第一件事就是把整个客户区铺满底色而不是只画rcItem。我之前见到的另一种错误做法是只在OnEraseBkgnd里铺底但自绘触发重绘时OnEraseBkgnd未必被调用所以底色填充要放在绘制入口内而不是擦除入口。5.2 拖动窗口时闪烁不停现象窗口拖动或切换标签时Tab 区域频繁出现白色闪块严重时像在“抖”。原因默认的擦除背景和绘制分离EraseBkgnd先擦白WM_DRAWITEM后画内容两次操作之间屏幕刷新把中间状态暴露出来了。解决在控件类里拦掉背景擦除让自绘全程负责。BOOL CMyTabCtrl::OnEraseBkgnd(CDC* pDC) { // 背景统一在 OnDrawItem 里绘制这里直接吞掉 return TRUE; }OnEraseBkgnd返回TRUE表示“我已经擦了背景”系统便不再执行默认擦除。配合所有Invalidate调用都传FALSE闪烁基本能压住。如果还有轻微闪烁检查是否在OnDrawItem里调用了CClientDC或者重新GetDC导致重入。5.3 GDI 句柄泄漏看似卡顿实际是 DC 没释放现象程序刚启动正常切标签十来分钟后整个窗口失去响应任务管理器里 GDI 对象数持续增长最终绘制区域变黑。原因绘制代码里直接GetDC却不ReleaseDC或者每次绘制都new CPen、new CBrush而没删。GDI 句柄是系统级资源泄漏到一定数量后CreatePen就开始失败绘制函数静默返回。解决优先用栈对象让析构自动释放GetDC成对检查。void CMyTabCtrl::DrawBorder(CDC* pDC, CRect rc) { // 栈对象析构时自动 DeleteObject无需手动释放 CPen pen(PS_SOLID, 1, RGB(80, 80, 80)); CPen* pOldPen pDC-SelectObject(pen); pDC-Rectangle(rc); pDC-SelectObject(pOldPen); }排查方法在绘制函数入口和出口分别调用GetObjectCount打日志看退出后数量是否回到入口前的值。如果用的是GetDC而不是pDC-GetSafeHdc务必确认ReleaseDC在每一条分支上都执行包括异常分支。这块玄学问题很少几乎都是成对调用没写全。5.4 高分屏下文字发虚、标签错位现象在 125% 或 150% 缩放的屏幕上标签文字明显发糊点击热区与实际显示位置偏移。原因进程没有声明 DPI 感知系统把窗口整体放大但 GDI 绘制拿到的坐标还是逻辑像素字体又没有随 DPI 等比缩放于是文字被拉伸后显得虚。解决工程里加入 DPI 感知声明并在创建字体时按LOGPIXELSY缩放。最接近现代系统的做法是在app.manifest里声明PerMonitorV2让窗口缩放事件发生时系统给你重绘机会。代码层面3.2节里的MulDiv(12, nLogPixels, 96)就是字体的缩放基准不要把它写死成 12。实际调试时可以在绘制函数里临时OutputDebugString打印rcItem和字体高度对比 96 DPI 与 150% 下的数值确认缩放是否生效。5.5 热跟踪失效鼠标悬停没反应现象已经实现了ODS_HOTLIGHT分支但鼠标移到标签上始终不触发悬停描边完全没动静。原因ODS_HOTLIGHT只有在控件带TCS_HOTTRACK风格时才由系统置位。前面第 2 章骨架里只加了TCS_OWNERDRAWFIXED漏了热跟踪风格。解决在PreSubclassWindow里补上风格或者更稳妥地自己跟踪鼠标位置。void CMyTabCtrl::PreSubclassWindow() { CTabCtrl::PreSubclassWindow(); ModifyStyle(0, TCS_OWNERDRAWFIXED | TCS_HOTTRACK); }如果因为兼容旧主题仍收不到ODS_HOTLIGHT就自己维护悬停索引在WM_MOUSEMOVE里用HitTest判断光标落在哪个标签项保存为m_nHoverIndex然后只对那一项触发局部重绘。注意离开控件时要重置m_nHoverIndex -1并重绘否则鼠标移出后最后那个标签仍然保持悬停样式。用自定义索引还有个额外好处当你在同一个绘制函数里既画关闭按钮悬停、又画标签悬停时状态判断完全在自己手里不必依赖系统。6. 一个进阶技巧把绘制参数抽成配置结构连过渡动画一起收编自绘控件做到能换色、能加关闭按钮已经够用但还有一个值得做的升级把整套绘制收编成一个可配置的渲染函数让动画、主题切换都从同一个入口走而不是在OnDrawItem里堆一长串if else。我的做法是定义渲染入口输入只有四个——DC、索引、矩形、状态void CMyTabCtrl::DrawTab(CDC* pDC, int nIndex, CRect rcItem, const TabState state) { const TabDrawParams p m_params[m_nActiveTheme]; DrawTabBackground(pDC, rcItem, state, p); DrawTabText(pDC, nIndex, rcItem, state, p); if (p.bShowClose state.bHover) DrawCloseButton(pDC, rcItem, state.bCloseHot); }TabState里集中了bSelected、bHover、bCloseHot三个布尔位任何动画中间态都可以用这个结构体扩展。比如做一个“选中块平滑移动”的动画在SetTimer的回调里让一个 0 到 1 的系数递增每帧计算插值位置后Invalidate(FALSE)然后把插值矩形塞进rcItem渲染函数根本不用知道动画的存在它只负责把参数画出来。void CMyTabCtrl::OnTimer(UINT_PTR nIDEvent) { if (nIDEvent kAnimTimerId) { m_fAnim 0.15f; if (m_fAnim 1.0f) { m_fAnim 1.0f; KillTimer(kAnimTimerId); } Invalidate(FALSE); } CTabCtrl::OnTimer(nIDEvent); }动画结束后把m_fAnim收敛到 1.0保证最终画面和静态绘制完全一致。这类动画不要贪多标签切换 100 到 150 毫秒的短过渡最舒服太长的滑动反而让人觉得界面“肉”。有一回我为了赶需求把绘制逻辑直接堆在OnDrawItem里颜色常量散落得到处都是。三个月后客户要换主题我翻遍文件找RGB常量每一处都不敢乱改最后还是推倒重构成了配置结构。从那以后我每次接手自绘控件都强制走一遍“参数结构体 渲染函数收编”的流程换主题、加动画都变成改数据的小事。这份自绘 CTabCtrl 的实现如果一开始就按这个思路组织后续维护会省掉不少后悔药希望帮到你。本文还有配套的精品资源点击获取