Windows介面——使用Custom Draw優雅的實現ListCtrl的重繪

cbnotes發表於2014-08-28
Windows
common control 4.7版本介紹了一個新的特性叫做Custom Draw，這個名字顯得模糊不清，讓人有點摸不著頭腦，而且MSDN裡也只給出了一些如風的解釋和例子，沒有誰告訴你你想知道的，和究竟這個特性有什麼好處。
 
Custom draw可以被想象成一個輕量級的，容易使用的重繪方法（重繪方法還有幾種，例如Owner Draw等）。這種容易來自於我們只需要處理一個訊息（NM_CUSTOMDRAW），就可以讓Windows為你幹活了，你就不用被逼去處理＂重繪過程＂中所有的髒活了。
 
這篇文章的焦點是如何在一個LISTCTRL控制元件上使用Custom Draw訊息。究其原因，一部分是因為我已經在我的工作上使用了Custom Draw有一段時間了，我很熟悉它。另一個原因是這個機制確實是非常好用，你只需要寫很少量的程式碼就可以達到很好的效果。使用 Custom draw 來對控制元件外觀程式設計甚至可以代替很多的古老方法。
 
以下程式碼是在WIN98 和VC6 SP2的環境下寫的，common controls DLL的版本是5.0。我已經對其在WinNT 4上進行了測試。系統要執行這些程式碼，它的common controls DLL的版本必須至少是4.71。但隨著IE4 的釋出，這已經不是問題了。(IE會夾帶著這個DLL一起釋出)
 
Custom Draw 基礎
 
我將會盡我所能把Custom Draw的處理描述清楚，而不是簡單的引用MSDN的文件。這些例子都需要你的程式有一個ListCtrl在對話方塊上，並且這個ListCtrl處於Report和多列模式。
 
Custom Draw 的訊息對映入口
Custom draw 是一個類似於回撥的處理過程，Windows在繪製List Ctrl的某個時間點上通過 Notification 訊息通知你的程式，你可以選擇忽略所有的通知（這樣你就會看到標準的ListCtrl），或者處理某部分的繪製（實現簡單的效果），甚至整個的控制元件都由你來繪製（就象使用Owner-Drawing一樣）。這個機制的真正賣點是：你只需要實現一些你需要的，其餘的可以讓Windows為你代勞。
好了，現在你可以開始為你的ListCtrl新增Custom Draw去做一些個性化的事情了。你首先要有正確的Comm Ctrl Dll版本，然後Windows會為你傳送NM_CUSTOMDRAW訊息，你只需要新增一個處理函式以便開始使用Custom draw。首先新增一個訊息對映，象下面一樣：
ON_NOTIFY ( NM_CUSTOMDRAW, IDC_MY_LIST, OnCustomdrawMyList )
處理函式的原形如下：
afx_msg void OnCustomdrawMyList ( NMHDR* pNMHDR, LRESULT* pResult );
這就告訴ＭＦＣ你要處理從你的ListCtrl控制元件發出的WM_NOTIFY訊息，ID為IDC_MY_LIST，通知碼為NM_CUSTOMDRAW，OnCustomdrawMyList就是你的處理函式。
如果你有一個從ClistCtr派生的類，你想為它新增custom draw，你就可以使用ON_NOTIFY_REFLECT來代替。如下：
ON_NOTIFY_REFLECT ( NM_CUSTOMDRAW, OnCustomdraw )
 
OnCustomdraw的原形和上面的函式一致，但它是宣告在你的派生類裡的。
 
Custom draw將控制元件的繪製分為兩部分：擦除和繪畫。Windows在每部分的開始和結束都會傳送NM_CUSTOMDRAW訊息。所以總共就有4個訊息。但是實際上你的程式所收到訊息可能就只有1個或者多於四個，這取決於你想要讓WINDOWS怎麼做。每次傳送訊息的時段被稱作為一個“繪畫段”。你必須緊緊抓住這個概念，因為它貫穿於整個“重繪”的過程。
 
所以，你將會在以下的時間點收到通知：
 
l         一個item被畫之前——“繪畫前”段
l         一個item被畫之後——“繪畫後”段
l         一個item被擦除之前——“擦除前”段
l         一個item被擦除之後——“擦除後”段
 
並不是所有的訊息都是一樣有用的，實際上，我不需要處理所有的訊息，直到這篇文章完成之前，我還沒使用過擦除前和擦除後的訊息。所以，不要被這些訊息嚇到你。
NM_CUSTOMDRAW Messages提供給你的資訊：
 
l         NM_CUSTOMDRAW訊息將會給你提供以下的資訊：
l         ListCtrl的控制程式碼
l         ListCtrl的ID
l         當前的“繪畫段”
l         繪畫的DC，讓你可以用它來畫畫
l         正在被繪製的控制元件、item、subitem的RECT值
l         正在被繪製的Item的Index值
l         正在被繪製的SubItem的Index值
l         正被繪製的Item的狀態值（selected, grayed, 等等）
l         Item的LPARAM值，就是你使用CListCtrl::SetItemData所設的那個值
 
上述所有的資訊對你來說可能都很重要，這取決於你想實現什麼效果，但最經常用到的就是“繪畫段”、“繪畫ＤＣ”、“Item Index”、“LPARAM”這幾個值。
一個簡單的例子：
好了，經過上面的無聊的細節之後，我們是時候來看一些簡單的程式碼了。第一個例子非常的簡單，它只是改變了一下控制元件中文字的顏色。
處理的程式碼如下：
void CPanel1::OnCustomdrawList ( NMHDR* pNMHDR, LRESULT* pResult )
{
 NMLVCUSTOMDRAW* pLVCD = reinterpret_cast<NMLVCUSTOMDRAW*>( pNMHDR );
    // Take the default processing unless we set this to something else below.
    *pResult = 0;
    // First thing - check the draw stage. If it's the control's prepaint
    // stage, then tell Windows we want messages for every item.
    if ( CDDS_PREPAINT == pLVCD->nmcd.dwDrawStage )
        {
        *pResult = CDRF_NOTIFYITEMDRAW;
        }
    else if ( CDDS_ITEMPREPAINT == pLVCD->nmcd.dwDrawStage )
        {
        // This is the prepaint stage for an item. Here's where we set the
        // item's text color. Our return value will tell Windows to draw the
        // item itself, but it will use the new color we set here.
        // We'll cycle the colors through red, green, and light blue.
        COLORREF crText;
        if ( (pLVCD->nmcd.dwItemSpec % 3) == 0 )
            crText = RGB(255,0,0);
        else if ( (pLVCD->nmcd.dwItemSpec % 3) == 1 )
            crText = RGB(0,255,0);
        else
            crText = RGB(128,128,255);
        // Store the color back in the NMLVCUSTOMDRAW struct.
        pLVCD->clrText = crText;
        // Tell Windows to paint the control itself.
        *pResult = CDRF_DODEFAULT;
        }
}
結果如下，你可以看到行和行間的顏色的交錯顯示，多酷，而這隻需要兩個if的判斷就可以做到了。
 
有一件事情必須記住，在做任何的繪畫之前，你都要檢查正處身的“繪畫段”，因為你的處理函式會接收到非常多的訊息，而“繪畫段”將決定你程式碼的行為。
一個更小的簡單例子：
下面的例子將演示怎麼去處理subitem的繪畫(其實subitem也就是列)
  1. 在ListCtrl控制元件繪畫前處理NM_CUSTOMDRAW訊息。
  2. 告訴Windows我們想對每個Item處理NM_CUSTOMDRAW訊息。
  3. 當這些訊息中的一個到來，告訴Windows我們想在每個SubItem的繪製前處理這個訊息
  4. 當這些訊息到達，我們就為每個SubItem設定文字和背景的顏色。
void CMyDlg::OnCustomdrawMyList ( NMHDR* pNMHDR, LRESULT* pResult )
{
NMLVCUSTOMDRAW* pLVCD = reinterpret_cast<NMLVCUSTOMDRAW*>( pNMHDR );
 
    // Take the default processing unless we set this to something else below.
    *pResult = CDRF_DODEFAULT;
 
    // First thing - check the draw stage. If it's the control's prepaint
    // stage, then tell Windows we want messages for every item.
 
    if ( CDDS_PREPAINT == pLVCD->nmcd.dwDrawStage )
        {
        *pResult = CDRF_NOTIFYITEMDRAW;
        }
    elseif ( CDDS_ITEMPREPAINT == pLVCD->nmcd.dwDrawStage )
        {
        // This is the notification message for an item. We'll request
        // notifications before each subitem's prepaint stage.
 
        *pResult = CDRF_NOTIFYSUBITEMDRAW;
        }
    elseif ( (CDDS_ITEMPREPAINT | CDDS_SUBITEM) == pLVCD->nmcd.dwDrawStage )
        {
        // This is the prepaint stage for a subitem. Here's where we set the
        // item's text and background colors. Our return value will tell
        // Windows to draw the subitem itself, but it will use the new colors
        // we set here.
        // The text color will cycle through red, green, and light blue.
        // The background color will be light blue for column 0, red for
        // column 1, and black for column 2.
   
        COLORREF crText, crBkgnd;
       
        if ( 0 == pLVCD->iSubItem )
            {
            crText = RGB(255,0,0);
            crBkgnd = RGB(128,128,255);
            }
        elseif ( 1 == pLVCD->iSubItem )
            {
            crText = RGB(0,255,0);
            crBkgnd = RGB(255,0,0);
            }
        else
            {
            crText = RGB(128,128,255);
            crBkgnd = RGB(0,0,0);
            }
 
        // Store the colors back in the NMLVCUSTOMDRAW struct.
        pLVCD->clrText = crText;
        pLVCD->clrTextBk = crBkgnd;
 
        // Tell Windows to paint the control itself.
        *pResult = CDRF_DODEFAULT;
        }
}
執行的結果如下：

這裡需要注意兩件事：
l         clrTextBk的顏色只是針對每一列，在最後一列的右邊那個區域顏色也還是和ListCtrl控制元件的背景顏色一致。
l         當我重新看文件的時候，我注意到有一篇題目是“NM_CUSTOMDRAW (list view)”的文章，它說你可以在最開始的custom draw訊息中返回CDRF_NOTIFYSUBITEMDRAW就可以處理SubItem了，而不需要在CDDS_ITEMPREPAINT繪畫段中去指定CDRF_NOTIFYSUBITEMDRAW。但是我試了一下，發現這種方法並不起作用，你還是需要處理CDDS_ITEMPREPAINT段。
處理“繪畫之後”的段
      到限制為止的例子都是處理“繪畫前”的段，當Windows繪製List Item之前就改變它的外觀。然而，在“繪製前”，你的繪製行為時被限制的，你只能改變字型的顏色或者外觀。如果你想改變圖示的繪製，你可以在“繪畫前”把整個 Item重畫或者在“繪畫後”去做這件事。當你做在繪畫後去做“自定義繪畫”是，你的“繪畫處理函式”就會在Windows畫完整個Item或者SubItem的時候被呼叫，你就可以隨心所欲的亂畫了！！
      在這個例子裡，我將建立一個ListCtrl，一般的ListCtrl的Item如果被選擇了，則其Icon也會呈現出被選擇的狀態。而我建立的這個ListCtrl的Icon是不會呈現被選擇的狀態的。步驟如下：
  1. 對ListCtrl在“繪畫前”處理NM_CUSTOMDRAW訊息。
  2. 告訴Windows我們想在每個Item被畫的時候獲得NM_CUSTOMDRAW訊息。
  3. 當這些訊息來臨，告訴Windows我們想在你畫完的時候獲取NM_CUSTOMDRAW訊息。
  4. 當這些訊息來到的時候，我們就重新畫每一個Item的圖示。
void CPanel3::OnCustomdrawList ( NMHDR* pNMHDR, LRESULT* pResult )
{
 NMLVCUSTOMDRAW* pLVCD = reinterpret_cast<NMLVCUSTOMDRAW*>( pNMHDR );
    
    *pResult = 0;
 
    // If this is the beginning of the control's paint cycle, request
    // notifications for each item.
 
    if ( CDDS_PREPAINT == pLVCD->nmcd.dwDrawStage )
 {
        *pResult = CDRF_NOTIFYITEMDRAW;
 }
    else if ( CDDS_ITEMPREPAINT == pLVCD->nmcd.dwDrawStage )
 {
        // This is the pre-paint stage for an item.  We need to make another
        // request to be notified during the post-paint stage.
  
        *pResult = CDRF_NOTIFYPOSTPAINT;
 }
    else if ( CDDS_ITEMPOSTPAINT == pLVCD->nmcd.dwDrawStage )
 {
        // If this item is selected, re-draw the icon in its normal
        // color (not blended with the highlight color).
        LVITEM rItem;
        int    nItem = static_cast<int>( pLVCD->nmcd.dwItemSpec );
  
        // Get the image index and state of this item.  Note that we need to
        // check the selected state manually.  The docs _say_ that the
        // item's state is in pLVCD->nmcd.uItemState, but during my testing
        // it was always equal to 0x0201, which doesn't make sense, since
        // the max CDIS_ constant in commctrl.h is 0x0100.
  
        ZeroMemory ( &rItem, sizeof(LVITEM) );
        rItem.mask  = LVIF_IMAGE | LVIF_STATE;
        rItem.iItem = nItem;
        rItem.stateMask = LVIS_SELECTED;
        m_list.GetItem ( &rItem );
  
        // If this item is selected, redraw the icon with its normal colors.
  
        if ( rItem.state & LVIS_SELECTED )
  {
            CDC*  pDC = CDC::FromHandle ( pLVCD->nmcd.hdc );
            CRect rcIcon;
   
            // Get the rect that holds the item's icon.
            m_list.GetItemRect ( nItem, &rcIcon, LVIR_ICON );
   
            // Draw the icon.
            m_imglist.Draw ( pDC, rItem.iImage, rcIcon.TopLeft(),
    ILD_TRANSPARENT );
   
            *pResult = CDRF_SKIPDEFAULT;
  }
 }
}
重複，custom draw讓我們可以做盡可能少的工作，上面的例子就是讓Windows幫我們做完全部的工作，然後我們就重新對選擇狀態的Item的圖示做重畫，那就是我們看到的那個圖示。執行結果如下：
唯一的不足是，這樣的方法會讓你感覺到一點閃爍。因為圖示被畫了兩次（雖然很快）。
 
用Custom Draw代替Owner Draw
另外一件優雅的事情就是你可以使用Custom Draw來代替Owner Draw。它們之間的不同在我看來就是：
l         寫Custom Draw的程式碼比寫Owner Draw的程式碼更容易。
如果你只需要改變某行的外觀，你可以不用管其他的行的繪畫，讓WINDOWS去做就行了。但如果你使用
Owner Draw，你必須要對所有的行作處理。當你想對控制元件作所有的處理時，你可以在處理NM_CUSTOMDRAW
訊息的最後返回CDRF_SKIPDEFAULT，這有點和我們到目前為止所做的有些不同。CDRF_SKIPDEFAULT
告訴Windows由我們來做所有的控制元件繪畫，你不用管任何事。
我沒有在這裡包含這個例子的程式碼，因為它有點長，但是你可以一步步地在偵錯程式中除錯程式碼，你可以看到每一
步發生了什麼。如果你把視窗擺放好，讓你可以看到偵錯程式和演示的程式，那在你一步步的除錯中，你可以看到
控制元件每一步的繪製，這裡的ListCtrl是很簡單的，只有一列並且沒有列頭，如下：
 
如果需要看原文和下載例子程式，請到這個網址：
http://www.codeproject.com/listctrl/lvcustomdraw.asp

相關文章