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);
	// 按钮正常状态
	else
		m_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_graphics
	m_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）普通/特殊两类按钮

传一张简单的效果图：

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

CButtonEx类下载地址：

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