簡介面向MFC界面開發(fā)者這份代碼包演示了如何重繪CListCtrl的滾動條、表頭和列表項解決默認(rèn)控件樣式單一、難以匹配應(yīng)用主題的問題。資源包含完整示例工程與說明文檔覆蓋自定義滾動條繪制、表頭樣式定制以及OwnerDraw列表項自繪等關(guān)鍵技術(shù)點可直接參考或整合進(jìn)現(xiàn)有項目。壓縮包共42個文件以bmp位圖資源、h頭文件、cpp實現(xiàn)類和txt說明為主另有dsp/dsw工程文件、rc資源腳本及示例對話框源碼整體僅87KB下載查看都很方便。作者封裝了SkinListCtrl、SkinHeaderCtrl、SkinHorizontalScrollbar、SkinVerticleScrollbar等類配合皮膚位圖可快速實現(xiàn)統(tǒng)一視覺風(fēng)格rm.txt和ReadMe.txt則補充了實現(xiàn)思路與使用說明降低二次開發(fā)門檻。資源已有325人學(xué)習(xí)瀏覽適合具備一定MFC基礎(chǔ)、希望提升列表控件外觀的中級開發(fā)者。 做MFC界面開發(fā)的朋友應(yīng)該都有過這種體驗系統(tǒng)自帶的CListCtrl樣式總停留在Win95時代。滾動條是老式方塊表頭扁平?jīng)]有立體感選中項一旦失焦就變成灰撲撲一片和整套界面的深色風(fēng)格怎么都搭不上。我前陣子做一個桌面客戶端客戶明確要求列表控件整體風(fēng)格統(tǒng)一于是把重繪CListCtrl的三個核心部分——scrollbar、headerctrl、items——從頭到尾完整走了一遍。這篇就專門聊聊這套重繪方案的選型、代碼實現(xiàn)和踩坑記錄。文章適合兩類人看一是老MFC項目需要做界面美化想給CListCtrl換膚的朋友二是被“選中后藍(lán)色、失焦后變灰”這類經(jīng)典問題困擾的開發(fā)者。全文不涉及復(fù)雜框架核心就是NM_CUSTOMDRAW、CHeaderCtrl子類化、WM_NCPAINT這三板斧。1. 重繪前先想清楚整體方案怎么選1.1 默認(rèn)樣式的問題到底在哪CListCtrl本質(zhì)上是一個復(fù)合控件它由三套獨立繪制機制拼在一起列表項本身走控件的自繪通知表頭是內(nèi)部的一個SysHeader32子窗口滾動條則是系統(tǒng)繪制的非客戶區(qū)元素。這三部分各自為政也是為什么很多新手想重繪卻無從下手的原因——你用NM_CUSTOMDRAW搞定了item表頭和滾動條還是老樣子整體風(fēng)格依然不統(tǒng)一。我剛開始做深色主題時也犯過這個錯只處理了列表項的顏色結(jié)果表頭白花花一片滾動條還是系統(tǒng)默認(rèn)的淺灰色整個界面看起來像拼接出來的。后來才意識到重繪CListCtrl的正確姿勢是“三線作戰(zhàn)”items走CustomDraw通知header用子類化窗口scrollbar則要處理非客戶區(qū)繪制。1.2 自繪的三條路線對比先說結(jié)論這三部分各自的推薦方案完全不同Items監(jiān)聽NM_CUSTOMDRAW通知在OnNMCustomdraw里自己畫背景和文字。這是MFC官方推薦的自繪方式性能和靈活性平衡最好千萬不要用OwnerDrawLVS_OWNERDRAWFIXED那意味著所有繪制全包連雙擊、焦點框、快捷鍵高亮都要自己處理工作量翻倍。HeaderCtrl派生CHeaderCtrl類重寫DrawItem再通過CListCtrl::GetHeaderCtrl()拿到指針后SubclassDlgItem。也可以用HDN_ITEMDRAW通知實現(xiàn)但那個通知在XP和Win7下的行為有不小差異子類化更可控。Scrollbar最省事的是FlatSB平面滾動條API想完全定制外觀就得處理WM_NCPAINT消息先讓系統(tǒng)畫完再覆蓋繪制滾動條區(qū)域。我最終采用的組合是CustomDraw處理item 派生CHeaderCtrl處理表頭 WM_NCPAINT處理滾動條。下面按這三個方向逐個拆解。2. 重繪Scrollbar外觀定制的兩種可行打法2.1 零代碼速成方案FlatSB如果項目對滾動條要求不高只是想去掉老式3D凸起效果FlatSB是最快的路。CListCtrl創(chuàng)建之后調(diào)用InitializeFlatScrollBar(GetSafeHwnd())然后通過FlatSB_SetScrollProp設(shè)置滾動條顏色、滑塊大小等屬性十幾行代碼就能讓滾動條從“復(fù)古3D”變成“平面現(xiàn)代風(fēng)”。這個方案的優(yōu)點是簡單、穩(wěn)定不涉及任何自繪代碼缺點同樣明顯FlatSB是Win2000時代的東西樣式固定在扁平風(fēng)格上顏色配置自由度也很有限你沒法畫圓角滑塊也沒法加懸停高亮效果。如果項目要求跟整體UI高度一致FlatSB只能當(dāng)過渡方案。2.2 進(jìn)階方案WM_NCPAINT覆蓋繪制要完全控制滾動條外觀核心思路是在WM_NCPAINT里先調(diào)用默認(rèn)處理讓系統(tǒng)把邊框和滾動條畫好然后用GetWindowDC拿到非客戶區(qū)DC把滾動條區(qū)域重新覆蓋繪制一遍。這里的難點在于滑塊位置必須和系統(tǒng)內(nèi)部狀態(tài)保持一致否則會出現(xiàn)“外觀滑塊位置”和“實際點擊熱區(qū)”對不上的問題。我的做法是繪制前用GetScrollInfo拿到SIF_ALL信息根據(jù)nPos、nPage、nMax自己計算滑塊的高度和位置再畫軌道、滑塊和上下箭頭按鈕。這樣無論用戶怎么拖拽滾動條下次重繪時外觀都會跟內(nèi)部狀態(tài)同步。核心代碼大概長這樣void CMyListCtrl::OnNcPaint() { CListCtrl::OnNcPaint(); // 先讓系統(tǒng)畫好邊框 CWindowDC dc(this); CRect rcWin, rcScroll; GetWindowRect(rcWin); int cxVScroll GetSystemMetrics(SM_CXVSCROLL); rcScroll CRect(rcWin.right - cxVScroll, rcWin.top, rcWin.right, rcWin.bottom); dc.Draw3dRect(rcScroll, RGB(30,30,30), RGB(30,30,30)); // 軌道背景 SCROLLINFO si {0}; si.cbSize sizeof(si); si.fMask SIF_ALL; GetScrollInfo(SB_VERT, si); int nTrackH rcScroll.Height() - 2 * cxVScroll; // 去掉上下箭頭的高度 int nThumbH max(20, nTrackH * si.nPage / si.nMax); int nThumbY rcScroll.top cxVScroll (nTrackH - nThumbH) * si.nPos / max(1, si.nMax - si.nPage); CRect rcThumb(rcScroll.left 2, nThumbY, rcScroll.right - 2, nThumbY nThumbH); dc.FillSolidRect(rcThumb, RGB(80, 80, 80)); dc.FillSolidRect(rcScroll.left 1, rcScroll.top, cxVScroll - 2, cxVScroll, RGB(60, 60, 60)); // 上箭頭 dc.FillSolidRect(rcScroll.left 1, rcScroll.bottom - cxVScroll, cxVScroll - 2, cxVScroll, RGB(60, 60, 60)); // 下箭頭 }2.3 滾動條自繪的三個注意點第一DC必須用GetWindowDC不能用GetDC。GetDC拿到的客戶區(qū)DC根本畫不到非客戶區(qū)一開始我用錯了折騰半天滾動條就是不變樣。第二繪制時要保證窗口邊框不被覆蓋。我習(xí)慣在繪制前用GetWindowRect拿到完整窗口矩形然后把繪制區(qū)域裁剪到滾動條那一豎條避免把系統(tǒng)畫好的edge邊線涂掉。第三刷新時機。滾動條位置變化后WM_NCPAINT不一定會自動觸發(fā)需要在WM_VSCROLL、WM_HSCROLL以及滾輪消息里手動調(diào)用SetWindowPos(NULL, 0,0,0,0, SWP_NOMOVE|SWP_NOSIZE|SWP_NOZORDER|SWP_FRAMECHANGED)來強制重繪非客戶區(qū)。3. 重繪HeaderCtrl從子類化開始3.1 為什么推薦派生CHeaderCtrl而不是只處理HDN_ITEMDRAW網(wǎng)上很多方案是在父窗口里響應(yīng)HDN_ITEMDRAW用NMHDR里的NMCUSTOMDRAW信息畫表頭。這個方案在Win7上問題不大但在XP的某些版本里這個通知的觸發(fā)時機不穩(wěn)定偶爾會出現(xiàn)表頭畫一半、排序箭頭不刷新之類的情況。我推薦的方式是派生CHeaderCtrl重寫DrawItem然后把這個子類窗口裝到CListCtrl上。這樣表頭的繪制邏輯完全收攏在自己的類里方便復(fù)用也方便調(diào)試。3.2 表頭自繪核心代碼先聲明一個CMyHeaderCtrl在DrawItem里自行處理背景、分割線、文字和排序箭頭class CMyHeaderCtrl : public CHeaderCtrl { protected: virtual void DrawItem(LPDRAWITEMSTRUCT lpDrawItemStruct); }; void CMyHeaderCtrl::DrawItem(LPDRAWITEMSTRUCT lpDrawItemStruct) { CDC* pDC CDC::FromHandle(lpDrawItemStruct-hDC); CRect rcItem(lpDrawItemStruct-rcItem); int nIndex lpDrawItemStruct-itemID; // 背景 pDC-FillSolidRect(rcItem, RGB(45, 45, 48)); // 右側(cè)分割線 CRect rcDiv(rcItem.right - 1, rcItem.top, rcItem.right, rcItem.bottom); pDC-FillSolidRect(rcDiv, RGB(30, 30, 30)); // 獲取表頭文字 TCHAR szText[256] {0}; HDITEM hdi {0}; hdi.mask HDI_TEXT; hdi.pszText szText; hdi.cchTextMax 255; GetItem(nIndex, hdi); // 文字區(qū)域留出排序箭頭空間 CRect rcText rcItem; rcText.left 6; rcText.right - 20; pDC-SetBkMode(TRANSPARENT); pDC-SetTextColor(RGB(235, 235, 235)); pDC-DrawText(szText, rcText, DT_LEFT | DT_VCENTER | DT_SINGLELINE | DT_END_ELLIPSIS); // 繪制排序箭頭 HDITEM hdiArrow {0}; hdiArrow.mask HDI_FORMAT; GetItem(nIndex, hdiArrow); if (hdiArrow.fmt HDF_SORTUP) { DrawSortArrow(pDC, rcItem, TRUE); } else if (hdiArrow.fmt HDF_SORTDOWN) { DrawSortArrow(pDC, rcItem, FALSE); } }然后在CListCtrl初始化時把默認(rèn)的表頭替換成這個子類CMyHeaderCtrl* m_pHeader new CMyHeaderCtrl(); m_pHeader-SubclassDlgItem(0, this); // 這一步是關(guān)鍵0表示表頭控件的ID注意SubclassDlgItem的第一個參數(shù)傳0是可行的因為CListCtrl內(nèi)部表頭ID固定為0。如果直接調(diào)用GetHeaderCtrl()拿到指針再SubclassWindow在某些MFC版本里也可能出問題這個坑我后面會細(xì)說。3.3 排序箭頭和按下狀態(tài)的坑畫排序箭頭時我一開始用DrawFrameControl(DFCS_ADOWN)來畫結(jié)果箭頭大小和系統(tǒng)自帶的差異很大在深色背景下邊緣還有毛刺。后來改成自己畫三角形代碼反而更干凈void CMyHeaderCtrl::DrawSortArrow(CDC* pDC, CRect rcHeader, BOOL bUp) { CPoint ptCenter; ptCenter.x rcHeader.right - 12; ptCenter.y rcHeader.CenterPoint().y; POINT ptArrow[3]; if (bUp) { ptArrow[0] CPoint(ptCenter.x, ptCenter.y - 4); ptArrow[1] CPoint(ptCenter.x - 5, ptCenter.y 3); ptArrow[2] CPoint(ptCenter.x 5, ptCenter.y 3); } else { ptArrow[0] CPoint(ptCenter.x, ptCenter.y 4); ptArrow[1] CPoint(ptCenter.x - 5, ptCenter.y - 3); ptArrow[2] CPoint(ptCenter.x 5, ptCenter.y - 3); } CBrush br(RGB(200, 200, 200)); pDC-SelectObject(br); pDC-SelectStockObject(NULL_PEN); pDC-Polygon(ptArrow, 3); }另一個坑是表頭按下時的凹陷效果。自繪之后系統(tǒng)不會自動畫按下狀態(tài)如果你在DrawItem里沒有根據(jù)lpDrawItemStruct-itemState判斷ODS_SELECTED用戶點擊表頭時是沒有任何視覺反饋的看起來很“愣”。我后來在DrawItem開頭加了一段if (lpDrawItemStruct-itemState ODS_SELECTED) { pDC-Draw3dRect(rcItem, RGB(20, 20, 22), RGB(60, 60, 62)); }這樣按下去表頭會變暗一圈交互反饋就出來了。4. 重繪Items失焦不變灰是最好的練手場景4.1 NM_CUSTOMDRAW繪制清單列表項重繪是這三部分里代碼量最大、也最容易出效果的。先確認(rèn)CListCtrl設(shè)置了LVS_REPORT風(fēng)格然后給控件添加NM_CUSTOMDRAW的消息映射在響應(yīng)函數(shù)里按階段處理void CMyListCtrl::OnNMCustomdraw(NMHDR* pNMHDR, LRESULT* pResult) { NMLVCUSTOMDRAW* pLVCD reinterpret_castNMLVCUSTOMDRAW*(pNMHDR); *pResult CDRF_DODEFAULT; if (pLVCD-nmcd.dwDrawStage CDDS_PREPAINT) { *pResult CDRF_NOTIFYITEMDRAW; return; } if (pLVCD-nmcd.dwDrawStage CDDS_ITEMPREPAINT) { // 進(jìn)入單個item繪制 *pResult CDRF_NOTIFYSUBITEMDRAW; return; } if (pLVCD-nmcd.dwDrawStage (CDDS_ITEMPREPAINT | CDDS_SUBITEM)) { DrawSubItem(pLVCD); *pResult CDRF_SKIPDEFAULT; } }其實更常見的做法是只在CDDS_ITEMPREPAINT里處理行背景色子項文字還是交給系統(tǒng)畫。但如果需要完全控制顏色和字體就需要走到子項級別也就是CDDS_SUBITEM。在DrawSubItem里我做了這幾件事先根據(jù)行號判斷是否選中填充背景色再根據(jù)列寬計算文字繪制區(qū)域然后繪制圖標(biāo)、勾選框和文字。4.2 失焦仍保持選中藍(lán)色的正確寫法這里就是熱詞里問得最多的“丟去焦點變灰如何失去焦點不變灰”的核心。系統(tǒng)默認(rèn)行為是列表控件失去焦點后選中項會從高亮藍(lán)色變成灰色。要打破這個行為唯一可靠的方式就是在自繪中完全接管選中項的繪制不讓系統(tǒng)去畫背景和文字。關(guān)鍵點在DrawSubItem里的邏輯BOOL bSelected (pLVCD-nmcd.uItemState CDIS_SELECTED); if (bSelected) { // 不管焦點狀態(tài)永遠(yuǎn)用我們自己的藍(lán)色 pDC-FillSolidRect(rcCell, RGB(38, 79, 120)); } else { if (nRow % 2) { pDC-FillSolidRect(rcCell, RGB(50, 50, 52)); } else { pDC-FillSolidRect(rcCell, RGB(42, 42, 44)); } }這里有個細(xì)節(jié)特別容易踩坑在CDDS_SUBITEM階段系統(tǒng)傳入的uItemState有時并不包含CDIS_SELECTED需要自己調(diào)用GetItemState(row, LVIS_SELECTED)來判斷。我最初就是直接相信了傳進(jìn)來的uItemState結(jié)果選中狀態(tài)時靈時不靈后來強制改用GetItemState判斷問題就消失了。文字顏色同理不關(guān)心控件是否有焦點if (bSelected) { pDC-SetTextColor(RGB(255, 255, 255)); } else { pDC-SetTextColor(RGB(220, 220, 220)); }這么處理之后這個列表無論有沒有焦點選中行永遠(yuǎn)保持深藍(lán)色底、白字。配合去掉CListCtrl默認(rèn)的焦點虛線框在PreSubclassWindow里用ModifyStyle去除LVS_SHOWSELALWAYS或者干脆不設(shè)置它視覺效果非常穩(wěn)定。4.3 雙緩沖防閃爍自繪列表項很容易出現(xiàn)拖動滾動條時整列閃爍的問題。我建議在CListCtrl初始化時加上這行SetExtendedStyle(GetExtendedStyle() | LVS_EX_DOUBLEBUFFER | LVS_EX_GRIDLINES);LVS_EX_DOUBLEBUFFER能解決大部分滾動閃爍。但注意XP系統(tǒng)上這個擴展樣式在部分老版本comctl32里無效如果你還需要兼容XP建議檢查系統(tǒng)版本或者在WM_ERASEBKGND里直接返回TRUE并用內(nèi)存DC手動雙緩沖。我的做法是自繪代碼不依賴系統(tǒng)緩存而是自己在DrawSubItem里用內(nèi)存DC繪制先畫到臨時位圖再一次性BitBlt到目標(biāo)DC。代價是代碼多幾行但滾動流暢度提升非常明顯。5. 常見問題與排查技巧實錄5.1 自繪后復(fù)選框消失如果列表啟用了LVS_EX_CHECKBOXES在自繪Item時一定要自己畫勾選框否則系統(tǒng)默認(rèn)繪制被CDRF_SKIPDEFAULT跳過之后勾選框就沒了。解決辦法是在CDDS_SUBITEM階段判斷當(dāng)前列是否是第一列然后調(diào)用DrawFrameControl畫復(fù)選框BOOL bChecked GetCheck(nRow); UINT uState DFCS_BUTTONCHECK | (bChecked ? DFCS_CHECKED : 0); pDC-DrawFrameControl(rcCheck, DFC_BUTTON, uState);5.2 Report模式子項文字重疊自繪子項時很多人拿到一個整行矩形就畫文字結(jié)果第一列文字和后面幾列疊在一起。正確做法是用GetColumnWidth循環(huán)累加得到每一列的起始X坐標(biāo)然后按列寬裁剪矩形int x 0; for (int col 0; col nColCount; col) { int w GetColumnWidth(col); CRect rcCol(x, rcRow.top, x w, rcRow.bottom); // 用rcCol繪制該列 x w; }這里要注意列與列之間有一條gridline如果啟用了網(wǎng)格線繪制前要把矩形右側(cè)縮進(jìn)1像素否則文字會和網(wǎng)格線重疊。5.3 取消所有選擇行與選中焦點風(fēng)格“clistctrl取消所有選擇行”本身很簡單一條代碼搞定SetItemState(-1, 0, LVIS_SELECTED);但如果你的自繪代碼邏輯寫得不好取消選擇后畫面上可能還殘留高亮背景這是因為你在繪制時沒有強制重繪整個客戶區(qū)。正確做法是在取消選擇后調(diào)用Invalidate(FALSE)強制所有行重新走一遍CustomDraw。5.4 滾動條重繪后滑塊拖不動這是WM_NCPAINT自繪滾動條最常見的問題原因是覆蓋繪制時改了滑塊外觀但系統(tǒng)內(nèi)部仍然用原來的滾動條信息處理點擊熱區(qū)只要外觀滑塊位置和內(nèi)部狀態(tài)不一致就會出現(xiàn)“畫出來的滑塊在這里但點上去沒反應(yīng)”。我的排查經(jīng)驗是不要自己維護滑塊位置繪制時每次都用GetScrollInfo現(xiàn)算。這樣即使系統(tǒng)內(nèi)部狀態(tài)變化了下次繪制也能跟上。如果發(fā)現(xiàn)拖拽后滑塊跳來跳去多半是WM_VSCROLL里沒有觸發(fā)非客戶區(qū)重繪補上SetWindowPos強制刷新即可。另外還有一個容易忽視的細(xì)節(jié)當(dāng)列表總行數(shù)很少、滾動條變?yōu)榻脿顟B(tài)時滾動條的軌道和滑塊要用弱化顏色繪制否則禁用狀態(tài)下滾動條依然高亮視覺上是錯的。在WM_NCPAINT里用GetScrollInfo判斷nPage nMax時直接畫一個置灰軌道就能規(guī)避這個問題。結(jié)尾這套重繪方案我前后花了一周時間才完全跑通回頭看不難但三個部分各自的坑確實不少。個人最深的體會是做CListCtrl自繪一定要先界定邊界——哪些繪制交給系統(tǒng)、哪些自己接管然后嚴(yán)格計算自繪區(qū)域避免和系統(tǒng)繪制打架。特別是滾動條這種非客戶區(qū)元素能少碰就少碰必須碰的時候保證每次繪制都從實時狀態(tài)讀取別自己維護位置緩存。另外一個小技巧所有自繪代碼里用到的顏色值最好集中定義成常量或配置項后續(xù)換主題時只需要改一處。我后來把深色配色抽成了一個結(jié)構(gòu)體滾動條、表頭、item三處引用同一套色值換膚方便很多。如果你也想給CListCtrl做統(tǒng)一風(fēng)格化建議從Items自繪入手練手再逐步擴展表頭和滾動條這條路走起來最順。本文還有配套的精品資源點擊獲取