MFC基本控件使用——按钮(Button)

昨天写了一个常用的控件Static静态文本框，今天再写一个同样常用的控件——Button按钮。其实，按钮的使用没什么说的，因为实在是太简单了。。。无非就是双击按钮，添加一个click事件，然后在OnClick( )函数内就可以为所欲为啦~~~但是！！！这样一来，写这篇文章就没有意义了，对吧?这里呢，我就说说一个我在用按钮控件最不爽的一个地方，那就是在按钮上使用图片。

为了界面的美观，我们往往会用一些图片来美化我们的界面，而按钮上使用图片更是必不可少的。但是，我们知道，在MFC里面使用的图片都是BMP位图格式的，要想使用其他的图片格式jpg，png，gif等是比较麻烦的(如使用GDI+)。而在美化界面的时候，其实png图片的需求是很大的，因为它支持透明，这样能让我们的一些图片按钮什么的效果更好。今天就和大家分享一下我写的一个支持各类图片(gif只能显示第一帧)的按钮(CButtonEx)。

其实，整体思路很简单，就是按钮要自绘，重载虚函数DrawItem()，用GDI+来绘图。

值得注意的就是按钮的几种状态，这里，我假设按钮有4种状态，分别是：

disable（禁用形态），hover（鼠标停在按钮上），click（鼠标点击按钮），enable（普通正常形态）

这样相对应的就要准备4张图片，为了处理更加方便，我在这个CButtonEx类中规定了设置图片的时候就让这4张合成一张，如下所示：

         

这就分别对应了4种形态(从左到右：enable，hover，click，disable，demo中disable没用到，所以就简单的和disable一样处理了)

第一步：先让代码能够使用GDI+（要直接使用CButtonEx类的话也要先GDI+的初始化）

先在stdafx.h中加入以下两句：

#include "gdiplus.h" using namespace Gdiplus; 

然后在InitInstance()函数中

// GDI+初始化GdiplusStartup(&m_gdiplusToken,  &gdiplusStartupInput,  NULL);

其中m_gdiplusToken和gdiplusStartupInput是成员变量，注意添加。

ULONG_PTR m_gdiplusToken;GdiplusStartupInput gdiplusStartupInput;

最后要在退出实例化的时候释放GDI+的资源（首先要用ClassWizard添加ExitInstance虚函数，再在ExitInstance()中添加）。

int CXXXApp::ExitInstance(){// TODO: 在此添加专用代码和/或调用基类GdiplusShutdown(m_gdiplusToken);return CWinApp::ExitInstance();}

到这里，程序就能使用GDI+来绘图了。

第二步：重载PreSubclassWindow()虚函数，改成自绘模式

void CButtonEx::PreSubclassWindow(){// 改成自绘模式ModifyStyle(0, BS_OWNERDRAW);CButton::PreSubclassWindow();}

第三步：重载DrawItem()函数，分别绘制4种形态的按钮

void CButtonEx::DrawItem(LPDRAWITEMSTRUCT lpDrawItemStruct){Rect imageRect;UINT state;// 生成绘制区域大小，获得当前按钮状态imageRect = Rect(0, 0, m_imageWidth / 4, m_imageHeight);state = lpDrawItemStruct->itemState;if(m_graphics == NULL)return;if(m_image == NULL)return;// 按钮禁用状态if(m_if_disable == true)m_graphics->DrawImage(m_image, imageRect, BUTTON_DISABLE * m_imageWidth / 4, 0, m_imageWidth / 4, m_imageHeight, UnitPixel);// 按钮按下状态else if(state & ODS_SELECTED)m_graphics->DrawImage(m_image, imageRect, BUTTON_CLICK * m_imageWidth / 4, 0, m_imageWidth / 4, m_imageHeight, UnitPixel);// 鼠标在按钮上else if(m_if_hover == true)m_graphics->DrawImage(m_image, imageRect, BUTTON_HOVER * m_imageWidth / 4, 0, m_imageWidth / 4, m_imageHeight, UnitPixel);// 按钮正常状态elsem_graphics->DrawImage(m_image, imageRect, BUTTON_ENABLE * m_imageWidth / 4, 0, m_imageWidth / 4, m_imageHeight, UnitPixel);}

第四步：自己写一个SetImage()函数用来加载图片

void CButtonEx::SetImage(CString imagePath){CWnd* pWnd;CRect buttonRect;// 加载图片，并设置图片的宽和高m_image = new Image(imagePath);m_imageWidth = m_image->GetWidth();m_imageHeight = m_image->GetHeight();// 重新调整按钮的大小(以适应图片的大小pWnd = this->GetParent();GetWindowRect( &buttonRect );pWnd -> ScreenToClient(buttonRect);buttonRect.right= buttonRect.left + m_imageWidth / 4;buttonRect.bottom= buttonRect.top  + m_imageHeight;SetWindowPos(NULL, 0, 0, buttonRect.Width(), buttonRect.Height(), SWP_NOMOVE);// 初始化m_graphicsm_graphics = new Graphics(GetWindowDC()->m_hDC);}

第五步：添加WM_MOUSEMOVE,WM_MOUSEHOVER,WM_MOUSELEAVE,WM_LBUTTONDOWN和WM_LBUTTONUP这5个事件

这5个事件的用途很简单：
WM_MOUSEMOVE是为了追踪WM_MOUSEHOVER和WM_MOUSELEAVE事件的，因为默认下这两个事件是不会捕获的。

TRACKMOUSEEVENT csTME;csTME.cbSize = sizeof(csTME);csTME.dwFlags = TME_LEAVE | TME_HOVER;// 指定要追踪的事件csTME.dwHoverTime = 50;csTME.hwndTrack = m_hWnd;// 指定要追踪的窗口 ::_TrackMouseEvent(&csTME);// 开启Windows的WM_MOUSELEAVE事件支持

在OnMouseMove()中添加追踪这两个事件就可以了。

而WM_LBUTTONDOWN和WM_LBUTTONUP就是为了切换按钮的m_if_hover状态和刷新控件用的，代码很简单就不贴了。

到这里，CButtonEx就基本完成了。

在这里我写了一个简单的CButtonEx，可以支持
（1）jpeg图片按钮；
（2）png图片按钮；
（3）gif图片(第一帧)按钮；
（4）直接添加tooltip提示信息；
（5）普通/特殊两类按钮

传一张简单的效果图：

http://img.my.csdn.net/uploads/201404/30/1398849583_8805.gif

CButtonEx类下载地址：

http://download.csdn.net/detail/smallstonesk/7278067