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