MFC下按钮自绘的实现

MFC下按钮自绘的实现（一）


       在MFC下编程，很多时候对于标准的按钮控件不是很满意，想要弄的美观点。这就需要按钮自绘。这里简单记录一下方法，以免过个十天半个月的，自己又忘的一干二净了。

       首先给工程添加一个MFC类，基类为CButton。要想让按钮具备自绘功能，就要为按钮添加BS_OWNERDRAW属性。为类CButton重载PreSubclassWindow虚函数。在该函数中添加如下一行代码：

       ModifyStyle(0, BS_OWNERDRAW);

      
当按钮控件具有了自绘功能之后，每次控件状态改变都会触发DrawItem函数，在该函数中来绘制按钮的形态外观，所以第二步就要重载DrawItem虚函数。在这个函数中就可以自由发挥了，比如绘制外边框，底色，按钮标题，内边框等等。

      
一般都会为按钮定义几种不同状态时的外观，比如光标滑过时的状态，按钮按下时的状态，按钮禁用时的状态，以及按钮的正常状态等等。这就要为新的按钮添加几种重要的消息响应。比如WM_MOUSELEAVE消息，WM_MOUSEHOVER消息和WM_MOUSEMOVE消息等等，值得一提的是前两个消息的响应函数需要自己手动添加，微软提供了一个TrackMouseEvent函数在光标离开一个窗口时投递WM_MOUSELEAVE消息，光标滑过窗口时投递WM_MOUSEHOVER消息。一般来说可以在WM_MOUSEMOVE消息响应函数中调用TrackMouseEvent函数来投递WM_MOUSELEAVE消息和WM_MOUSEHOVER消息。然后在WM_MOUSELEAVE消息的响应函数中标记“光标已经离开按钮”，然后调用InvalidateRect函数让按钮重绘。在WM_MOUSEHOVER消息的响应函数中标记“光标正在按钮上方”，并调用InvalidateRect函数让按钮重绘。

      
典型代码：

      
if (!m_bTracking)  // 判断此时按钮是否已经按下

      
{

             
TRACKMOUSEEVENT tme;

             
tme.cbSize = sizeof(tme);

             
tme.hwndTrack = m_hWnd;

             
tme.dwFlags = TME_LEAVE | TME_HOVER;

             
tme.dwHoverTime = 1;

             
m_bTracking = _TrackMouseEvent(&tme);

      
}

这几天都是这么困，不知道是怎么搞的，呆会接着写。

MFC下按钮自绘的实现（二）

       上篇文章中提到使用WM_MOUSELEAVE消息，但是在Windows CE操作系统下，手动添加WM_MOUSELEAVE消息响应函数之后，编译会发现WM_MOUSELEAVE没有定义。之前在Windows
XP操作系统下执行的程序没有这个提示。找到原来的程序，发现WM_MOUSELEAVE的定义在\microsoft visual studio 8\vc\platformsdk\include\winuser.h文件中。

#if(WINVER >= 0x0500)

#define WM_NCMOUSEHOVER                
0x02A0

#define WM_NCMOUSELEAVE                
0x02A2

#endif /* WINVER >= 0x0500 */

据此手动添加如下代码：

#ifndef WM_MOUSELEAVE

#define WM_MOUSELEAVE                  
0x02A3

#endif

对于WM_MOUSEHOVER消息也是一样：

#ifndef WM_MOUSEHOVER

#define WM_MOUSEHOVER                  
0x02A1

#endif

重新编译即可。

另外上篇文章中说道TrackMouseEvent函数用来投递WM_MOUSELEAVE和WM_MOUSEHOVER消息。貌似这个函数在Windows
CE操作系统下也找不到。找不到就不用它了，自己直接调用PostMessage投递出去算了。

比如：

::PostMessage(m_hWnd, WM_MOUSELEAVE, 0, 0);

那么当光标滑过按钮时，会触发WM_MOUSEMOVE消息，在这个函数中如何判断光标是在按钮上停留着还是离开了，从而是发送WM_MOUSELEAVE消息还是WM_MOUSEHOVER消息呢？这个不难吧，至少PtInRect函数可以搞定。

自己测试了一下，完全可以。

MFC下按钮自绘的实现（三）



       按钮的绘制主要在DrawItem函数中来完成，下面来简单的绘制一下。

第一步先绘制按钮的外边框。定义了一个成员变量：

      
CPen m_OutBorderPen;

       这是一个用来绘制按钮外边框的画笔，在类的构造函数中创建它，在类的析构函数中销毁之。然后在DrawItem函数中开始绘制按钮的外边框：

      
CRect rect = lpDrawItemStruct->rcItem;

      
CDC *pDC = CDC::FromHandle(lpDrawItemStruct->hDC);

      
int nSavedDC = pDC->SaveDC();

 

      
// 绘制按钮的外边框

      
POINT pt;

      
pt.x = 5;

      
pt.y = 5;

      
CPen *pOldPen = pDC->SelectObject(&m_OutBorderPen);

      
pDC->RoundRect(&rect, pt);

      
pDC->SelectObject(pOldPen);

      
编译之后执行一下程序，看下效果：

      



      
按钮的轮廓出来了。

      
第二步绘制按钮的底色。

      
// 绘制按钮的底色

      
rect.DeflateRect(3, 3, 3, 3);

      
CBrush *pOldBrush = pDC->SelectObject(&m_BackgroundBrush);

      
pDC->Rectangle(rect);

      
pDC->SelectObject(pOldBrush);

      
这里只是简单的示范一下而已，画出来的按钮不一定好看。这里将按钮的底色设置为纯白色。程序的执行效果如下：

      



      
第三步绘制按钮的文本。

      
// 绘制按钮文本

      
TCHAR strButtonText[MAX_PATH + 1];

      
::GetWindowText(m_hWnd, strButtonText, MAX_PATH); //
获取按钮文本

      
if (strButtonText != NULL)

      
{

             
CFont *pFont = GetFont();

             
CFont *pOldFont = pDC->SelectObject(pFont);

             
CSize szExtent = pDC->GetTextExtent(strButtonText, _tcslen(strButtonText));

             
CRect rectText = lpDrawItemStruct->rcItem;

             
rectText.DeflateRect(rect.CenterPoint().x - szExtent.cx / 2, rect.CenterPoint().y - szExtent.cy / 2, rect.CenterPoint().x - szExtent.cx / 2, rect.CenterPoint().y - szExtent.cy / 2);

             
int nOldBkMode = pDC->SetBkMode(TRANSPARENT);

             
pDC->DrawText(strButtonText, -1, rectText, DT_WORDBREAK | DT_CENTER);

             
pDC->SelectObject(pOldFont);

             
pDC->SetBkMode(nOldBkMode);

      
}

      
重新编译，执行效果如下：

      



      
按钮的基本外观已经绘制出来了。接下来还要绘制按钮按下时，光标滑过时，光标离开时等等状态下按钮的外观。当然还要探索一下圆形按钮，三角形按钮，以及不规则图形按钮的绘制。累了，先写到这里。

      

 
MFC下按钮自绘的实现（四）

    接下来为自绘的按钮绘制不同状态下的外观，首先绘制按钮按下时的状态。一般在按钮按下时，按钮的文本会向右下方移动一个微小的距离，使其看起来有被“压下”的视觉。

通过如下代码获取按钮的状态：

UINT state = lpDrawItemStruct->itemState;

然后在DrawItem函数中绘制按钮文本之前（DrawText）添加如下代码：

if (state & ODS_SELECTED)

{

    rectText.OffsetRect(1, 1);

}

    编译运行程序，看下效果。

    按钮正常状态：

   


    按钮被按下时：



对比一下，可以看出按钮按下时，按钮上文本向右下方移动一小段距离。测试了一下，效果还不错。

    接下来绘制当光标位于按钮之上但按钮并没有被按下时的状态。这里仅仅大致的介绍一下我的方法。

    首先在OnMouseMove函数中，添加如下代码：

    if (!m_bOver)

    {

        m_nTimerId = SetTimer(1, 50, TimerProc);

        m_bOver = TRUE;

    }  

    其中m_bOver是用来标记光标此时是否在按钮之上的BOOL类型的变量。当光标经过按钮时，触发OnMouseMove函数，在此函数中设置一个定时器，定时时间为50ms，定时时间到了之后将触发TimerProc回调函数。在TimerProc函数中不断的判断此时光标停留在按钮之上，还是已经离开了按钮。

    POINT CursorPos;

    RECT ButtonRect;

    ::GetCursorPos(&CursorPos);

    ::ScreenToClient(hwnd, &CursorPos);

    ::GetClientRect(hwnd, &ButtonRect);

    if (!::PtInRect(&ButtonRect, CursorPos))

    {

        ::PostMessage(hwnd, WM_MOUSELEAVE, 0, 0);

    }

    else

    {

        ::PostMessage(hwnd, WM_MOUSEHOVER, 0, 0);

    }

    如果光标停留在按钮之上，投递出WM_MOUSEHOVER消息之后将触发OnMouseHover函数，在该函数中将m_bOver设置为TURE，并调用InvalidateRect函数更新窗口；如果光标已经离开了按钮，投递出WM_MOUSELEAVE消息，触发OnMouseLeave函数，在该函数中将m_bOver设置为FALSE，然后调用InvalidateRect函数更新窗口，接着关闭定时器，因为此时已经不必再连续判断光标是否还停留在按钮之上了。最后在DrawItem函数中判断如果m_bOver为TURE，则绘制一定的图形进行标记。

    如下图：

    光标不在按钮之上：

   


    光标位于按钮之上：