簡(jiǎn)介一份面向MFC界面開發(fā)者的CListCtrl自繪實(shí)現(xiàn)代碼包解決默認(rèn)滾動(dòng)條、表頭和列表項(xiàng)樣式生硬的問題。資源包含自定義滾動(dòng)條類、自定義表頭類以及基于Owner-Draw的列表項(xiàng)繪制邏輯涉及CScrollBar/CHeaderCtrl繼承、OnPaint重繪、WM_HSCROLL/WM_VSCROLL及HDM_LAYOUT等消息處理。壓縮包共42個(gè)文件以h/cpp源碼為主另有14個(gè)bmp位圖資源、2個(gè)txt說明以及示例工程SkinList_demo整體僅87KB。已有325人學(xué)習(xí)適合需要提升MFC列表界面美觀度的初中級(jí)開發(fā)者參考。通過閱讀rm.txt和示例工程可快速掌握自繪控件銜接與消息分工并直接復(fù)用或改造到自己的項(xiàng)目中。 做MFC界面開發(fā)的朋友應(yīng)該都有過這種經(jīng)歷項(xiàng)目做到一半產(chǎn)品經(jīng)理指著你提交的版本說“這個(gè)CListCtrl太素了表頭要有質(zhì)感、選中行要變成藍(lán)色而且失焦不能變灰、滾動(dòng)條也要跟整體風(fēng)格統(tǒng)一”。一開始你可能覺得簡(jiǎn)單調(diào)幾個(gè)顏色就行真正動(dòng)手才發(fā)現(xiàn)系統(tǒng)默認(rèn)繪制機(jī)制比想象中頑固得多。表頭HeaderCtrl、列表項(xiàng)Items、滾動(dòng)條Scrollbar這三塊各有各的繪制路徑HeaderCtrl和Items還好說滾動(dòng)條自繪更是能把人繞暈。這篇文章把我折騰過的一整套CListCtrl重繪代碼拆開講清楚從HeaderCtrl到Items再到Scrollbar每個(gè)部分怎么接管、攔截哪些消息、處理哪些狀態(tài)以及那些網(wǎng)上很少說透的坑一次性寫明白。適合正在做MFC界面美化、被CListCtrl各種默認(rèn)行為折磨、又不想引入第三方皮膚庫(kù)的朋友參考。1. 重繪前的思路先搞清楚要?jiǎng)幽膸讉€(gè)部分1.1 三條自繪路線怎么選CListCtrl的自繪業(yè)內(nèi)常見有三條路線第一條是Custom DrawNM_CUSTOMDRAW它適合列表項(xiàng)和整行的定制也是大多數(shù)人第一次接觸CListCtrl自繪時(shí)用的方式第二條是Owner DrawLVS_OWNERDRAWFIXED給列表項(xiàng)完全自繪的能力靈活但工作量大還要自己處理所有繪制細(xì)節(jié)非必要不推薦第三條是對(duì)子窗口做子類化比如把CHeaderCtrl攔截下來自己畫或者攔截ToolTip、滾動(dòng)條之類的系統(tǒng)組件。實(shí)際工程里這三條路線往往是組合使用的。就拿我這個(gè)項(xiàng)目來說HeaderCtrl我用的OwnerDraw路線給表頭設(shè)置HDS_OWNERDRAWFIXED樣式后重載DrawItem因?yàn)楸眍^的視覺結(jié)構(gòu)比較固定背景、文字、排序箭頭、分隔線四樣?xùn)|西自己畫反而比跟系統(tǒng)默認(rèn)繪制做斗爭(zhēng)更可控。Items用的Custom Draw消息處理鏈清晰能做交替行色、選中高亮、圖標(biāo)混合這些常見效果而且不用像Owner Draw那樣自己處理鍵盤導(dǎo)航和編輯狀態(tài)。Scrollbar這條路最特殊后面單獨(dú)用一整章講因?yàn)樗静皇瞧胀ㄒ饬x上的“子窗口”沒法直接子類化。1.2 三個(gè)目標(biāo)的技術(shù)特點(diǎn)與坑點(diǎn)概覽動(dòng)手之前先把三個(gè)部分的特點(diǎn)和主要難點(diǎn)列個(gè)表方便你對(duì)照自己的需求判斷優(yōu)先級(jí)。實(shí)際項(xiàng)目里這三個(gè)部分不是必須同時(shí)改很多時(shí)候只改Items就能讓列表顏值提升一大截。繪制目標(biāo)推薦方案關(guān)鍵消息/接口主要難點(diǎn)HeaderCtrl子類化 OwnerDrawHDS_OWNERDRAWFIXED、DrawItem排序箭頭狀態(tài)、分隔線像素ItemsNM_CUSTOMDRAWCDDS_PREPAINT/ITEMPREPAINT失焦變灰、選中態(tài)覆蓋ScrollbarWM_NCPAINT或替換控件WM_NCPAINT、GetScrollInfo非客戶區(qū)交互、滑塊坐標(biāo)計(jì)算這個(gè)表是我整理項(xiàng)目筆記時(shí)畫的也是我后來做同類需求時(shí)最先翻出來看的東西。你可以把滾動(dòng)條那行單獨(dú)圈出來它是三個(gè)部分里唯一需要同時(shí)處理繪制和交互的地方也是最容易在“畫出來了但拖不動(dòng)”這個(gè)詭異狀態(tài)上卡住的部分。2. 表頭HeaderCtrl重繪從默認(rèn)樣式到完全自繪2.1 子類化CHeaderCtrl并啟用OwnerDraw要接手表頭繪制不能直接在CListCtrl里發(fā)消息得先拿到CHeaderCtrl窗口并子類化它。最常見的寫法是在CMyListCtrl的PreSubclassWindow里做手腳。我建議把CMyHeaderCtrl單獨(dú)聲明成一個(gè)類別把所有邏輯堆在CListCtrl里否則后期維護(hù)會(huì)很難受。// MyListCtrl.h class CMyHeaderCtrl : public CHeaderCtrl { public: virtual void PreSubclassWindow() override; protected: virtual void DrawItem(LPDRAWITEMSTRUCT lpDrawItemStruct) override; }; class CMyListCtrl : public CListCtrl { public: virtual void PreSubclassWindow() override; protected: CMyHeaderCtrl m_header; }; // MyListCtrl.cpp void CMyListCtrl::PreSubclassWindow() { CListCtrl::PreSubclassWindow(); CHeaderCtrl* pHeader GetHeaderCtrl(); if (pHeader ! NULL) { m_header.SubclassWindow(pHeader-GetSafeHwnd()); } } void CMyHeaderCtrl::PreSubclassWindow() { CHeaderCtrl::PreSubclassWindow(); // 關(guān)鍵啟用 OwnerDraw 樣式否則 DrawItem 不會(huì)被調(diào)用 ModifyStyle(0, HDS_OWNERDRAWFIXED); }這里有個(gè)細(xì)節(jié)值得注意PreSubclassWindow是在窗口創(chuàng)建時(shí)調(diào)用的理論上此時(shí)GetHeaderCtrl已經(jīng)返回了有效的CHeaderCtrl指針但實(shí)際運(yùn)行中還是會(huì)遇到拿到NULL的情況。比如在對(duì)話框模板里創(chuàng)建的ListCtrl如果模板的visible狀態(tài)或者創(chuàng)建順序有微妙差異表頭可能還沒初始化完。所以我習(xí)慣加一層空指針判斷寧可什么都不做也不能讓程序崩掉。如果你用的是Create動(dòng)態(tài)創(chuàng)建建議在OnCreate里而不是PreSubclassWindow里做子類化。啟用HDS_OWNERDRAWFIXED之后DrawItem會(huì)被系統(tǒng)調(diào)用HDC就是表頭客戶區(qū)這時(shí)候就算完全進(jìn)入自繪模式了。2.2 繪制排序箭頭和分隔線的細(xì)節(jié)在DrawItem里必須取HDITEM注意mask要包含HDI_TEXT和HDI_FORMAT兩樣。HDI_FORMAT里除了列對(duì)齊方式還帶有HDF_SORTUP和HDF_SORTDOWN標(biāo)志這是排序箭頭狀態(tài)的唯一來源。很多新手不知道這一點(diǎn)以為箭頭需要自己維護(hù)一個(gè)變量來記排序狀態(tài)結(jié)果列表排序一變化箭頭狀態(tài)就錯(cuò)亂。void CMyHeaderCtrl::DrawItem(LPDRAWITEMSTRUCT lpDIS) { CDC* pDC CDC::FromHandle(lpDIS-hDC); if (!pDC) return; CRect rc(lpDIS-rcItem); CRect rcText rc; rcText.left 8; rcText.right - 16; // 右側(cè)預(yù)留箭頭空間 // 背景 pDC-FillSolidRect(rc, RGB(52, 55, 58)); // 底色分割線 CPen pen(PS_SOLID, 1, RGB(70, 72, 75)); CPen* pOldPen pDC-SelectObject(pen); pDC-MoveTo(rc.left, rc.bottom - 1); pDC-LineTo(rc.right, rc.bottom - 1); pDC-SelectObject(pOldPen); // 獲取列文本與格式 TCHAR szText[128] {0}; HDITEM hdi {0}; hdi.mask HDI_TEXT | HDI_FORMAT; hdi.pszText szText; hdi.cchTextMax 127; GetItem(lpDIS-itemID, hdi); // 文字 pDC-SetBkMode(TRANSPARENT); pDC-SetTextColor(RGB(230, 230, 230)); pDC-DrawText(szText, rcText, DT_LEFT | DT_VCENTER | DT_SINGLELINE); // 排序箭頭 if (hdi.fmt HDF_SORTUP) { DrawSortArrow(pDC, rc, TRUE); } else if (hdi.fmt HDF_SORTDOWN) { DrawSortArrow(pDC, rc, FALSE); } }繪制箭頭時(shí)有個(gè)最容易踩的坑文字和箭頭搶空間。如果列寬比較小文字會(huì)把箭頭位置蓋住。我的做法是rcText.right - 16給箭頭留出固定的16像素空間箭頭畫在列右側(cè)10像素附近。另一個(gè)坑是分隔線位置畫在rcItem.right - 1還是rcItem.right效果差別很大畫到right上會(huì)被下一列的背景蓋住看起來像是分隔線斷續(xù)。按1像素內(nèi)縮才能在視覺上形成連續(xù)分隔效果。箭頭三角形本身用Polygon畫就行注意坐標(biāo)要跟文字垂直居中對(duì)齊。這個(gè)方案在XP到Win10的實(shí)測(cè)中表現(xiàn)穩(wěn)定但有一點(diǎn)必須提醒如果系統(tǒng)開啟了視覺風(fēng)格manifest里帶comctl32 v6默認(rèn)分隔線的顏色和寬度會(huì)跟你畫的對(duì)不上視覺風(fēng)格下CHeaderCtrl自身還有一層漸變背景需要你完全覆蓋所有像素否則會(huì)有毛邊。3. 列表項(xiàng)Items重繪選中態(tài)與焦點(diǎn)態(tài)才是重點(diǎn)3.1 NM_CUSTOMDRAW的完整處理鏈Items部分的核心是NM_CUSTOMDRAW消息。在CMyListCtrl里直接用ON_NOTIFY_REFLECT反射消息消息經(jīng)ListCtrl自己處理一遍再傳給父窗口這樣代碼可以封裝在控件類內(nèi)部外部調(diào)用方不用感知。BEGIN_MESSAGE_MAP(CMyListCtrl, CListCtrl) ON_NOTIFY_REFLECT(NM_CUSTOMDRAW, CMyListCtrl::OnNMCustomDraw) END_MESSAGE_MAP() void CMyListCtrl::OnNMCustomDraw(NMHDR* pNMHDR, LRESULT* pResult) { NMLVCUSTOMDRAW* pLVCD (NMLVCUSTOMDRAW*)pNMHDR; DWORD dwStage pLVCD-nmcd.dwDrawStage; *pResult CDRF_DODEFAULT; if (dwStage CDDS_PREPAINT) { *pResult CDRF_NOTIFYITEMDRAW; return; } if (dwStage CDDS_ITEMPREPAINT) { *pResult CDRF_NOTIFYSUBITEMDRAW; return; } if (dwStage CDDS_SUBITEMPREPAINT) { // 在這里按列設(shè)置文字顏色、背景色 } }這個(gè)處理鏈的順序是PREPAINT整控件準(zhǔn)備繪制→ ITEMPREPAINT每一行準(zhǔn)備繪制→ SUBITEMPREPAINT每行每一列準(zhǔn)備繪制。每一層返回不同的CDRF標(biāo)志決定下一層是否會(huì)收到通知。如果你只做整行顏色統(tǒng)一走到ITEMPREPAINT就夠了直接在pLVCD-clrText和pLVCD-clrTextBk里賦值返回CDRF_NEWFONT如果需要不同列不同顏色才必須繼續(xù)通知到SUBITEMPREPAINT。注意一點(diǎn)CDDS_PREPAINT里如果返回CDRF_SKIPDEFAULT整個(gè)列表都會(huì)變成空白這是新手最容易犯的錯(cuò)誤。3.2 失焦不變灰的兩種實(shí)現(xiàn)思路先解釋為什么CListCtrl失焦后選中項(xiàng)會(huì)變灰。系統(tǒng)默認(rèn)在失去焦點(diǎn)時(shí)會(huì)把選中項(xiàng)畫成灰色視覺風(fēng)格下是淺灰藍(lán)而Custom Draw的uItemState里的CDIS_SELECTED標(biāo)志在失焦時(shí)會(huì)被系統(tǒng)清掉所以你在Custom Draw里判斷CDIS_SELECTED會(huì)發(fā)現(xiàn)失靈選中項(xiàng)突然不生效了。思路一是繞開CDIS_SELECTED直接查詢項(xiàng)狀態(tài)。LVIS_SELECTED這個(gè)狀態(tài)位在失焦后依然保留選中狀態(tài)本身不會(huì)因?yàn)槭Ы苟宄皇且曈X上被系統(tǒng)強(qiáng)制畫成灰。所以你可以直接調(diào)用GetItemState去查不看uItemState里那個(gè)不可靠的標(biāo)志。但只改clrTextBk還不夠系統(tǒng)對(duì)選中行背景有特殊處理視覺風(fēng)格下是一層漸變藍(lán)失焦時(shí)這層漸變會(huì)變成灰色蓋過你設(shè)置的背景色。更徹底的做法是在ITEMPREPAINT階段自己FillSolidRect整行背景然后返回CDRF_NEWFONT讓系統(tǒng)繼續(xù)畫文字但文字顏色自己控制。if (dwStage CDDS_ITEMPREPAINT) { int iItem (int)pLVCD-nmcd.dwItemSpec; CDC* pDC CDC::FromHandle(pLVCD-nmcd.hdc); CRect rcItem; GetItemRect(iItem, rcItem, LVIR_BOUNDS); if (GetItemState(iItem, LVIS_SELECTED) LVIS_SELECTED) { // 無(wú)論焦點(diǎn)在不在都畫成同一種選中藍(lán) pDC-FillSolidRect(rcItem, RGB(0, 120, 215)); pLVCD-clrText RGB(255, 255, 255); pLVCD-clrTextBk RGB(0, 120, 215); } else { pDC-FillSolidRect(rcItem, RGB(255, 255, 255)); pLVCD-clrText RGB(30, 30, 30); pLVCD-clrTextBk RGB(255, 255, 255); } *pResult CDRF_NEWFONT; return; }這段代碼最核心的一句就是GetItemState(iItem, LVIS_SELECTED) LVIS_SELECTED它不關(guān)心焦點(diǎn)狀態(tài)只關(guān)心這一行是否處于“選中”這個(gè)邏輯狀態(tài)。背景已經(jīng)被你填成固定的亮藍(lán)色失焦時(shí)系統(tǒng)也沒有機(jī)會(huì)再把它畫灰了。我自己實(shí)測(cè)下來這個(gè)方案在Win7到Win10、XP加經(jīng)典主題下都穩(wěn)定。思路二是攔截WM_KILLFOCUS和WM_SETFOCUS收到消息后強(qiáng)制RedrawWindow在繪制期間臨時(shí)把焦點(diǎn)狀態(tài)“固定”成有焦點(diǎn)。這個(gè)方法在理論上也行但實(shí)際容易被模態(tài)對(duì)話框、菜單彈出、視圖切換打斷而且焦點(diǎn)消息和繪制消息之間有時(shí)序問題會(huì)出現(xiàn)偶發(fā)的“閃一下灰再變藍(lán)”的鬼畜效果。我不推薦除非你遇到了連GetItemState都不能用的特殊場(chǎng)景。3.3 取消所有選擇行與選中行顏色控制“取消所有選擇行”是網(wǎng)上問得很多的功能其實(shí)LVM_SETITEMSTATE一條消息就能解決。關(guān)鍵在于用-1作為item索引表示“所有項(xiàng)”。很多人第一次寫會(huì)把state參數(shù)傳錯(cuò)導(dǎo)致一行都沒取消掉。void DeselectAll(CListCtrl list) { LVITEM lvItem {0}; lvItem.stateMask LVIS_SELECTED | LVIS_FOCUSED; lvItem.state 0; list.SendMessage(LVM_SETITEMSTATE, (WPARAM)-1, (LPARAM)lvItem); }注意stateMask必須同時(shí)包含LVIS_SELECTED和LVIS_FOCUSEDstate清零。如果你只清LVIS_SELECTED而保留了LVIS_FOCUSED焦點(diǎn)行會(huì)留下一個(gè)虛框看起來像是沒有完全取消選擇。這條代碼在需要全選/全不選切換的場(chǎng)景里非常實(shí)用。選中行顏色控制方面別把顏色值硬編碼在繪制函數(shù)里。我習(xí)慣在CMyListCtrl里維護(hù)兩個(gè)成員變量m_crSelectionBack和m_crSelectionText在OnSysColorChange里根據(jù)系統(tǒng)主題動(dòng)態(tài)更新這樣換膚或者系統(tǒng)高對(duì)比度模式下選中行顏色不會(huì)顯得突兀。另外一個(gè)容易被忽略的點(diǎn)是選中行文本里如果有圖標(biāo)DrawIcon的透明區(qū)域跟FillSolidRect的背景色要協(xié)調(diào)否則圖標(biāo)邊緣會(huì)出現(xiàn)難看的白框。4. 滾動(dòng)條Scrollbar重繪最硬核也最容易被問爆的地方4.1 為什么滾動(dòng)條不能像表頭那樣直接子類化很多人一想到重繪滾動(dòng)條第一反應(yīng)是跟表頭一樣子類化結(jié)果發(fā)現(xiàn)GetScrollBarCtrl(SB_VERT)對(duì)CListCtrl返回是NULL。原因是CListCtrl的滾動(dòng)條不是獨(dú)立窗口而是ListView窗口非客戶區(qū)的一部分你根本沒有一個(gè)獨(dú)立的HWND可以去Subclass。這是滾動(dòng)條重繪第一道坎也是網(wǎng)上資料總是講一半的原因。正因?yàn)槿绱藰I(yè)內(nèi)形成了兩條主流路線。路線A是攔截WM_NCPAINT在非客戶區(qū)自己繪制滾動(dòng)條同時(shí)處理WM_NCHITTEST、WM_NCLBUTTONDOWN等命中消息這是真正意義上的滾動(dòng)條重繪但交互邏輯全得自己寫路線B是去掉標(biāo)準(zhǔn)滾動(dòng)條樣式在ListCtrl右側(cè)放一個(gè)自繪的CScrollBar子類控件通過消息同步滾動(dòng)位置。工程上路線B更可控很多開源皮膚庫(kù)都在用調(diào)試也直觀。4.2 路線AWM_NCPAINT自繪非客戶區(qū)采用路線A的話核心思路是先調(diào)用Default()讓系統(tǒng)把邊框等非客戶區(qū)畫好然后在滾動(dòng)條區(qū)域上疊畫。數(shù)據(jù)來源是GetScrollInfo滑塊位置和高度必須自己算。void CMyListCtrl::OnNcPaint() { Default(); // 先讓系統(tǒng)畫默認(rèn)非客戶區(qū) CWindowDC dc(this); CRect rcClient; GetClientRect(rcClient); ClientToScreen(rcClient); // 滾動(dòng)條區(qū)域 CRect rcScroll; rcScroll.left rcClient.right - GetSystemMetrics(SM_CXVSCROLL); rcScroll.top rcClient.top; rcScroll.bottom rcClient.bottom; rcScroll.right rcClient.right; SCROLLINFO si; ZeroMemory(si, sizeof(si)); si.cbSize sizeof(si); si.fMask SIF_ALL; GetScrollInfo(SB_VERT, si); // 滑塊高度 int nTrackH rcScroll.Height(); int nThumbH (int)(nTrackH * (double)si.nPage / (si.nMax 1)); nThumbH max(nThumbH, 20); int nRange max(1, nTrackH - nThumbH); int nThumbPos (si.nPos - si.nMin) * nRange / max(1, si.nMax - si.nPage 1); // 畫軌道與滑塊 dc.FillSolidRect(rcScroll, RGB(240, 240, 240)); CRect rcThumb(rcScroll.left, rcScroll.top nThumbPos, rcScroll.right, rcScroll.top nThumbPos nThumbH); dc.FillSolidRect(rcThumb, RGB(150, 150, 150)); }這段代碼有幾個(gè)計(jì)算細(xì)節(jié)必須注意ListView的滾動(dòng)范圍不是0到nMax而是0到nMax - nPage 1所以滑塊位置的分母要用si.nMax - si.nPage 1否則滾到底滑塊也到不了底部?；瑝K高度用比例計(jì)算后還要做最小高度限制否則內(nèi)容很多時(shí)滑塊會(huì)變成一條肉眼幾乎看不見的細(xì)線。系統(tǒng)沒有提供直接獲取非客戶區(qū)DPI本文還有配套的精品資源點(diǎn)擊獲取