简介面向 Windows MFC 开发者的自绘 CTabCtrl 源码实例包适合希望摆脱系统默认标签外观、增强界面定制能力的读者。该实例在标准 CTabCtrl 基础上重写绘制流程通过 OnPaint 以及 WM_NCPAINT、WM_ERASEBKGND 等消息处理实现标签颜色、形状、字体、边框样式和图标、渐变色等特效同时借助 SetTimer 与 OnTimer 完成滑动、淡入淡出等动画过渡可服务于需要个性化选项卡交互的界面场景。压缩包共 2 个文件含 1 个 C 实现文件与 1 个头文件整体仅 6KB结构精简便于快速阅读和移植。已有 358 人学习下载。读者可从中理解 GDI/GDI 绘图接口的调用方式、自绘控件的消息响应框架以及定时器驱动动画帧更新的整体思路并获得一套可直接参考的 C 自绘选项卡核心代码对后续扩展样式或集成到实际项目很有帮助。1. 为什么我还要自绘 Tab 控件系统控件满足不了的痛点做桌面客户端开发的人应该都有这种经历产品经理指着设计稿上的圆角标签页问「这个效果能不能做」你打开 VS 工具箱拖一个 CTabCtrl 上去发现默认样式又方又平连背景色都跟窗口对不上。没错今天要拆的这个自绘 CTabCtrl就是为了解决这种「系统控件丑、定制需求多、样式要灵活」的经典场景。它不是一个完整项目而是一个可以直接嵌入到现有 MFC 工程里的自绘控件实现覆盖了从绘制逻辑、命中测试、通知机制到字体状态管理的完整链路。适合被 UI 定制折磨过的 MFC 开发者也适合想搞懂控件自绘原理的人。技术栈是 MFC GDI 绘制核心思想是把系统默认的绘制流程接管过来自己控制每一个像素。说玄学一点自绘控件就是「把黑匣子打开里面的电路自己画」。使用场景很直白你需要标签页带圆角、带渐变背景、带自定义高亮状态或者想彻底去掉系统默认的边框和凸起效果那就绕不开自绘这条路。这篇会把整个实现拆开讲清楚先从绘制流程入手再讲结构设计、通知触发、避坑经验最后给出一条能落到实处的换肤改造路径。2. 核心模块拆解绘制流程是如何被一步步接管过来的2.1 自绘的入口DrawItem 与 WM_DRAWITEMMFC 里自绘控件最核心的入口是WM_DRAWITEM消息对应虚函数DrawItem。这个函数由系统在控件需要重绘时自动调用你的职责就是在这个函数里把整个标签页画出来。常见的做法是重写DrawItem后先用CDC获取设备上下文然后按当前项的状态选中、悬停、普通分别绘制。void CMyTabCtrl::DrawItem(LPDRAWITEMSTRUCT lpDrawItemStruct) { CDC dc; dc.Attach(lpDrawItemStruct-hDC); CRect rcItem(lpDrawItemStruct-rcItem); int nIndex lpDrawItemStruct-itemID; BOOL bSelected (lpDrawItemStruct-itemState ODS_SELECTED); // 保存 DC 状态绘制完恢复 int nSavedDC dc.SaveDC(); // 先填充背景再按选中态绘制不同颜色 if (bSelected) { dc.FillSolidRect(rcItem, RGB(255, 255, 255)); } else { dc.FillSolidRect(rcItem, RGB(240, 240, 240)); } // 绘制文字 CString strText; GetItemText(nIndex, strText); dc.SetBkMode(TRANSPARENT); dc.DrawText(strText, rcItem, DT_CENTER | DT_VCENTER | DT_SINGLELINE); dc.RestoreDC(nSavedDC); dc.Detach(); }这段代码的逻辑很直观Attach把系统传进来的设备上下文句柄包装成 CDC 对象这样就能用 MFC 的封装方法绘制itemID是当前绘制的是第几个标签页ODS_SELECTED是系统传给我们的选中状态标志。绘制顺序是先填充背景色再绘制文字。有几个细节容易踩坑SaveDC和RestoreDC必须成对出现否则绘制状态会在多次重绘后错乱Detach千万不能漏掉否则 CDC 析构时会二次释放 DC 句柄直接崩溃。还有一点GetItemText之前要先确认itemID是有效索引因为某些情况下系统会传入 -1 表示整条 item 都无效。2.2 控件样式切换从矩形标签到圆角标签默认的 Tab 控件是直角矩形视觉上比较生硬。自绘的优势在这里体现得最明显你可以把每个标签页画成圆角矩形、梯形甚至是任意自定义形状。以圆角为例核心是使用CreateRoundRectRgn创建圆角区域然后用FillRgn填充。void CMyTabCtrl::DrawRoundTab(CDC* pDC, CRect rcTab, BOOL bSelected) { // 圆角半径可以根据 DPI 动态调整 int nRadius bSelected ? 8 : 4; // 创建圆角区域并填充 CRgn rgn; rgn.CreateRoundRectRgn(rcTab.left, rcTab.top, rcTab.right 1, rcTab.bottom 1, nRadius, nRadius); // 选中时用浅色未选中用浅灰 COLORREF clrBg bSelected ? RGB(255, 255, 255) : RGB(225, 228, 232); CBrush br(clrBg); pDC-FillRgn(rgn, br); // 边框选中时画深色边未选中时画浅色边 CPen pen(PS_SOLID, 1, bSelected ? RGB(120, 120, 120) : RGB(200, 200, 200)); CPen* pOldPen pDC-SelectObject(pen); pDC-SelectObject(pOldPen); }这里有个关键点CreateRoundRectRgn的右下角坐标要加 1否则最后一个像素画不出来边缘会有锯齿缺口。nRadius不固定也是刻意为之选中态圆角大一点能有「浮起」的视觉反馈未选中态小一点显得收敛。圆角自绘的另一个隐藏坑是命中测试。默认的CTabCtrl命中测试基于矩形区域当你把标签画成圆角后点击圆角外但矩形内的区域系统依然会认为你点中了这个标签。这个细节后面会专门讲到因为它直接影响交互的精确度。2.3 高亮反馈悬停与选中状态的区分一个合格的标签页控件至少要区分三种视觉状态普通、悬停、选中。这三种状态分别对应鼠标没有经过、鼠标经过但未按下、当前激活的页面。实现方式是在OnMouseMove里记录当前悬停的索引然后只对旧悬停项和新悬停项做局部重绘。void CMyTabCtrl::OnMouseMove(UINT nFlags, CPoint point) { // 转换坐标为 Tab 内部相对坐标 CRect rcClient; GetClientRect(rcClient); CPoint ptClient point; // 命中测试判断当前鼠标悬停在哪个标签页 int nHover HitTestPoint(ptClient); // 悬停索引变了才重绘避免频繁刷新 if (nHover ! m_nHoverIndex) { // 旧悬停项和新悬停项都需要重绘 if (m_nHoverIndex 0) { CRect rcOld; GetItemRect(m_nHoverIndex, rcOld); InvalidateRect(rcOld); } if (nHover 0) { CRect rcNew; GetItemRect(nHover, rcNew); InvalidateRect(rcNew); } m_nHoverIndex nHover; } CTabCtrl::OnMouseMove(nFlags, point); }这段代码的巧妙之处在于「局部重绘」。如果你每次移动鼠标都Invalidate整个控件窗口会频繁闪烁尤其是在标签页数量多的时候。按需重绘只有悬停索引变化时才刷新两个小矩形区域性能开销低很多。HitTestPoint在这个阶段用的是矩形命中。如果想做到圆角命中需要在这个函数里多加一步先矩形命中再判断点是否落在圆角区域内部。常见的做法是创建一个CRgn并调用PtInRegion虽然多了一次计算但对交互精度的提升是值得的。3. 工程结构分析自绘 Tab 控件的代码组织与扩展点3.1 类的完整骨架一个自绘控件需要哪些成员自绘控件不是只重写一个 DrawItem 就完事了。一个能上生产环境的自绘 Tab 控件通常需要维护字体、颜色、图标、悬停索引、按下状态、DPI 缩放等一堆成员变量。下面这组头文件声明是典型的完整结构class CMyTabCtrl : public CTabCtrl { public: CMyTabCtrl(); virtual ~CMyTabCtrl(); // 对外设置接口调用者用来定制样式 void SetTabFont(CFont* pFont); void SetTabColor(COLORREF clrText, COLORREF clrBk); void SetTabIcon(int nIndex, HICON hIcon); void SetTabHeight(int nHeight); protected: // 基础数据 CFont* m_pFont; // 标签页字体 COLORREF m_clrText; // 文字颜色 COLORREF m_clrBk; // 背景颜色 CArrayHICON, HICON m_icons; // 每个标签的图标句柄 int m_nHoverIndex; // 当前悬停的标签索引 BOOL m_bPressed; // 鼠标是否按下 // 绘制状态 int m_nTabHeight; // 标签高度 double m_dpiScale; // DPI 缩放比例 // 核心虚函数 virtual void DrawItem(LPDRAWITEMSTRUCT lpDrawItemStruct) override; void DrawTabContent(CDC* pDC, CRect rcItem, int nIndex, BOOL bSelected); void DrawTabIcon(CDC* pDC, CRect rcItem, int nIndex, BOOL bSelected); void DrawTabText(CDC* pDC, CRect rcItem, int nIndex, BOOL bSelected); // 辅助函数 int HitTestPoint(CPoint pt) const; void UpdateTabHeight(); public: // 通知相关 afx_msg void OnMouseMove(UINT nFlags, CPoint point); afx_msg BOOL OnEraseBkgnd(CDC* pDC); afx_msg void OnSysColorChange(); DECLARE_MESSAGE_MAP() };把成员变量拆开看可以分成几大类样式配置类字体、颜色、图标、交互状态类悬停索引、按下标志、绘制辅助类高度、DPI 缩放。这种拆分方式的好处是后续增加新样式时只需要新增成员变量和对应的绘制函数不需要动已有的绘制逻辑。值得注意的是DrawTabContent、DrawTabIcon、DrawTabText这三个函数被拆成了独立方法。把绘制逻辑按职责拆分是自绘控件最容易忽略的一件事很多人写完 DrawItem 就把文字图标全塞在一起画代码越到后面越没法维护。拆开之后每个方法只做一件事逻辑清晰也方便具体定位问题。3.2 消息映射与子类化自绘控件如何接住系统的各种消息自绘 Tab 控件要处理的消息远不止WM_DRAWITEM。鼠标悬停需要WM_MOUSEMOVE背景擦除需要WM_ERASEBKGND系统主题变化需要WM_SYSCOLORCHANGE。这些消息统一通过消息映射表来处理BEGIN_MESSAGE_MAP(CMyTabCtrl, CTabCtrl) ON_WM_MOUSEMOVE() ON_WM_ERASEBKGND() ON_WM_SYSCOLORCHANGE() ON_WM_LBUTTONDOWN() ON_WM_LBUTTONUP() END_MESSAGE_MAP()ON_WM_ERASEBKGND是个必须重写的消息。默认实现会用窗口背景色擦除整个客户区如果你的 Tab 控件是嵌在对话框里的对话框背景和 Tab 背景不一致就会出现明显的白色闪烁。常见的处理是直接返回 TRUE 拒绝擦除让自绘代码全权负责背景绘制。ON_WM_SYSCOLORCHANGE则对应系统主题切换。当用户在 Windows 设置里切换深浅色模式时系统会广播这个消息。如果你的自绘控件里有写死的浅色背景不处理这个消息就会出现界面风格跟系统不一致的情况。处理方式是将绘制用的颜色缓存清掉强制触发一次重绘让新颜色生效。消息映射还有一个容易被忽略的点子类化。如果你是在对话框上通过DDX_Control绑定的控件MFC 会自动完成子类化。但如果你是动态创建控件一定要手动调用SubclassDlgItem或者Create否则消息根本不会进到你重写的消息映射表里。这个坑我在刚做自绘时翻车过控件画出来了但完全没反应就是漏了子类化。3.3 字体与图标管理自绘控件的颜值细节标签页的文字字体、图标大小对齐往往是自绘控件精致与否的分水岭。字体方面要特别留意DrawText使用的字体必须通过SelectObject选入 DC 后才能生效而且字体对象本身的生命周期必须长于绘制周期不能是函数里的临时变量否则字体销毁后绘制会乱码甚至崩溃。void CMyTabCtrl::DrawTabText(CDC* pDC, CRect rcItem, int nIndex, BOOL bSelected) { CString strText; GetItemText(nIndex, strText); // 设置字体优先用外部传入的字体否则用系统默认 CFont* pOldFont NULL; if (m_pFont) { pOldFont pDC-SelectObject(m_pFont); } // 文字颜色选中时深色未选中时灰色 pDC-SetTextColor(bSelected ? RGB(40, 40, 40) : RGB(120, 120, 120)); pDC-SetBkMode(TRANSPARENT); // 背景透明避免文字背景色块 // 文字区域左侧预留图标空间 CRect rcText rcItem; if (m_icons.GetSize() (INT_PTR)nIndex m_icons.GetAt(nIndex)) { rcText.left 20; // 给图标留出空间 } pDC-DrawText(strText, rcText, DT_CENTER | DT_VCENTER | DT_SINGLELINE); if (pOldFont) { pDC-SelectObject(pOldFont); } }这里有个细节SetBkMode(TRANSPARENT)必须设置否则DrawText会用默认的不透明模式画出来的文字背景是一块白色矩形直接毁掉整个自绘效果。图标绘制的对齐也是常见翻车点。DrawIcon的坐标是图标左上角你要把图标垂直居中需要先获取图标大小然后按rcItem.top (rcItem.Height() - nIconHeight) / 2计算 Y 坐标。如果图标高度是 16标签高度是 32直接用rcItem.top画图标会偏上看起来非常别扭。4. 运行与集成把自绘 Tab 控件塞进你的对话框工程4.1 集成步骤从拷贝文件到首次跑通在工程里集成这个自绘控件基本流程是五步把MyTabCtrl.h和MyTabCtrl.cpp拷贝到工程目录在对话框头文件里添加成员变量用DDX_Control绑定控件调用ModifyStyle设置自绘风格最后重写对话框的绘制背景代码。下面给出核心绑定代码// 在对话框头文件中 CMyTabCtrl m_tabCtrl; // 在 OnInitDialog 中绑定并初始化 BOOL CMyDialog::OnInitDialog() { CDialogEx::OnInitDialog(); // 绑定控件IDC_TAB_MAIN 是你在资源编辑器里放的 Tab 控件 m_tabCtrl.SubclassDlgItem(IDC_TAB_MAIN, this); // 关键步骤设置 Owner Draw Fixed 风格 m_tabCtrl.ModifyStyle(0, TCS_OWNERDRAWFIXED); // 插入两个测试页面 m_tabCtrl.InsertItem(0, _T(基本信息)); m_tabCtrl.InsertItem(1, _T(高级设置)); // 强制触发布局更新和重绘 m_tabCtrl.Invalidate(); return TRUE; }ModifyStyle(0, TCS_OWNERDRAWFIXED)是整个自绘的开关。没有这个风格位系统不会发送WM_DRAWITEM消息你写的 DrawItem 永远不会被执行。很多人集成了但没反应十有八九是这一行漏了。集成的顺序也很讲究先SubclassDlgItem绑定再ModifyStyle最后InsertItem。如果你先插入标签页后再修改风格某些系统版本下已插入的标签可能不会重新触发绘制导致一半新风格一半旧风格画面撕裂。4.2 背景融合消除 Tab 与对话框的颜色断层自绘 Tab 控件最常见的视觉问题是标签区和内容区之间有明显的颜色分界线。这是因为 Tab 控件的客户区默认填充了系统按钮颜色而对话框背景是另一种颜色两块拼接在一起自然有断层。解决办法是重写OnEraseBkgnd把背景擦除和自绘背景统一成同一种颜色BOOL CMyTabCtrl::OnEraseBkgnd(CDC* pDC) { // 不调用默认擦除逻辑改用统一背景色填充 CRect rcClient; GetClientRect(rcClient); // 用和选项卡背景一致的颜色填充整个客户区 pDC-FillSolidRect(rcClient, RGB(240, 241, 245)); return TRUE; }这里有个关键点OnEraseBkgnd返回 TRUE 之后系统不会再执行WM_PAINT里的默认背景擦除。也就是说你的WM_PAINT和DrawItem里必须承担全部的界面绘制责任任何没被填充的区域都会变成无定义的残留色块。有一个常见的血泪经验只改OnEraseBkgnd还不够如果对话框本身也有OnEraseBkgnd的处理两个层的背景色不一致Tab 控件和对话框之间依然会有一条缝。治理方式是让 Tab 的背景色取自对话框的背景色而不是写死自己的颜色值。4.3 动态添加与删除标签析构陷阱与索引失效运行时动态添加、删除标签页是 Tab 控件的常规操作但在自绘模式下要特别注意索引失效的问题。DeleteItem会触发一次DrawItem此时被删除项的itemID已经是无效值如果你在 DrawItem 里直接调用GetItemText或者取图标可能会访问到越界内存。void CMyTabCtrl::DeleteTab(int nIndex) { // 先移除图标资源避免句柄泄漏 if (m_icons.GetSize() nIndex m_icons.GetAt(nIndex)) { DestroyIcon(m_icons.GetAt(nIndex)); m_icons.RemoveAt(nIndex); } // 再删除基础项 CTabCtrl::DeleteItem(nIndex); // 索引变动后悬停索引也要修正 if (m_nHoverIndex nIndex) { m_nHoverIndex -1; // 强制重新计算 } Invalidate(); }这个顺序是刻意的先清理自绘资源再调用基类删除最后修正悬停状态。如果反过来DeleteItem触发的重绘里可能还会用到已经被删除的图标句柄造成资源访问异常。另一个容易被忽略的点是删除后所有后面标签的索引都会前移。如果你有缓存过标签索引在外部代码里删除后必须同步更新否则会出现「点击第三个标签实际触发的是第四个标签」的错位问题。这种问题很难排查因为界面看起来是正常的只有点击行为对不上。5. 避坑专栏自绘 CTabCtrl 高频踩坑记录5.1 现象一自绘生效但文字消失了自绘后文字全部消失只剩空白标签页。检查后发现DrawText正常工作但文字颜色和标签背景色是同一种颜色。原因是在DrawItem里先设置了SetTextColor后续绘制背景时又把颜色覆盖了。解决方法是严格按照「先画背景再画文字」的顺序执行画文字之前再设置一次文字颜色。// 正确顺序先背景后文字 pDC-FillSolidRect(rcItem, clrBk); // 第一步背景 pDC-SetTextColor(clrText); // 第二步文字颜色 pDC-DrawText(strText, rcItem, DT_CENTER); // 第三步绘制5.2 现象二切换标签时控件整体闪烁标签切换时整个控件区域先白屏一下再刷新看起来非常廉价。原因是没有处理WM_ERASEBKGND系统默认用白色擦除背景然后再逐块重绘。解决方法是重写OnEraseBkgnd直接返回 TRUE同时在DrawItem里务必调用SaveDC/RestoreDC保持绘制状态一致性避免背景被双重绘制。5.3 现象三消息通知丢失父对话框收不到 TCN_SELCHANGE明明点击了标签但父对话框的消息处理函数没反应。原因是TCS_OWNERDRAWFIXED风格下部分老版本 MFC 对通知码的透传有缺陷。某开发者的血泪经验是判断选中变化时不要依赖TCN_SELCHANGE改用TCN_SELCHANGING后用PostMessage把真正的事件延迟发送等自绘状态稳定后再通知父窗口。BOOL CMyTabCtrl::OnNotify(WPARAM wParam, LPARAM lParam, LRESULT* pResult) { NMHDR* pNMHDR (NMHDR*)lParam; if (pNMHDR-code TCN_SELCHANGE) { // 延迟处理先让界面刷新完成再通知外部 PostMessage(WM_APP_TAB_SELCHANGED); } return CTabCtrl::OnNotify(wParam, lParam, pResult); }5.4 现象四DPI 缩放后标签文字被截断系统缩放 125% 或 150% 下自绘标签文字右侧被截断或者标签宽度不足。原因是所有尺寸都用像素写死没有根据 DPI 做缩放。解决方法是初始化时用GetDpiForWindow获取缩放比例所有坐标计算乘上m_dpiScale。特别注意DrawText的矩形区域也要放大否则文字画不进去。5.5 现象五重绘顺序错乱导致标签背景被内容区覆盖多个标签页切换时偶尔出现标签背景被覆盖成白色过一秒又恢复正常。原因是重绘区域计算错误只刷新了内容区没刷新标签区。解决方法是切换标签时调用Invalidate()刷新整个控件不要自作聪明只刷新内容区。虽然全量刷新性能稍低但自绘 Tab 的绘制量本来就不大稳定性优先。6. 二次改造路径从固定样式到可换肤的动态主题最后一个部分落到改造思路很多人的自绘控件写死在代码里换肤要改源代码重新编译这在实际项目中不可接受。合理的做法是把颜色、字体、间距等参数抽成配置运行时切换。6.1 改造一把固定颜色提升为皮肤对象先定义一个皮肤结构体把绘制过程中所有颜色值和字体信息集中起来同时保留一个默认实例作为兜底。每次开始绘制时从皮肤对象取参数这样外部只需要更换皮肤对象就能全局换肤不需要改动绘制逻辑。struct TabSkin { COLORREF clrSelectedBg; // 选中背景 COLORREF clrNormalBg; // 普通背景 COLORREF clrHoverBg; // 悬停背景 COLORREF clrSelectedText; // 选中文字 COLORREF clrNormalText; // 普通文字 CString strFontName; // 字体名 int nFontSize; // 字号 }; void CMyTabCtrl::SetSkin(const TabSkin skin) { m_skin skin; Invalidate(); // 触遍重绘 }这个改造的收益是立竿见影的新增一套皮肤只需定义一个TabSkin变量传给SetSkin即可完全不碰绘制代码。6.2 改造二从外部 INI 文件动态加载皮肤更进一步把皮肤参数写到一个ini文件里运行时通过GetPrivateProfileString读入。这样就能做到产品发布后由 UI 或运营调整颜色而不需要重新编译。下面是核心读取代码void LoadSkinFromIni(const CString strPath, TabSkin skin) { skin.clrSelectedBg (COLORREF)_tcstol(GetPrivateProfileString(_T(Skin), _T(SelectedBg), _T(FFFFFF), NULL, 0, strPath), NULL, 16); // 其他字段同理读取 }这里的参数说明_T(Skin)是 INI 文件的节名_T(SelectedBg)是键名FFFFFF是默认值白色strPath是 INI 文件完整路径。读取后把十六进制字符串转成COLORREF填充到TabSkin。这个方案的坑在于INI 读写时要小心字符集问题。工程如果是 Unicode 编码GetPrivateProfileString会自动处理宽字符但字符串转数值时要用_tcstol而不是atoi否则在 Unicode 编译下会编译报错。6.3 改造三增加运行时热切换验证改造完成后验证方法很简单在设置对话框里放一个下拉框列出 DeepBlue、LightGray、DarkBlack 等皮肤名称选择后调用SetSkin并观察所有标签是否立即刷新。验证时有一个必测项切换皮肤后快速点击各个标签确认选中态颜色变化正确且没有闪烁加重。另一个必测项是切换皮肤后拖动窗口经过不同 DPI 的显示器确认文字大小、圆角半径、图标位置全部跟随缩放没有错位或溢出。从那以后我每次自绘 Tab 控件都强制走一遍三查流程查通知码是否透传完整查背景擦除是否会闪白查字体图标是否被外部意外销毁。这三个地方是自绘控件翻车率最高的位置提前规避能省掉大量联调时间。希望帮到你。本文还有配套的精品资源点击获取