【自绘Button之一】带Icon的按钮控件

最新推荐文章于 2024-09-09 16:49:25 发布
最新推荐文章于 2024-09-09 16:49:25 发布
阅读量2.9k 收藏 4
点赞数
分类专栏： MFC控件自绘
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hisinwang/article/details/8182393
版权 
参考：
CButtonST的源码
Demo下载：
CIconBtn_Demo
Demo程序图片:

使用示例：

m_btn1.SetIcon(IDI_ICON_TEST);  //设置Icon
// 设置Icon与Text的对齐方式为：Icon在左Text在右
m_btn1.SetAlign(CIconBtn::IBTN_ICON_LEFT_TEXT_RIGHT);

m_btn2.SetIcon(IDI_ICON_TEST);
// 设置Icon与Text的对齐方式为：Icon在右Text在左
m_btn2.SetAlign(CIconBtn::IBTN_ICON_RIGHT_TEXT_LEFT);

m_btn3.SetIcon(IDI_ICON_TEST);
// 设置Icon与Text的对齐方式为：Icon在顶Text在底
m_btn3.SetAlign(CIconBtn::IBTN_ICON_TOP_TEXT_BOTTOM);

m_btn4.SetIcon(IDI_ICON_TEST);
// 设置Icon与Text的对齐方式为：Icon在底Text在顶
m_btn4.SetAlign(CIconBtn::IBTN_ICON_BOTTOM_TEXT_TOP);

    可以先查看之前的一篇博文：WM_DRAWITEM通告消息
    这篇文章比较详细的讲述了怎样绘制和标准PushButton一样的按钮。

CIconBtn类：

class CIconBtn : public CButton
{
	DECLARE_DYNAMIC(CIconBtn)

public:
	CIconBtn();
	virtual ~CIconBtn();
	virtual BOOL PreTranslateMessage(MSG* pMsg);
	virtual void PreSubclassWindow();
	virtual void DrawItem(LPDRAWITEMSTRUCT /*lpDrawItemStruct*/);

	enum	
	{	
		IBTN_ICON_LEFT_TEXT_RIGHT = 0,  // Left:Icon   Right:Text	
		IBTN_ICON_RIGHT_TEXT_LEFT,      // Right:Icon  Left:Text	
		IBTN_ICON_TOP_TEXT_BOTTOM,      // Top:Icon    Bottom:Text	
		IBTN_ICON_BOTTOM_TEXT_TOP       // Bottom:Icon Top:Text	
	};

protected:
	void DrawBackground();
	void DrawBorder();
	void Draw3DBorderForRect(CDC *pDC, CRect *pRect);
	void DrawFocusRect();
	void DrawIcon();
	void DrawText();
	void PrepareDrawIconAndText();

public:
	BOOL SetIcon(int nIcon, int nCxDesired = 0, int nCyDesired = 0);
	BOOL SetAlign(BYTE byAlign);

private:
	BYTE  m_byAlign;            // text与icon的对齐方式
	CDC*  m_pDC;                // dc handle pointer
	CRect m_rcBtn;              // 按钮rect
	bool  m_bIsFocused;         // 按钮是否获得焦点
	bool  m_bIsPressed;         // 按钮是否被按下
	bool  m_bIsDisabled;        // 按钮是否Disable

	HICON m_hIcon;              // Icon handle
	int   m_nIconWidth;         // Icon width
	int   m_nIconHeight;        // Icon height

	int   m_nFocusRectOffset;	// 焦点矩形的偏移量
	int   m_nCxIconStart;       // Draw icon的起始点x坐标
	int   m_nCyIconStart;       // Draw icon的起始点y坐标
	RECT  m_rcText;             // Draw text的矩形区域

protected:
	DECLARE_MESSAGE_MAP()
};

一. override PreTranslateMessage
将鼠标双击消息解释为两次鼠标单击消息。

BOOL CIconBtn::PreTranslateMessage(MSG* pMsg)
{
	// TODO: Add your specialized code here and/or call the base class
	if (pMsg->message == WM_LBUTTONDBLCLK)
		pMsg->message = WM_LBUTTONDOWN;

	return CButton::PreTranslateMessage(pMsg);
}

二. override PreSubclassWindow
将控件更改为Owner-Draw风格。

void CIconBtn::PreSubclassWindow()
{
	// TODO: Add your specialized code here and/or call the base class
	ModifyStyle(BS_TYPEMASK, BS_OWNERDRAW, SWP_FRAMECHANGED);

	CButton::PreSubclassWindow();
}

三. override DrawItem

void CIconBtn::DrawItem(LPDRAWITEMSTRUCT lpDrawItemStruct)
{
	// 获取DC及按钮大小
	m_pDC = CDC::FromHandle(lpDrawItemStruct->hDC);
	m_pDC->SetBkMode(TRANSPARENT);
	m_rcBtn = lpDrawItemStruct->rcItem;

	// 监测按钮状态
	m_bIsFocused  = lpDrawItemStruct->itemState & ODS_FOCUS;
	m_bIsPressed  = lpDrawItemStruct->itemState & ODS_SELECTED;
	m_bIsDisabled = lpDrawItemStruct->itemState & ODS_DISABLED;

	// Draw background
	this->DrawBackground();

	// Draw border
	this->DrawBorder();

	// Draw focus rect
	this->DrawFocusRect();

	// 计算Draw icon的位置及Draw text的矩形
	this->PrepareDrawIconAndText();

	// Draw icon
	if (m_hIcon)
		this->DrawIcon();

	// Draw text
	CString strText;
	GetWindowText(strText);
	if (!strText.IsEmpty())
		this->DrawText();
}

//
// Draw background
//
void CIconBtn::DrawBackground()
{
	CBrush brushBk(::GetSysColor(COLOR_BTNFACE));
	if (m_bIsFocused)
	{
		m_rcBtn.DeflateRect(1, 1);
		m_pDC->FillRect(&m_rcBtn, &brushBk);
		m_rcBtn.DeflateRect(-1, -1);

		CBrush brushFrame(RGB(0, 0, 0));
		m_pDC->FrameRect(&m_rcBtn, &brushFrame);
	}
	else
	{
		m_pDC->FillRect(&m_rcBtn, &brushBk);
	}
}

//
// Draw border
//
void CIconBtn::DrawBorder()
{
	if (m_bIsPressed)
	{
		m_rcBtn.DeflateRect(1, 1);
		CBrush brBtnShadow(::GetSysColor(COLOR_BTNSHADOW));
		m_pDC->FrameRect(&m_rcBtn, &brBtnShadow);
		m_rcBtn.DeflateRect(-1, -1);
	}
	else if (m_bIsFocused)
	{
		m_rcBtn.DeflateRect(1, 1);
		this->Draw3DBorderForRect(m_pDC, &m_rcBtn);
		m_rcBtn.DeflateRect(-1, -1);
	}
	else
	{
		this->Draw3DBorderForRect(m_pDC, &m_rcBtn);
	}
}

//
// 为pRect绘制3D边框
//
void CIconBtn::Draw3DBorderForRect(CDC *pDC, CRect *pRect)
{
	CPen penBtnHiLight(PS_SOLID, 0, GetSysColor(COLOR_BTNHILIGHT)); // White
	CPen pen3DLight(PS_SOLID, 0, GetSysColor(COLOR_3DLIGHT));       // Light gray
	CPen penBtnShadow(PS_SOLID, 0, GetSysColor(COLOR_BTNSHADOW));   // Dark gray
	CPen pen3DDKShadow(PS_SOLID, 0, GetSysColor(COLOR_3DDKSHADOW)); // Black
	// Draw top-left borders
	// White line
	CPen* pOldPen = pDC->SelectObject(&penBtnHiLight);
	pDC->MoveTo(pRect->left, pRect->bottom-1);
	pDC->LineTo(pRect->left, pRect->top);
	pDC->LineTo(pRect->right, pRect->top);
	// Light gray line
	pDC->SelectObject(pen3DLight);
	pDC->MoveTo(pRect->left+1, pRect->bottom-1);
	pDC->LineTo(pRect->left+1, pRect->top+1);
	pDC->LineTo(pRect->right, pRect->top+1);
	// Draw bottom-right borders
	// Black line
	pDC->SelectObject(pen3DDKShadow);
	pDC->MoveTo(pRect->left, pRect->bottom-1);
	pDC->LineTo(pRect->right-1, pRect->bottom-1);
	pDC->LineTo(pRect->right-1, pRect->top-1);
	// Dark gray line
	pDC->SelectObject(penBtnShadow);
	pDC->MoveTo(pRect->left+1, pRect->bottom-2);
	pDC->LineTo(pRect->right-2, pRect->bottom-2);
	pDC->LineTo(pRect->right-2, pRect->top);
	//
	pDC->SelectObject(pOldPen);
}

//
// 绘制焦点矩形
//
void CIconBtn::DrawFocusRect()
{
	if (m_bIsFocused)
	{
		m_rcBtn.DeflateRect(m_nFocusRectOffset, m_nFocusRectOffset);
		m_pDC->DrawFocusRect(&m_rcBtn);
		m_rcBtn.DeflateRect(-m_nFocusRectOffset, -m_nFocusRectOffset);
	}
}

//
// 计算绘制icon与text的位置
//
void CIconBtn::PrepareDrawIconAndText()
{
	// 判断有无text与icon
	bool bIsHasText = false;
	bool bIsHasIcon  = false;
	CString cstrCaption;
	this->GetWindowText(cstrCaption);
	bIsHasText = !cstrCaption.IsEmpty();
	if (m_hIcon)
		bIsHasIcon = true;

	// 计算绘制icon与text的位置
	if (bIsHasText && bIsHasIcon)	//既有text又有icon
	{
		switch (m_byAlign)
		{
		case IBTN_ICON_LEFT_TEXT_RIGHT:
			{
				m_nCxIconStart = m_rcBtn.left + m_nFocusRectOffset;
				m_nCyIconStart = m_rcBtn.top + (m_rcBtn.Height() - m_nIconHeight) / 2;

				m_rcText.left = m_rcBtn.left + m_nFocusRectOffset + m_nIconWidth;
				m_rcText.top = m_rcBtn.top + m_nFocusRectOffset;
				m_rcText.right = m_rcBtn.right - m_nFocusRectOffset;
				m_rcText.bottom = m_rcBtn.bottom - m_nFocusRectOffset;
			}
			break;

		case IBTN_ICON_RIGHT_TEXT_LEFT:
			{
				m_nCxIconStart = m_rcBtn.right - m_nFocusRectOffset - m_nIconWidth;
				m_nCyIconStart = m_rcBtn.top + (m_rcBtn.Height() - m_nIconHeight) / 2;
				
				m_rcText.left = m_rcBtn.left + m_nFocusRectOffset;
				m_rcText.top = m_rcBtn.top + m_nFocusRectOffset;
				m_rcText.right = m_rcBtn.right - m_nFocusRectOffset - m_nIconWidth;
				m_rcText.bottom = m_rcBtn.bottom - m_nFocusRectOffset;
			}
			break;

		case IBTN_ICON_TOP_TEXT_BOTTOM:
			{
				m_nCxIconStart = m_rcBtn.left + (m_rcBtn.Width() - m_nIconWidth) / 2;
				m_nCyIconStart = m_rcBtn.top + m_nFocusRectOffset;
				
				m_rcText.left = m_rcBtn.left + m_nFocusRectOffset;
				m_rcText.top = m_rcBtn.top + m_nFocusRectOffset + m_nIconHeight;
				m_rcText.right = m_rcBtn.right - m_nFocusRectOffset;
				m_rcText.bottom = m_rcBtn.bottom - m_nFocusRectOffset;
			}
			break;

		case IBTN_ICON_BOTTOM_TEXT_TOP:
			{
				m_nCxIconStart = m_rcBtn.left + (m_rcBtn.Width() - m_nIconWidth) / 2;
				m_nCyIconStart = m_rcBtn.bottom - m_nFocusRectOffset - m_nIconHeight;

				m_rcText.left = m_rcBtn.left + m_nFocusRectOffset;
				m_rcText.top = m_rcBtn.top + m_nFocusRectOffset;
				m_rcText.right = m_rcBtn.right - m_nFocusRectOffset;
				m_rcText.bottom = m_rcBtn.bottom - m_nFocusRectOffset - m_nIconHeight;
			}
			break;

		default:
			break;
		}

	}
	else if (!bIsHasText && bIsHasIcon)	//没有text只有icon
	{
		m_nCxIconStart = m_rcBtn.left + (m_rcBtn.Width() - m_nIconWidth) / 2;
		m_nCyIconStart = m_rcBtn.top + (m_rcBtn.Height() - m_nIconHeight) / 2;

		m_rcText.left = 0;
		m_rcText.top = 0;
		m_rcText.right = 0;
		m_rcText.bottom = 0;
	}
	else if (bIsHasText && !bIsHasIcon)  //只有text没有icon
	{
		m_nCxIconStart = 0;
		m_nCyIconStart = 0;

		m_rcText.left = m_rcBtn.left;
		m_rcText.top = m_rcBtn.top;
		m_rcText.right = m_rcBtn.right;
		m_rcText.bottom = m_rcBtn.bottom;
	}
	else
	{
		m_nCxIconStart = 0;
		m_nCyIconStart = 0;

		m_rcText.left = 0;
		m_rcText.top = 0;
		m_rcText.right = 0;
		m_rcText.bottom = 0;
	}
}

//
// 绘制ICON
//
void CIconBtn::DrawIcon()
{
	// 判断有无icon
	if (!m_hIcon)
		return;

	// 如果Disabled则灰掉
	// 如果Pressed则icon向右及向下各移1格
	UINT flag = DST_ICON | (m_bIsDisabled ? DSS_DISABLED : DSS_NORMAL);
	int nCxIconStart = m_bIsPressed ? m_nCxIconStart + 1 : m_nCxIconStart;
	int nCyIconStart = m_bIsPressed ? m_nCyIconStart + 1 : m_nCyIconStart;

	// Draw icon
	::DrawState(m_pDC->m_hDC, NULL, NULL, (LPARAM)m_hIcon, NULL,
		nCxIconStart, nCyIconStart, m_nIconWidth, m_nIconHeight, flag);
}

//
// 绘制Text
//
void CIconBtn::DrawText()
{
	// 判断有无text
	CString strText;
	GetWindowText(strText);
	if (strText.IsEmpty())
		return;

	// 如果按下则text向右及向下各移动一格
	if (m_bIsPressed)
	{
		m_rcText.left += 2;
	}
	else
	{
		m_rcText.bottom -= 2; // 使text真正垂直居中
	}

	// Draw text
	if (m_bIsDisabled)	//draw text并灰掉text
	{
		CRect rcText(&m_rcText);
		rcText.OffsetRect(1, 1);
		m_pDC->SetTextColor(::GetSysColor(COLOR_3DHILIGHT));
		m_pDC->DrawText(strText, &rcText, DT_SINGLELINE | DT_VCENTER | DT_CENTER);
		rcText.OffsetRect(-1, -1);
		m_pDC->SetTextColor(::GetSysColor(COLOR_3DSHADOW));
		m_pDC->DrawText(strText, &rcText, DT_SINGLELINE | DT_VCENTER | DT_CENTER);
	}
	else  // draw text
	{
		m_pDC->DrawText(strText, &m_rcText, DT_SINGLELINE | DT_VCENTER | DT_CENTER);
	}
}

四. 开放接口

//
// 设定Icon
//
BOOL CIconBtn::SetIcon(int nIcon, int nCxDesired, int nCyDesired)
{
	HICON hIcon = (HICON)::LoadImage(::GetModuleHandle(NULL), MAKEINTRESOURCE(nIcon), 
		IMAGE_ICON, nCxDesired, nCyDesired, 0);
	if (hIcon)
	{
		// 先释放先前的ICON
		::DestroyIcon(m_hIcon);
		//
		m_hIcon = hIcon;

		// Get icon size
		ICONINFO ici;  
		::GetIconInfo(m_hIcon, &ici);  
		BITMAP bm;  
		::GetObject(ici.hbmColor, sizeof(BITMAP), &bm);  
		m_nIconWidth = bm.bmWidth;  
		m_nIconHeight = bm.bmHeight; 

		::DeleteObject(ici.hbmColor);  
		::DeleteObject(ici.hbmMask);  

		return TRUE;
	}
	else
		return FALSE;
}

//
// 设定Icon与Text的对齐方式
//
BOOL CIconBtn::SetAlign(BYTE byAlign)
{
	switch (byAlign)
	{
	case IBTN_ICON_LEFT_TEXT_RIGHT:
	case IBTN_ICON_RIGHT_TEXT_LEFT:
	case IBTN_ICON_TOP_TEXT_BOTTOM:
	case IBTN_ICON_BOTTOM_TEXT_TOP:
		m_byAlign = byAlign;
	default:
		return FALSE;
	}

	return TRUE;
}
HisinWang
关注
专栏目录
Button按钮控件自绘操作
小米的修行之路
09-26 1057
1、首先为工程CButton类的派生类CMyButton,在CMyButton的头文件中添加一个用于保存图标的成员变量和一个设置函数：用来为按钮加载我们导入的图标。 public: HICON m_hIcon; void SetIcon(UINT nIcon) { m_hIcon = AfxGetApp()->LoadIcon(nIcon); } //...... 2、在CMy
css带图标样式按钮
07-16
css带图标样式按钮
Flutter组件之图标（Icon）和图标按钮（IconButton）
斌
06-22 1万+
图标组件（Icon）为展示图标的组件，该组件不可交互，要实现交互的图标，可以考虑使用IconButton组件。图标组件相关的组件有一下几个： IconButton：可交互的Icon。 Icons：框架自带Icon集合。 IconTheme：Icon主题。 ImageIcon：通过AssetImages或者其他图片显示Icon。 图标组件常用属性如下: 属性名 ...
QT小知识：为按钮QButton的文本添加图标Icon
最新发布
weixin_61501031的博客
09-09 593
Tips：QPushButton能且一般仅能实现左右结构的——“图标文本按钮”Tips：QToolButton能实现上下甚至更多结构的——“图标文本按钮”然后我们发现了漂亮的图标库（Icon）——阿里巴巴矢量图库，然后...2.左图标右文本按钮Button（QPushButton）3.上图标下文本按钮Button（QToolButton）1.）添加QPushButton，写上文本"文件管理"。1.）添加QToolButton，写上文本"文件管理"。2.）按如下步骤添加和设置图标属性。
带图标的button
zhleiyang的专栏
12-21 1431
在很多地方会用到button上带图标和文字。如 写这个控件只要在button内容里添加格式就行了，不知道是不是有更好办法。 代码如下
如何使button中绘制图标
zw0558的专栏
07-01 1852
1.首先我们需要建立一个新的类是从CButton中派生的，命名为MyButton         2.我们在类中添加如下成员： CImageList* m_pImagelist;//图像列表指针 int m_ImageIndex;//图像索引 BOOL IsPressed;//按钮是都被按下3.在类中添加方法：void CMyButton::SetImageList(CImageL
【Material-UI】Icon Button 组件详解
lph159的博客
08-05 1087
除了主题颜色，开发者还可以使用自定义颜色。通过sx属性或自定义样式，可以定义特定颜色的 Icon Button。Material-UI 的 Icon Button 组件提供了多种功能和定制选项，适用于不同的应用场景。通过合理使用 Icon Button，开发者可以创建更简洁、美观且功能强大的用户界面。在设计 Icon Button 时，务必考虑到无障碍性、交互反馈以及整体视觉一致性。希望通过本文的介绍，您能够更好地理解和应用 Icon Button 组件，为用户打造更加优秀的界面体验。
button-with-font-icon：此存储库包含示例项目，以演示如何使用图标字体在WinForms（Windows Forms）桌面应用程序中通过按钮控件渲染图标
02-04
此存储库包含示例项目，以演示如何使用图标字体在WinForms（Windows Forms）桌面应用程序中通过按钮控件渲染图标 如何运行项目 将此项目检出到磁盘中的某个位置。 使用Visual Studio打开解决方案文件。 生成并运行...
带Icon的自绘PushButton
11-14
本话题主要探讨如何在MFC（Microsoft Foundation Classes）框架下创建一个带有Icon的自绘Push Button，这将涉及到C++编程、MFC库以及图形界面设计。 MFC是微软提供的一个C++类库，它为开发Windows应用程序提供了...
可制作带icon、边框的按钮
05-01
这些工具允许开发者通过拖放操作添加按钮控件，并在其属性设置中指定图标和边框样式。图标可以通过资源管理器导入，设置为按钮的前景或背景；边框则可以通过修改边框宽度、颜色等属性来实现。 2. **编程方式实现**...
MFC中修改Button控件字体、字体大小、背景色、背景图片
09-02
在MFC中，`CButton`类是标准按钮控件的封装，提供了基础的按钮功能。派生`CButton`可以让我们访问并控制更多的属性和行为。 ```cpp class MyButton : public CButton { DECLARE_DYNAMIC(MyButton) public: ...
用CSS制作带图标的按钮
11-16
在http://www.cnblogs.com/strick/p/4101071.html有说明介绍
四种风格自绘按钮，包括渐变色、位图按钮，可指定颜色、字体及图标
03-10
四种风格自绘按钮，包括渐变色、位图按钮，可指定背景及文字颜色、字体及图标。 字体可设置加粗、斜体、下划线。图标可与文字同时显示。 位图按钮有去背景功能，因此实际上可做出任意形状按钮。各种状态的按钮图及黑白遮盖图均集中于一张图片中，软件res目录下提供参考样图。
自绘button修改
12-19
自绘button在debug模式下报错 修改后程序正常
自定义按钮控件-图标按钮
Greless的后花园
04-05 2278
1."IconBtn.h" class CIconBtn : public CButton { public: CIconBtn(); CImageList* m_pImageList; //图像列表指针 int m_ImageIndex; //图标索引 BOOL IsPressed; //按钮是否被按下 public: virtual void DrawI
el-button 全局添加自定义icon图标
weixin_59703592的博客
05-07 1636
我们想要一个导出图标，发现element ui 里面的 icon 图标没有适合我们的，我们是不是想着直接去在按钮上插入一张图片就行了！！！这种方法只能解决燃眉之急，每次都得插入一张图片和样式代码，久而久之代码就有点累赘了。我们可以进行这个图标，在按钮上配置就可以了！！！
【Element-ui】Icon 图标与Button 按钮
热门推荐
m0_62599305的博客
12-02 2万+
在前端开发中，界面的设计和交互是至关重要的一部分。一个直观、易用的界面往往离不开各种组件的运用。本文将聚焦于Element-ui中的两个常用组件——Icon图标和Button按钮，分别介绍它们的基本用法和一些实用技巧。Icon图标为界面添加了更多的元素，而Button按钮则是用户与页面进行交互的重要媒介，通过深入理解它们，我们可以更好地打造出美观、实用的前端界面。在本文中，我们深入了解了Element-ui中的Icon图标和Button按钮的基本用法和实用技巧。
Node-Red 给Buttont设置Icon图标
weixin_43471769的博客
06-13 843
此处有其给出的3个示例的Icon库。我们以Font Awesome icon库为例。点击Font Awesome icon即可跳转到Font Awesome icon库。在Font Awesome icon 库中找到想要的图标，并点击。此处我选择line-chart。1、点击button按钮在，右侧点击信息按钮，会显示出关于button的一些信息。将得到的图标名字写入到Button中icon位置，如图所示。找到图中所示位置“fa-line-chart”即为这个图标的名字。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值