简介面向Visual C开发者讲解如何借助MFC框架实现Visual Studio风格界面窗口解决默认控件样式老旧、自定义外观困难等问题适合有一定C基础并希望美化应用界面的开发者。资源压缩包共85个文件约135KB包含32个头文件和30个C源码文件以及位图、资源脚本、工作区文件、图标等其中CJ60Lib扩展库和Demo_DevStudio示例工程提供了可直接借鉴的界面实现与框架代码。已有2049人学习。通过学习包内的源码结构可掌握CFrameWnd/CMDIFrameWnd窗口派生、CJ60Lib工具栏/停靠栏/OutlookBar等扩展控件用法以及bmp位图和rc资源脚本的配置方式快速搭建出带有VS式菜单、工具栏和状态栏的应用外壳。1. Visual C做VS风格界面先想清楚要什么接了一个维护项目窗口还是二十年前的灰色对话框风格客户提的要求很简短把界面做成Visual Studio那样。这句话听着简单落地时会牵扯出停靠面板、标签页、主题配色、图标尺寸一长串问题。Visual Studio风格的界面不是单个控件能完成的它是一套窗口布局逻辑加统一绘制逻辑的组合。这篇用visual c做这件事走MFC的CDockablePane加自定义绘制路线用到的类和方法在现代Visual Studio的MFC库里仍然保留。中间给的代码可以直接抄到工程里改适合手上捏着MFC老项目、又不想推翻重写的开发者和架构师。2. MFC、WTL还是纯Win32三条路线怎么选2.1 MFC的CDockablePane是最短路径要做出Visual Studio风格的用户界面窗口先要明确一件事Visual Studio自己是C写的但它的界面框架没有对外公开成可独立分发的SDK。所以做工程应用只能走第三方路径常见三条MFC内置的停靠面板机制、WTL配合BCGSoft界面库、纯Win32从零自绘。对绝大多数存量MFC项目来说MFC这条是成本最低的。从早期Visual Studio 2008开始微软就给MFC加入了CDockablePane、CMFCTabCtrl、CMFCVisualManager这一整套框架后续每个版本的Visual Studio都还在维护这套代码包括Visual Studio 2022里的MFC项目模板也默认带VS风格的视觉管理器选项。选MFC的另一个实际理由是老项目里已经存在的对话框、控件、消息映射完全不用动只需要把主窗口基类从CFrameWnd替换为CFrameWndEx然后逐步迁移。相比另起炉灶这个替换的破坏面小风险可控。microsoft visual c附带的MFC源码里能看到这套框架的完整实现出问题时可以直接进反汇编这对维护老系统的团队很重要。2.2 WTL的BCGSoft方案适合重定制WTL本身只提供轻量封装不包含停靠窗口。BCGSoft是业界比较知名的补充方案它的CBCGPDockingControlBar配合CBCGPVisualManager类族可以做到和Visual Studio相当接近的渲染效果。这一路线的优势在于定制自由度例如新版Visual Studio的半透明面板效果BCGSoft里有对应的刷子可以直接启用。缺点也很明显商业授权费用不低而且封装层厚出了问题在调用栈里要翻很久。团队如果只是想要深色主题和停靠面板对界面自由度没有特别高的要求其实MFC的CMFCVisualManagerVS2010就能把观感拉到七成剩下三成考验的是细节调整而不是换框架。BCGSoft更适合那种要把界面做成产品核心竞争力、并且预算充足的场景。2.3 纯Win32自绘的代价纯Win32自绘这个选项要单独说几句。用CreateWindowEx建主窗口自己处理WM_PAINT、WM_NCHITTEST、WM_SIZE再实现一套可停靠的布局管理器技术上完全可行很多国产IDE的早期版本就是这么做的。但停靠逻辑的复杂度比大多数人预想的高拖动时的高亮预览、停靠区域的九宫格判定、浮动窗口的Z序管理、面板自动隐藏时的动画状态机每一项都需要自己的测试用例去覆盖。如果不是产品主卖点就是界面这条路不建议走。下表把三条路线的差异收拢一下方便决策时按自己的项目状态对号入座路线停靠框架主题定制方式上手成本适合场景MFC CDockablePane内置支持派生CMFCVisualManager覆写绘制低存量MFC项目快速改造WTL BCGSoftCBCGPDockingControlBar派生CBCGPVisualManager覆写绘制中高新项目高自由度界面纯Win32自绘完全自研完全自研极高嵌入式或无依赖环境2.4 环境准备与项目基线路线定成MFC之后开发环境建议直接用 Visual Studio 2022 或 Visual Studio 2019 装MFC组件。安装时选择使用C的桌面开发工作负载右侧勾选适用于最新v143生成工具的C MFC这一项。新建项目选MFC应用在向导的应用程序类型页里把主框架样式选为Visual Studio风格这样向导会直接生成带停靠面板框架的初始代码省掉手动搭建那一步。如果手头是老工程Visual C 6.0时代的项目直接打开会提示平台工具集不兼容。这里有一个常见的处理方式在项目属性里把平台工具集改为Visual Studio 2022v143如果代码里用了过时的语法再逐个修。老项目迁移到新版MFC后CDockablePane框架是自动可用的不需要额外引入库。3. 用MFC搭建可停靠面板的最小实现3.1 开启VS视觉管理器的具体代码方案定下来之后第一步是把MFC的视觉管理器切到VS风格。在CMainFrame::OnCreate最前面加一段// 启用VS风格的视觉管理器 CMFCVisualManager::SetDefaultManager(RUNTIME_CLASS(CMFCVisualManagerVS2010)); // 如果窗口基类是CFrameWndEx这一步会同时影响停靠栏和工具栏的绘制 EnableDocking(CBRS_ALIGN_ANY); EnableAutoHidePanes(CBRS_ALIGN_ANY);SetDefaultManager只需要调用一次它通过RUNTIME_CLASS注册管理器单例之后的停靠栏、工具栏绘制都会走这个管理器。注意一个容易踩的坑如果项目里所有框架窗口的基类还是CFrameWndCDockablePane注册时会直接断言失败。需要把主框架类的基类从CFrameWnd改成CFrameWndEx同时把PreCreateWindow里可能设置的FWS_ADDTOTITLE样式保留好这个样式会影响标题栏的显示。3.2 创建并注册CDockablePane面板视觉管理器开好之后定义面板成员并进行创建。常见做法是给每个面板写一个派生类至少在里面挂一个子控件比如用CTreeCtrl做解决方案资源管理器风格的树用CListCtrl做属性列表。这里给出一个最小可用的派生类加上主框架里的创建代码// SolutionPane.h #pragma once #include afxdockablepane.h class CSolutionPane : public CDockablePane { DECLARE_DYNCREATE(CSolutionPane) public: CSolutionPane() {} virtual BOOL OnCreate(LPCREATESTRUCT lpCreateStruct) override; protected: CTreeCtrl m_wndTree; // 面板内的树控件 }; // SolutionPane.cpp BOOL CSolutionPane::OnCreate(LPCREATESTRUCT lpCreateStruct) { if (CDockablePane::OnCreate(lpCreateStruct) -1) return -1; // 以面板为父窗口创建树控件覆盖整个客户区 m_wndTree.Create(WS_CHILD | WS_VISIBLE | TVS_HASLINES | TVS_LINESATROOT | TVS_HASBUTTONS, CRect(0, 0, 0, 0), this, 1001); m_wndTree.ModifyStyleEx(0, WS_EX_CLIENTEDGE); // 保留细边框 return TRUE; }主框架中的注册逻辑// MainFrm.h 中声明 CSolutionPane m_wndSolution; CPropertiesPane m_wndProperties; // MainFrm.cpp OnCreate 中执行 if (!m_wndSolution.Create(_T(解决方案), this, CRect(0, 0, 260, 400), TRUE, ID_VIEW_SOLUTION, WS_CHILD | WS_VISIBLE | WS_CLIPSIBLINGS, CBRS_LEFT)) { TRACE0(Failed to create solution pane\n); return -1; } m_wndSolution.EnableDocking(CBRS_ALIGN_ANY); DockPane(m_wndSolution);Create函数里有几个参数需要在意。第三个CRect是初始尺寸260代表初始宽度后面用户拖拽调整后MFC会记住新尺寸。第四个TRUE表示显示标题栏上的拖拽把手。第五个ID_VIEW_SOLUTION是面板的标识后面布局保存和命令路由都用它在整个程序里要保证唯一。第六个窗口样式里WS_CLIPSIBLINGS很关键没有它的话面板拖动和标签切换时容易出现控件残留刷新残影。最后一个CBRS_LEFT只是注册时的默认对齐方向真正决定停靠位置的是后面的DockPane调用。3.3 停靠参数对照与自动隐藏面板DockPane这个调用决定了面板出现在主窗口客户区的哪一侧。MFC里可用的对齐常量以及对应的用法如下常量值说明CBRS_ALIGN_TOP0x0001停靠到客户区顶部CBRS_ALIGN_BOTTOM0x0002停靠到客户区底部CBRS_ALIGN_LEFT0x0004停靠到客户区左侧CBRS_ALIGN_RIGHT0x0008停靠到客户区右侧CBRS_ALIGN_ANY0x000F允许停靠到任意侧DockPane(m_wndProperties)不传第二个参数MFC会让面板保留最近一次拖拽后的位置。强制指定右侧停靠可以写成DockPane(m_wndProperties, AFX_IDW_DOCKBAR_RIGHT)。AFX_IDW_DOCKBAR_LEFT、AFX_IDW_DOCKBAR_RIGHT、AFX_IDW_DOCKBAR_TOP、AFX_IDW_DOCKBAR_BOTTOM这四个常量分别对应四个方向代码里优先用这些带AFX_IDW前缀的常量语义比裸数字清楚。实现Visual Studio那种鼠标移开就自动收缩、移到边缘就滑出的效果需要额外调用EnableAutoHidePanes和EnableAutohideEnableAutoHidePanes(CBRS_ALIGN_LEFT); // 允许左侧出现自动隐藏按钮 m_wndSolution.EnableAutohide(TRUE, CBRS_ALIGN_LEFT); // 把面板切换为自动隐藏注意自动隐藏状态和固定状态是两套独立的布局数据MFC会分别保存各自的位置和大小。用户在固定和自动隐藏之间切换时不会互相覆盖这是VS里很顺手的一个交互细节MFC把它保留了下来。面板在自动隐藏模式下标题栏背景仍由视觉管理器统一绘制不用额外处理。3.4 限制面板大小的常用写法面板大小不受控是刚接触CDockablePane时最容易遇到的问题。把Create里的CRect加宽到300运行后却被压缩得只剩标题栏原因就是没限制最小尺寸。MFC对可停靠面板提供了一套完善的尺寸约束机制可以在面板类里响应WM_GETMINMAXINFOBEGIN_MESSAGE_MAP(CSolutionPane, CDockablePane) ON_WM_GETMINMAXINFO() END_MESSAGE_MAP() void CSolutionPane::OnGetMinMaxInfo(MINMAXINFO* lpMMI) { lpMMI-ptMinTrackSize.x 220; // 面板最小宽度 lpMMI-ptMinTrackSize.y 180; // 面板最小高度 CDockablePane::OnGetMinMaxInfo(lpMMI); }写完这个之后面板在拖拽、双击浮动、自动隐藏恢复三种交互下都不至于缩到看不见。如果还需要限制最大宽度比如不让属性面板超过屏幕四分之一可以在ptMaxTrackSize里填值。这个值和停靠布局的保存恢复是协同工作的因为MFC在恢复布局时会优先参考面板当前允许的尺寸范围尽量在合法范围内还原位置。4. 深色主题与细节绘制让窗口真正像VS4.1 VS深色主题的颜色取值很多人以为深色主题就是把背景刷成黑色。实际上Visual Studio的深色主题是一套精心调校的灰色系直接硬编码黑色在长时间使用时非常刺眼。参考VS深色主题的六个核心色值区域RGB十六进制主窗口背景(37, 37, 38)#252526停靠面板标题栏(45, 45, 48)#2D2D30文档区背景(30, 30, 30)#1E1E1E工具栏背景(45, 45, 48)#2D2D30选中项高亮(0, 122, 204)#007ACC前景文字(241, 241, 241)#F1F1F1边框(63, 63, 70)#3F3F46这些值可以直接复制到资源文件里作为自定义系统颜色使用。MFC的CMFCVisualManager在绘制停靠栏和工具栏时默认用的是浅色主题的颜色要让自定义颜色接管绘制需要重写视觉管理器里的对应虚函数。4.2 重写OnEraseBkgnd与视觉管理器面板自身的背景色是最容易改的。在面板类里重写WM_ERASEBKGND即可BOOL CSolutionPane::OnEraseBkgnd(CDC* pDC) { CRect rcClient; GetClientRect(rcClient); // 用 VS 深色主题背景填充避免闪白 pDC-FillSolidRect(rcClient, RGB(37, 37, 38)); return TRUE; }标题栏、拖动把手、边框这些区域由视觉管理器负责。要接管这些绘制需要从CMFCVisualManagerVS2010派生一个自定义管理器class CVS2022VisualManager : public CMFCVisualManagerVS2010 { public: virtual void OnDrawBarBackground(CDC* pDC, CBasePane* pBar, CRect rectClient, CRect rectClip, BOOL bShade) override { // 把停靠面板背景覆盖为 VS 深色 pDC-FillSolidRect(rectClient, RGB(45, 45, 48)); } virtual void OnDrawBorder(CDC* pDC, CBasePane* pBar, CRect rect, COLORREF clrBorder) override { clrBorder RGB(63, 63, 70); // VS 风格的边框色 } };然后把默认管理器换成自定义类CMFCVisualManager::SetDefaultManager(RUNTIME_CLASS(CVS2022VisualManager));这里有一个值得注意的坑CMFCVisualManagerVS2010的接口在Visual Studio 2022的MFC版本里仍然完整保留但如果项目用的是v143工具集并且启用了最新的C标准override关键字需要确保编译器级别至少是C11。MFC项目默认允许编译器扩展一般不会触发不过遇到编译错误时优先检查这项配置。4.3 树控件配色与工具栏图标面板内控件的配色也需要同步调整尤其是CTreeCtrl。深色背景下默认黑色文字直接看不见需要给树控件设置背景和文字颜色m_wndTree.SetBkColor(RGB(37, 37, 38)); m_wndTree.SetTextColor(RGB(241, 241, 241));需要注意的是这个设置只能覆盖普通状态下节点的文字颜色选中节点时高亮背景仍然由视图绘制逻辑控制。要让选中项精确显示为#007ACC的高亮条需要处理TVN_CUSTOMDRAW通知在NM_CUSTOMDRAW的CDDS_ITEMPREPAINT阶段修改文字和背景色。这个通知的处理代码量不大但涉及锁定和解锁绘图句柄建议单独封装成一个函数方便在多个面板里复用。工具栏图标方面建议统一使用16x16带透明通道的PNG高DPI环境下MFC的CMFCToolBar会自动加载同名的32x32图标。VS风格的标准工具栏图标在颜色上有明显的渐变和投影特征不要用老式16色扁平图标混搭否则深色主题下会有很强的违和感。图标资源的命名建议用IDB_ICON_XXX格式并在资源视图的图标属性里指定使用MFC颜色转换这样工具栏绘制时能把位图中的白色透明化处理。5. 工作区布局持久化的落地技巧5.1 用SaveState和LoadState保存面板状态Visual Studio界面的一个核心体验是布局可以被记忆。MFC的CFrameWndEx内置了完整的布局保存机制较简单的方式是在主框架关闭和创建时配对调用void CMainFrame::OnClose() { // 保存所有停靠面板和工具栏的布局 SaveState(LWorkspaceLayout); CFrameWndEx::OnClose(); } int CMainFrame::OnCreate(LPCREATESTRUCT lpCreateStruct) { // 现有创建代码... // 在面板注册完成后恢复布局 LoadState(LWorkspaceLayout); return 0; }SaveState会把这些信息写入注册表的App注册键下哪个面板停靠在什么位置、每个面板的宽度和高度、是否处于自动隐藏状态、浮动窗口的位置。按这个顺序执行程序重启后界面布局就和关闭时一模一样。需要注意面板的ID在整个程序里必须唯一如果两个面板用了同一个ID布局数据会互相覆盖表现为关闭后再次打开时只有一个面板留在原位。5.2 验证布局恢复是否正确的步骤布局持久化写完需要一个可复现的验证流程。可以这样操作第一步把左侧面板拖成浮动窗口同时把右侧属性面板切换为自动隐藏第二步关闭程序确认注册表里对应键值已经生成第三步重新启动程序看浮动面板是否回到相同的屏幕坐标、自动隐藏面板的滑出动画是否正常。如果浮动面板位置对不上检查是否在SaveState前调用了CleanState函数旧版本布局残留会导致恢复时叠加出错。MFC的布局保存对多显示器场景有一个边界限制如果面板停在扩展显示器上拔掉显示器后再次启动面板会恢复到主显示器的左上角。这是系统枚举显示器数量变化导致的不是MFC的缺陷。处理方式是启动时判断当前显示器数量少于保存时的数量就主动放弃恢复布局让用户手动调整。5.3 记录当前主题状态作为扩展键除了默认的布局状态还可以把当前深色主题的开关状态一并存入注册表。常见做法是在SaveState之后追加一个自定义键CWinApp* pApp AfxGetApp(); pApp-WriteProfileInt(_T(Settings), _T(DarkMode), m_bDarkMode ? 1 : 0);下次启动时在LoadState之后读取这个值再根据它决定初始化哪套视觉管理器。这样用户切换主题后布局和颜色状态都能在会话间保持一致。验证时只需要确认切换主题后重启窗口停靠面板的宽度和位置没有发生跳动基本就能说明布局恢复和主题初始化的执行顺序是合理的。本文还有配套的精品资源点击获取