MFC自绘Edit输入框：深色主题圆角边框与高DPI适配

简介面向MFC桌面开发者的自绘Edit控件示例针对标准CEdit在配色、边框与文字效果上的定制需求演示通过重写绘制流程实现自定义外观。内容覆盖CEdit继承与消息映射、WM_PAINT消息中借助CPaintDC与CDC完成绘图、CRect界定绘制区域、TextOut与SetBkMode等GDI文本函数、WM_CTLCOLOREDIT返回背景刷子、边框线条绘制以及鼠标键盘消息重载与重绘性能控制等要点。压缩包共20个文件、约139KB以6个h头文件与4个cpp源文件为主体承载控件类与对话框实现另含sln与vcxproj工程、rc与rc2资源脚本、ico图标及filters、user等VS配置项可直接用Visual Studio打开编译调试已有256人学习。可据此获得一份可运行的对照工程把绘制流程、消息处理与资源组织串成完整脉络便于在自有项目中替换默认外观或扩展交互行为。1. 深色主题下把输入框做干净MFC 自绘 Edit 的能力边界上一版界面交出去评审只提了一条深色卡片上的登录输入框白得刺眼像贴了两块膏药。当时想的是换个背景色就完事结果WM_CTLCOLOREDIT把底色改了边框还是系统那道灰线圆角没有聚焦高亮没有密码框里那把灰扑扑的提示文字也无处安放。很多人对 MFC 自绘 Edit 的误解就在这里——以为它只是调两个颜色实际是“系统控件画到什么程度、你能接管到什么程度”的取舍问题。这套东西适合两类人手里维护着 MFC 老界面需要在不大改框架的前提下把输入框风格统一起来的以及想把输入框封装成可复用控件、后面十几个对话框反复用的。它解决的不是“怎么画个矩形”而是输入框在焦点切换、中文输入、高 DPI 这几条真实路径上不翻车。2. 工程结构与选型一个自绘 Edit 控件该拆成几块动手之前先把边界划清楚否则写到一半会发现代码全堆在对话框类里第二个界面要复用就得复制粘贴改一处漏三处。2.1 目录与类职责划分我一般把这块拆成四层规模不大但职责互不越界层级文件职责控件层AlphaEdit.h/.cpp继承CEdit处理焦点、密码模式、提示文字显隐皮肤层EditSkin.h/.cpp纯绘制输入框矩形、圆角、边框色、文字色不碰消息容器层LoginDlg.cpp把 EDIT 的位置告诉皮肤处理WM_CTLCOLOR和重绘配置层UiTheme.h颜色、圆角半径、内边距、字体集中一处控件层不画像素皮肤层不接消息这两条守住后面换配色、换圆角只改UiTheme.h。配置项我习惯用constexpr而不是宏调试时能看到值// UiTheme.h所有视觉参数集中在这里改皮肤不动业务代码 namespace UiTheme { constexpr COLORREF kEditBg RGB(39, 39, 42); // 输入框底色 constexpr COLORREF kEditBgFocus RGB(24, 24, 27); // 聚焦后底色加深 constexpr COLORREF kEditBorder RGB(63, 63, 70); // 常态边框 constexpr COLORREF kEditBorderHot RGB(59, 130, 246); // 聚焦边框 constexpr COLORREF kEditText RGB(228, 228, 231); // 正式输入文字 constexpr COLORREF kEditTip RGB(113, 113, 122); // 提示文字 constexpr int kRadius 6; // 圆角像素半径 constexpr int kPaddingX 10; // 左内边距需与绘制对齐 }这几个值不是随便定的。kPaddingX要和后面 EDIT 内部文字起始位置对齐否则提示文字和真实输入文字会左右错位一两像素肉眼看得出来。kRadius在 100% 缩放下是 6到 150% DPI 就得乘 1.5这个换算放在皮肤层做别散落在各处。2.2 三条路线的取舍CTLCOLOR、半接管、完全自绘MFC 里让输入框“变好看”有三条路很多人一开始就走错返工成本很高。第一条是WM_CTLCOLOREDIT父窗口收到消息时返回一个画刷EDIT 用它擦背景同时可以设置pDC的文字颜色和背景模式。这条路线系统仍然负责画文字、光标、选区反色、输入法内联你只改配色。优点是稳缺点也明显——它管不到 EDIT 窗口外面那圈边框圆角更是想都别想因为 EDIT 客户区本身是矩形的。第二条我称之为“半接管”CTLCOLOR 改配色同时在父窗口的OnPaint里围绕 EDIT 的矩形画一圈圆角外框EDIT 自身设成无边框样式WS_BORDER去掉。视觉上看起来是一个圆角输入框实际是“父窗口画壳、EDIT 画芯”。90% 的业务界面到这一步就够了。第三条是“完全自绘”子类化 EDIT在WM_PAINT里不调用默认实现自己双缓冲画背景、文字、选区、光标。这条路能做出任意效果代价是打字光标不闪了、中文输入法候选框跑到屏幕左上角、选中文字没法反色、长文本不会滚动——这些都得自己补。我在一个富文本风格的搜索框上走过一遍前后补交互补了两天后面就不再轻易上了。所以选型建议很明确颜色、圆角、占位符、聚焦高亮这类需求走第二条只有需要渐变、内嵌图标、自定义选区色、整块控件带动画时才考虑第三条并且要预留补交互的时间。2.3 消息入口父窗口的 OnCtlColor 到底做了什么不管走哪条路OnCtlColor都是入口。它会在 EDIT 需要重绘背景的时候被调用nCtlColor为CTLCOLOR_EDIT时就是输入框在问“给我个刷子”。// LoginDlg.cpp一次处理多个输入框用控件 ID 分支 HBRUSH CLoginDlg::OnCtlColor(CDC* pDC, CWnd* pWnd, UINT nCtlColor) { HBRUSH hbr CDialogEx::OnCtlColor(pDC, pWnd, nCtlColor); if (nCtlColor ! CTLCOLOR_EDIT) return hbr; const int nID pWnd-GetDlgCtrlID(); if (nID ! IDC_EDIT_USER nID ! IDC_EDIT_PWD) return hbr; // 文字底色调成 TRANSPARENT避免 EDIT 先铺一块系统色的矩形 pDC-SetBkMode(TRANSPARENT); pDC-SetTextColor(UiTheme::kEditText); // 返回的刷子会被 EDIT 用来擦客户区必须长期有效不能是栈上的对象 static CBrush s_brBg(UiTheme::kEditBg); return (HBRUSH)s_brBg.GetSafeHandle(); }这里三个参数各有讲究。SetBkMode(TRANSPARENT)管的是文字绘制时的底色设成透明后文字不会在字符间隙带一条系统色底边SetTextColor决定输入文字颜色但它管不到提示文字——提示文字要另画。最关键是返回的画刷必须是生命周期长于消息处理的对象用static或者挂在对话框成员上都行写成局部CBrush会在函数返回后立刻析构EDIT 拿着一个已经失效的句柄去擦背景结果就是随机花屏或者整个窗口黑掉这个坑几乎每个人都踩过。如果不同输入框要不同底色就按 ID 分别返回不同的静态刷子别在函数里new CBrush然后忘了删——GDI 对象泄漏到一定数量整个进程的绘制都会开始出问题。3. 绘制链路从父窗口 OnPaint 到圆角、边框、提示文字落笔壳由父窗口画所以真正的绘制逻辑在对话框的OnPaint里顺序错了会出现边框被 EDIT 盖住、提示文字闪烁等问题。3.1 顺序问题先画壳再画芯还是反过来EDIT 是子窗口Windows 的绘制顺序是父窗口先收到WM_PAINT然后子窗口再画。这意味着如果父窗口在 EDIT 的矩形范围内画了东西EDIT 一擦背景就盖掉了。所以圆角外框不能画在 EDIT 矩形内部——要么画在它外面一圈EDIT 用MoveWindow往里缩 1 到 2 像素要么把 EDIT 设成透明背景让父窗口的绘制透上来。我一般用前者位置关系清晰GetDlgItem(IDC_EDIT_USER)-GetWindowRect()拿到屏幕坐标ScreenToClient转成客户区坐标然后向外扩kBorderWidth像素作为外框绘制范围。// 把控件矩形转成父窗口坐标再向外扩出边框宽度 CRect CLoginDlg::GetEditFrameRect(int nCtrlID) const { CWnd* pWnd GetDlgItem(nCtrlID); CRect rc; pWnd-GetWindowRect(rc); // 屏幕坐标 ScreenToClient(rc); // 转客户区坐标 rc.InflateRect(2, 2); // 外扩 2px 给边框留位置 return rc; }InflateRect(2, 2)里的 2 要和后面画笔宽度对上。如果画笔是 2 像素宽RoundRect会以路径为中心向两侧各画 1 像素矩形不缩进的话外沿那一半就被裁掉了看起来边框只有 1 像素而且颜色发虚。这是血泪经验第一次调的时候盯着屏幕找了半小时。3.2 圆角边框的绘制细节与抗锯齿圆角用RoundRect参数是矩形和椭圆宽高注意宽高传的是直径不是半径很多人在这里写错导致圆角奇大无比。// EditSkin.cpp绘制输入框外框bFocus 决定边框颜色和底色 void CEditSkin::DrawFrame(CDC* pDC, const CRect rcFrame, BOOL bFocus) { CRect rc rcFrame; rc.DeflateRect(1, 1); // 让 2px 画笔完整落在矩形内侧避免外沿被裁 CBrush brFill(bFocus ? UiTheme::kEditBgFocus : UiTheme::kEditBg); CPen penBorder(PS_SOLID, 2, bFocus ? UiTheme::kEditBorderHot : UiTheme::kEditBorder); CBrush* pOldBrush pDC-SelectObject(brFill); CPen* pOldPen pDC-SelectObject(penBorder); // RoundRect 的第 2、3 个参数是椭圆宽高即圆角直径 pDC-RoundRect(rc, CPoint(UiTheme::kRadius * 2, UiTheme::kRadius * 2)); pDC-SelectObject(pOldBrush); pDC-SelectObject(pOldPen); }DeflateRect(1, 1)和画笔宽度 2 是对应的向内收 1 像素后画笔中心线落在距边缘 1 像素处向内外各扩 1 像素正好填满 0 到 2 像素这一圈。RoundRect画出来的圆角在低分辨率下有锯齿这是 GDI 的固有限制它不做抗锯齿。要平滑只能上 GDI 的GraphicsPath但那要引入gdiplus.h并做启动初始化对一个输入框来说太重。我的折中是圆角半径别超过 8 像素锯齿在小半径下几乎看不出来DPI 放大时按比例缩放半径别写死。另外别忘了 GDI 对象的选择与恢复。上面每个SelectObject都有对应的还原否则 DC 被销毁时还持有你的画笔句柄就泄漏了。这类泄漏不报错只在任务管理器里看到 GDI 对象数缓慢上涨。3.3 提示文字三种实现方式与它们的差别提示文字placeholder是自绘需求里出现频率最高的。Vista 之后系统提供了一个消息EM_SETCUEBANNER一行代码搞定// 最省事的提示文字但颜色跟着系统主题走改不了 ::SendMessage(GetDlgItem(IDC_EDIT_USER)-GetSafeHwnd(), EM_SETCUEBANNER, TRUE, (LPARAM)L请输入账号);EM_SETCUEBANNER的wParam为 TRUE 表示获得焦点后隐藏提示。问题是它的文字颜色由系统决定深色主题下会变成一条看不清的灰字而且没法换字体。所以走自绘路线时还是自己画。自己画的时机很关键不能在 EDIT 的WM_PAINT里画会被系统擦掉正确做法是在父窗口OnPaint里、画完外壳之后用DrawText在 EDIT 的客户区内画文字。条件是 EDIT 内容为空且没有焦点。// 在父窗口 OnPaint 里调用和 DrawFrame 同一个 DC void CEditSkin::DrawTip(CDC* pDC, CWnd* pEdit, LPCTSTR lpszTip, const CRect rcFrame) { if (pEdit-GetWindowTextLength() 0) return; // 有内容不画 if (::GetFocus() pEdit-GetSafeHwnd()) return; // 有焦点不画 CFont* pOldFont pDC-SelectObject(m_fontTip); pDC-SetBkMode(TRANSPARENT); pDC-SetTextColor(UiTheme::kEditTip); CRect rcText rcFrame; rcText.DeflateRect(UiTheme::kPaddingX, 0); pDC-DrawText(lpszTip, rcText, DT_LEFT | DT_VCENTER | DT_SINGLELINE | DT_NOPREFIX); pDC-SelectObject(pOldFont); }这里DT_VCENTER必须和DT_SINGLELINE一起用才生效单写DT_VCENTER是没用的这是个老坑。DT_NOPREFIX是为了让提示文字里的不被当成快捷键标记吃掉——账号提示里带个是很常见的事。rcText.DeflateRect(kPaddingX, 0)让提示文字和真实输入文字左边对齐。这个偏移量要和 EDIT 内部文字起始位置一致通常等于 EDIT 的EM_SETMARGINS设的左边距。两边不一致时点进去的那一瞬间文字会跳一下非常明显。3.4 防闪烁OnEraseBkgnd 与双缓冲父窗口画了外壳EDIT 自己还要擦背景两个绘制动作不同步就会闪。第一刀先砍掉父窗口的背景擦除// 父窗口不要擦背景避免先刷一遍白再画内容造成闪烁 BOOL CLoginDlg::OnEraseBkgnd(CDC* pDC) { return TRUE; // 已经由 OnPaint 里的双缓冲完整覆盖 }返回 TRUE 表示“我已经处理过了”系统就不再发WM_ERASEBKGND也就不会先铺一遍背景色。但前提是OnPaint必须把整个客户区画满否则会残留上一帧的像素。所以对话框里如果还有其他控件要在OnPaint里用一个内存 DC 把整个客户区画完整再一次性BitBlt到屏幕// 父窗口整体双缓冲一次贴到屏幕杜绝逐控件刷新造成的闪 void CLoginDlg::OnPaint() { CPaintDC dc(this); CRect rcCli; GetClientRect(rcCli); CDC memDC; memDC.CreateCompatibleDC(dc); CBitmap bmp; bmp.CreateCompatibleBitmap(dc, rcCli.Width(), rcCli.Height()); CBitmap* pOldBmp memDC.SelectObject(bmp); // 1) 先铺底 memDC.FillSolidRect(rcCli, RGB(24, 24, 27)); // 2) 画所有输入框外壳与提示文字 DrawAllEdits(memDC); dc.BitBlt(0, 0, rcCli.Width(), rcCli.Height(), memDC, 0, 0, SRCCOPY); memDC.SelectObject(pOldBmp); }CreateCompatibleBitmap那一步千万别传memDC而应该传dc屏幕 DC。传memDC的话拿到的是 1×1 的单色位图画出来全黑这个错误极其常见因为编译器不会拦你。4. 交互与输入处理焦点、IME、滚动的真实表现画好只是开始输入框真正难的是它得能打字。4.1 焦点状态机与边框刷新边框颜色要跟着焦点变但WM_CTLCOLOREDIT只在绘制时调用不会因为焦点变化主动触发重绘。必须在 EDIT 的EN_SETFOCUS、EN_KILLFOCUS通知里手动刷新外壳。// 通知走的是 WM_COMMAND父窗口收到后让外壳矩形失效重绘 BOOL CLoginDlg::OnCommand(WPARAM wParam, LPARAM lParam) { const UINT nCode HIWORD(wParam); const UINT nID LOWORD(wParam); if (nCode EN_SETFOCUS || nCode EN_KILLFOCUS) { if (nID IDC_EDIT_USER || nID IDC_EDIT_PWD) { CRect rc GetEditFrameRect(nID); InvalidateRect(rc, FALSE); // FALSE不要擦背景避免闪一下 } } return CDialogEx::OnCommand(wParam, lParam); }InvalidateRect第二个参数传 FALSE 是重点。传 TRUE 会先擦背景再重绘焦点切换那一下整个框会白闪。传 FALSE 直接重绘视觉上就是边框颜色平滑地换了。还有一个坑EN_SETFOCUS在WM_COMMAND里通过HIWORD(wParam)拿到LOWORD才是控件 ID写反了永远进不去分支调试时加个断点能省很多时间。4.2 输入法候选框位置完全自绘路线绕不过去轻量路线下输入法由系统接管候选框会自动跟着光标走不用操心。完全自绘路线就麻烦了你没有实现WM_IME_*系列的默认处理输入法不知道往哪放候选框通常会甩到屏幕左上角或者窗口原点。修法是响应WM_IME_STARTCOMPOSITION在消息里设置组合窗口位置同时把 EDIT 的插入点坐标告诉输入法// 完全自绘时补上这一段否则中文候选框会飘到屏幕左上角 LRESULT CAlphaEdit::OnImeStartComposition(WPARAM, LPARAM lParam) { HIMC hIMC ::ImmGetContext(GetSafeHwnd()); if (hIMC) { // 拿到当前光标位置换算成客户区坐标 CPoint ptCaret GetCaretPos(); COMPOSITIONFORM cf { 0 }; cf.dwStyle CFS_POINT; cf.ptCurrentPos ptCaret; ::ImmSetCompositionWindow(hIMC, cf); ::ImmReleaseContext(GetSafeHwnd(), hIMC); } return DefWindowProc(WM_IME_STARTCOMPOSITION, 0, lParam); }CFS_POINT表示按点定位ptCurrentPos是客户区坐标别传屏幕坐标。ImmReleaseContext一定要调否则输入法上下文不释放切几次输入法以后整个应用打字就卡住了。GetCaretPos()在完全自绘、自己CreateCaret的情况下才返回正确值。如果没建光标它返回 (0,0)候选框就贴在左上角看起来像是“输入法坏了”实际是光标没建。4.3 键盘消息、密码模式与撤销密码框自绘最容易被忽略的点是如果你完全接管绘制又忘了处理ES_PASSWORD密码会以明文显示。这不是绘制的问题是绘制内容取错了——GetWindowText拿到的是原文你画的是原文自然就是明文。轻量路线不存在这个问题系统自己画星号或圆点。完全自绘路线要么保留ES_PASSWORD让系统画要么自己用GetPasswordChar()取掩码字符逐位替换// 完全自绘密码框时按掩码字符重新拼一份显示文本 CString CAlphaEdit::GetDisplayText() const { CString strRaw; GetWindowText(strRaw); if (!(GetStyle() ES_PASSWORD)) return strRaw; TCHAR chMask GetPasswordChar(); if (chMask 0) chMask _T(\x25CF); // 默认用实心圆点比星号好看 CString strShow; for (int i 0; i strRaw.GetLength(); i) strShow chMask; return strShow; }注意GetPasswordChar()在ES_PASSWORD未设置时返回 0所以上面加了一层兜底。另外掩码替换会破坏光标定位——真实字符宽度和圆点宽度不一致插入点位置算错这是完全自绘密码框的固有痛点所以密码框我基本都退回轻量路线不折腾。至于撤销CEdit自带EM_UNDOCtrlZ的默认处理在PreTranslateMessage里。如果你拦截了WM_KEYDOWN又没调Default()撤销就失效了。这是自绘最容易断掉的功能验证时按一次 CtrlZ 就知道有没有漏。5. 排查与避坑自绘 Edit 五分钟能遇上一个的问题5.1 输入框整个变黑或花屏现象改完OnCtlColor运行起来输入框区域一片黑或者窗口拖动时出现残影。原因基本都出在返回的画刷上。WM_CTLCOLOREDIT返回的HBRUSH由系统在稍后的绘制中使用如果你返回的是局部CBrush对象函数一返回句柄就失效了。系统拿着一个野句柄擦背景画出来什么都有可能。解决刷子必须是static、成员变量或者长期驻留的。另外同一个画刷不要被两个线程同时使用虽然绘制都在 UI 线程但如果把绘制逻辑放到工作线程就会出问题。5.2 边框被输入框盖住一半现象明明画了 2 像素边框看起来只有 1 像素颜色还发灰。原因RoundRect的画笔以路径为中心向内外各扩半个笔宽如果矩形就是 EDIT 的外沿外侧那一半被裁在窗口外。解决rc.DeflateRect(1, 1)或者干脆把 EDIT 通过MoveWindow往里缩 2 像素让外壳矩形比它大一圈。注意缩进以后左内边距kPaddingX要相应调整否则文字会显得太靠里。5.3 点了输入框提示文字不消失现象点击输入框后光标进去了提示文字还压在上面和输入内容重叠成一团。原因提示文字的显隐条件判断漏了一种情况或者没有在正确的时机触发重绘。常见的是只监听了EN_CHANGE但点击聚焦时内容没变消息不来。解决EN_SETFOCUS、EN_KILLFOCUS、EN_CHANGE三个都要监听任一触发都让外壳矩形InvalidateRect。另外判断条件用GetWindowTextLength() 0而不是比对字符串省得处理全角空格这类边界。5.4 高 DPI 下圆角变形、边框粗细不一现象125% 或 150% 缩放下圆角看起来是椭圆的边框一边粗一边细。原因RoundRect的圆角参数是绝对像素DPI 放大后控件尺寸变大但圆角没跟着缩放边框宽度在PS_SOLID下也是固定像素系统不做缩放。解决在OnInitDialog里取当前 DPI 缩放系数所有像素值乘以它// 取窗口所在显示器的 DPI 缩放系数用于换算所有像素常量 UINT CLoginDlg::GetDpiScale100() const { HDC hDC ::GetDC(GetSafeHwnd()); int nDpi ::GetDeviceCaps(hDC, LOGPIXELSX); // 96 为 100% ::ReleaseDC(GetSafeHwnd(), hDC); return (UINT)(nDpi * 100 / 96); }拿到百分比后边框宽度 2 * nScale / 100圆角半径同理。别指望系统自动帮你缩放RoundRect用的不是逻辑单位。5.5 切换对话框后输入框样式全丢现象同一个自绘输入框在 A 对话框里正常复制到 B 对话框里就恢复成系统样式。原因WM_CTLCOLOREDIT的处理器只写在 A 的类里。MFC 的消息映射是每个类独立维护的子类化再多的控件父窗口没处理就是没处理。解决把OnCtlColor里的分支逻辑抽到一个公共函数所有需要自绘的对话框都调用或者更彻底一点把输入框封装成CAlphaEdit派生类让控件自己去问父窗口要颜色这样只要控件是这类哪个对话框里都能生效。6. 二次开发把自绘 Edit 封装成能带走的控件做到这一步最该做的不是继续加特效而是把散在对话框里的绘制逻辑收进控件类让别人拿到源码就能接。我的做法是给CAlphaEdit加一个SetSkin接口把颜色、圆角、内边距、提示文字一次性传进去控件内部自己处理WM_NCPAINT和WM_PAINT的边界。关键在于“父窗口画壳”这套逻辑要挪到控件的WM_NCPAINT里——非客户区绘制正好处在系统绘制之后、客户区绘制之前不会被 EDIT 的客户区内容盖住也不需要父窗口配合。// 把外壳绘制从父窗口搬到控件的非客户区控件到哪都自带皮肤 void CAlphaEdit::OnNcPaint() { CWindowDC dc(this); CRect rcWin; GetWindowRect(rcWin); rcWin.OffsetRect(-rcWin.left, -rcWin.top); // 转成整个窗口的坐标 // 画外圈边框客户区部分会被后续的 WM_PAINT 覆盖不用管重叠 CEditSkin::DrawFrame(dc, rcWin, ::GetFocus() GetSafeHwnd()); }CWindowDC覆盖整个窗口包括非客户区和CPaintDC只覆盖客户区不一样。OffsetRect那一步是因为GetWindowRect给的是屏幕坐标而CWindowDC的原点在窗口左上角。搬过来以后SetSkin就很简单了// 外部只需要一次调用所有视觉参数交给控件自己维护 void CAlphaEdit::SetSkin(const UiTheme::EditStyle style) { m_style style; SetWindowText(_T()); // 清内容让提示文字能出来 ModifyStyleEx(0, WS_EX_TRANSPARENT); // 客户区不擦背景透出父窗口底色 SetWindowPos(nullptr, 0, 0, 0, 0, SWP_NOMOVE | SWP_NOSIZE | SWP_NOZORDER | SWP_FRAMECHANGED); }WS_EX_TRANSPARENT只在控件与父窗口绘制重叠时有用如果父窗口本身是纯色不加也行。SWP_FRAMECHANGED必须带否则样式变更后非客户区不会重新计算WM_NCPAINT不会立即来。我给自己定了个验收清单每次改完这类控件都强制走一遍切焦点看边框、输入中文看候选框、切到 150% DPI 看圆角、复制粘贴看撤销、密码框看掩码、缩到最小看有没有残影。这六条过一次基本就不会在别人机器上翻车。从那以后我每次做自绘控件都强制走一遍这个清单宁可多花十分钟也不想在上线前一天被人截图说“输入框是糊的”。代码量不大真正花时间的是这些边角。希望帮到你。本文还有配套的精品资源点击获取