文档库
文档库 最新最全的文档下载
当前位置：文档库 › MFC自绘按钮的实现

MFC自绘按钮的实现

MFC自绘按钮的实现
MFC自绘按钮的实现

如果你希望能够在自己的程序中表现出新意，那么你一定不会仅仅满足于MFC提供那些标准控件。这时，我们就必须自己另外多做些工作了。就改变控件外观这一点来说，主要是利用控件的自绘功能（Owner Draw）实现的。本篇将和各位一起定义一个XP风格的CXPButton 按钮类，目的不在于介绍CXPButton类的使用技巧，而在于向各位阐述实现自绘按钮的方法。当然如果你觉得CXPButton有用的话，也可以把它的源文件保存下来，直接加入到自己的项目中。

本篇要点：

一、准备工作

二、实现原理及难点

三、按钮类的使用

四、小结与提示

五、附录

一、准备工作

在开始编码之前，首先应该确定好，更准确的说应该是设计好按钮在各种状态下的外观。按钮控件的几中基本状态包括：

Normal状态，就是按钮一开始显示时的样子。

Over状态，鼠标指针移动到按钮上面时按钮显示的样子。

Down状态，按下按钮时显示的样子。

Focus状态，按钮按下后松开的样子，例如标准按钮按下松开之后会看到按钮内部有一个虚线框。

Disable状态，当然就是按钮被设置成无效的时候的样子啦。

我参考了一下WindowsXP中普通按钮的实际样子，设计出XP按钮各种状态的外观，如下图所示：

至于Down状态主要是在Over状态的基础上将文字往右下的方向稍微平移，以实现下压的效果。

二、实现原理及难点

下面我们开始类的创建，在Workspace的ClassV iew页中右击列表树的根结点，选择New Class…

在弹出窗口中进行派生类的定义，如下图所示，注意，你需要填写的只有Name和Base class 两项，其余的选项保持默认值就可以了。

按OK按钮退出之后，我们可以在ClassView里面看到新创建的类的名字。接下来我们可以为CXPButton类添加各种成员变量。因为自绘控件说穿了就是画图，所以在成员变量中可以看到各种与画图有关的数据类型，一般来说成员变量会在类的构造函数中初始化，在类的析构函数中销毁。详细代码请参见本篇附带的源程序。

下面简要叙述一下按钮的实现原理：

1. 在控件初始化时为按钮添加Owner Draw的属性。这是因为在MFC中，要想激活控件的自绘功能，要求该控件的属性中必须包含属性值BS_OWNERDRA W，这一步我们可以通过类向导为CXPButton类添加PreSubclassWindow()函数，在该函数中完成属性值的设置。当激活控件的自绘功能之后，每次控件状态改变的时候都会运行函数DrawItem()，该函数的作用就是绘制控件在各种状态下的外观。

2. 添加WM_MOUSELEA VE消息函数，当鼠标指针离开按钮时，触发该消息函数，我们在函数中添加代码，通知DrawItem函数鼠标指针已经离开了，让按钮重绘。

3. 添加WM_MOUSEHOVER消息函数，当鼠标指针位于按钮之上时，触发该消息函数，我们在函数重添加代码，通知DrawItem函数鼠标指针现在正在按钮的上面，让按钮重绘。

4. 添加DrawItem函数。在DrawItem中根据按钮当前的状态绘制按钮的外观。可以说自绘控件的大部分功能都是在这个函数中实现的。DrawItem函数包含了一个LPDRA WITEMSTRUCT的指针，本篇会在稍后予以讲解。

了解了基本的设计思路之后，剩下就看我们怎么去实现了。我本人觉得这里有两个难点，首先是WM_MOUSELEA VE和WM_MOUSEHOVER不是标准的Windows消息函数，它们不能通过类向导来添加，所有的添加工作都需要通过手工输入代码来完成。另一个难点是DrawItem中的LPDRA WITEMSTRUCT指针，它指向了一个DRA WITEMSTRUCT的结构，这个结构中包含了控件的各种细节，为我们提供了实现自绘功能的必要信息。

难点一：

事实上WM_MOUSELEA VE和WM_MOUSEHOVER两个Windows消息是通过WM_MOUSEMOVE消息触发的，而WM_MOUSEMOVE是标准的Windows消息，因此我们可以通过类向导来为CXPButton类添加WM_MOUSEMOVE消息函数。

函数的代码见如下，这段代码非常有用，在其它的自绘控件中，如果想触发WM_MOUSELEA VE和WM_MOUSEHOVER消息，也是使用类似的方法实现的。

void CXPButton::OnMouseMove(UINT nFlags, CPoint point) { // TODO: Add your message handler code here and/or call default if (!m_bTracking) { TRACKMOUSEEVENT tme; tme.cbSize = sizeof(tme); tme.hwndTrack = m_hWnd; tme.dwFlags = TME_LEA VE | TME_HOVER; tme.dwHoverTime = 1; m_bTracking = _TrackMouseEvent(&tme); } CButton::OnMouseMove(nFlags, point);}

我们接着添加WM_MOUSELEA VE和WM_MOUSEHOVER消息消息函数。在CXPButton 类的声明中（即在XPButton.h文件中）找到afx_msg void OnMouseMove(UINT nFlags, CPoint point);的函数声明，紧接其下输入

afx_msg LRESULT OnMouseLeave(WPARAM wParam, LPARAM lParam);afx_msg LRESULT OnMouseHover(WPARAM wParam, LPARAM lParam);

然后在XPButton.cpp文件中找到ON_WM_MOUSEMOVE()，紧接其后输入

ON_MESSAGE(WM_MOUSELEA VE, OnMouseLeave)ON_MESSAGE(WM_MOUSEHOVER, OnMouseHover)

当然最后还有函数的实现了，详细代码可见本篇提供的源程序，这里就不再重复了。

难点二：

下面我们看看DRA WITEMSTRUCE结构为我们提供了哪些有用信息呢？DRAWITEMSTRUCT结构的定义如下：

typedef struct tagDRA WITEMSTRUCT { UINT CtlType; //控件类型UINT CtlID; //控件ID UINT itemID; //菜单项、列表框或组合框中某一项的索引值UINT itemAction; //控件行为UINT itemState; //控件状态HWND hwndItem; //父窗口句柄或菜单句柄HDC hDC; //控件对应的绘图设备句柄RECT rcItem; //控件所占据的矩形区域DWORD itemData; //列表框或组合框中某一项的值} DRAWITEMSTRUCT, *PDRA WITEMSTRUCT, *LPDRA WITEMSTRUCT;

其实不仅是按钮控件，其它控件，如ComboBox、ListBox、StaticText等都是通过DRAWITEMSTRUCT来记录控件信息的。关于这个结构的详细文档可参考本篇的附录。

也许你早已看到许多自绘按钮的例子，实际上自绘按钮本身的函数结构都是差不多的，它们显示效果的区别主要取决于代码编写者对GDI作图函数的运用与掌握程度。有兴趣的朋友可以研究一下CXPButton类中DrawItem函数的数据结构，其实只要修改一下其中GDI绘图函数的部分代码，马上又能做出另一个自绘按钮控件了。

三、按钮类的使用

下面演示CXPButton类的使用。往对话框中添加一个按钮控件，假设它的ID值为IDC_BUTTON1。进入类向导（Class Wizard）的Member V ariables属性页，为IDC_BUTTON1添加一个变量m_btnNormal。确定退出后再进行编译，就可以看到重新定义过XP风格按钮了。

如果你是之间把CXPButton的源文件引入自己的工程中的，那么在上图的V ariable type中是看不到CXPButton选项的。但是可以通过以下方法加入：

1. 首先保存工程后退出。

2. 在工程的目录下找到一个后缀名为.clw的文件，将其删除。但是为了以防万一还是建议你实现备份一下。

3. 重新打开工程，进入类向导，此时会看到一下一个弹出对话框，我们选择“是（Y es）”。

4. 再选择“Add All”，这样我们就可以在类向导中使用CXPButton的变量类型了。

四、小结与提示

对于按钮来说，当按钮上面任何可见的部分发生变换的时候，都要调用DrawItem函数进行重绘。自绘制按钮必须设定BS_OWNERDRA W的属性，设置的代码在PreSubclassWindows 函数中完成。另外为了防止系统字体设置的变化影响控件的表达效果，还可以在该函数中为控件指定某种固定的字体。但是要注意的是这个

让我们来回顾一下实现自绘按钮的基本步骤：

a. 确定设计方案；

b. 初始化，但是记得要在函数退出前恢复先前的GDI对象，并释放所占领的资源；

c. 添加相应消息函数；

d. 添加绘图函数DrawItem，在DrawItem中作图的顺序一般是先画外边框，再上底色，接着写文字，最后是画内边框。不过有些人也喜欢把边框放到最后画，这问题不大。

五、附录

DRAWITEMSTRUCT结构文档（根据Msdn翻译）

DRAWITEMSTRUCT

DRAWITEMSTRUCT 为需要自绘的控件或者菜单项提供了必要的信息。在需要绘制的控件或者菜单项对应的WM_DRA WITEM消息函数中得到一个指向该结构的指针。DRAWITEMSTRUCT结构的定义如下：

typedef struct tagDRA WITEMSTRUCT {

UINT CtlType;

UINT CtlID;

UINT itemID;

UINT itemAction;

UINT itemState;

HWND hwndItem;

HDC hDC;

RECT rcItem;

ULONG_PTR itemData;

} DRA WITEMSTRUCT;

结构成员：

CtlType

指定了控件的类型，其取值如下表所示。

取值

描述

ODT_BUTTON

按钮控件

ODT_COMBOBOX

组合框控件

ODT_LISTBOX

列表框控件

ODT_LISTVIEW

列表视图控件

ODT_MENU

菜单项

ODT_STA TIC

静态文本控件

ODT_TAB

Tab控件

CtlID

指定了自绘控件的ID值，而对于菜单项则不需要使用该成员

itemID

表示菜单项ID，也可以表示列表框或者组合框中某项的索引值。对于一个空的列表框或组合框，该成员的值为–1。这时应用程序只绘制焦点矩形（该矩形的坐标由rcItem 成员给出）虽然此时控件中没有需要显示的项，但是绘制焦点矩形还是很有必要的，因为这样做能够提示用户该控件是否具有输入焦点。当然也可以设置itemAction 成员为合适值，使得无需绘制焦点。

itemAction

指定绘制行为，其取值可以为下表中所示值的一个或者多个的联合。

取值

描述

ODA_DRA WENTIRE

当整个控件都需要被绘制时，设置该值

ODA_FOCUS

如果控件需要在获得或失去焦点时被绘制，则设置该值。此时应该检查itemState成员，以确定控件是否具有输入焦点。

ODA_SELECT

如果控件需要在选中状态改变时被绘制，则设置该值。此时应该检查itemState 成员，以确定控件是否处于选中状态。

itemState

指定了当前绘制操作完成后，所绘项的可见状态。例如，如果菜单项应该被灰色显示，则可以指定ODS_GRAYED状态标志。其取值可以为下表中所示值的一个或者多个的联合。

取值

描述

ODS_CHECKED

如果菜单项将被选中，则可设置该值。该值只对菜单项有用。

ODS_COMBOBOXEDIT

在自绘组合框控件中只绘制选择区域。

ODS_DEFAULT

默认值。

ODS_DISABLED

如果控件将被禁止，则设置该值。

ODS_FOCUS

如果控件需要输入焦点，则设置该值。

ODS_GRAYED

如果控件需要被灰色显示，则设置该值。该值只在绘制菜单时使用。

ODS_HOTLIGHT

Windows 98/Me, Windows 2000/XP: 如果鼠标指针位于控件之上，则设置该值，这时控件会显示高亮颜色。

ODS_INACTIVE

Windows 98/Me, Windows 2000/XP: 表示没有激活的菜单项。

ODS_NOACCEL

Windows 2000/XP: 控件是否有快速键盘。

ODS_NOFOCUSRECT

Windows 2000/XP: 不绘制捕获焦点的效果。

ODS_SELECTED

选中的菜单项。

hwndItem

指定了组合框、列表框和按钮等自绘控件的窗口句柄；如果自绘的对象时菜单项，则表示包含该菜单项的菜单句柄。

hDC

指定了绘制操作所使用的设备环境。

rcItem

指定了将被绘制的矩形区域。这个矩形区域就是上面hDC的作用范围。系统会自动裁剪组合框、列表框或按钮等控件的自绘制区域以外的部分。也就是说rcItem中的坐标点（0，0）指的就是控件的左上角。但是系统不裁剪菜单项，所以在绘制菜单项的时候，必须先通过一定的换算得到该菜单项的位置，以保证绘制操作在我们希望的区域中进行。

itemData

对于菜单项，该成员的取值可以是由

CMenu::AppendMenu、

CMenu::InsertMenu或者

CMenu::ModifyMenu

等函数传递给菜单的值。

对于列表框或这组合框，该成员的值可以为由

ComboBox::AddString、

CComboBox::InsertString、

CListBox::AddString或者

CListBox::InsertString

等传递给控件的值。

如果ctlType 的取值是ODT_BUTTON或者ODT_STA TIC, itemData的取值为0。

Qt实现自定义按钮的三态效果

Qt实现自定义按钮的三态效果 好久之前做的一个小软件，好长时间没动过了，在不记录下有些细节可能都忘了，这里整理下部分功能的实现。按钮的三态，指的是普通态、鼠标的停留态、点击态，三态是界面交互非常基本的一项功能，Qt中如果使用的是原始的按钮，三态的效果是有的，鼠标放上去会变色，点击的时候有凹陷的效果，工具栏中的图标也具备三态效果，但是如果自定义的图标这个效果就没有了。下面整理下自定义按钮图标的方法，先看下我做的效果图：图中表示了鼠标放在按钮上和按下的效果，完成了基本的三态，下面说下我的具体实现过程。资源准备首先要准备好对应状态的按钮图标，按钮图标可以从网上搜集，图标需要找png格式的，ico格式的可以使用工具转换为png格式的，而且是背景透明的png格式，要想实现不同状态对应不同的效果还需要处理出其他状态，这就得靠PS来完成了，使用PS也非常简单，我这里使用PS的内阴影来实现按下的效果，用斜面和浮雕来实现鼠标停留效果。具体设置如下面两幅图所示：图：使用内阴影实现的按下效果图：使用斜面和浮雕实现的鼠标停留效果处理好后的图标如下图。加入工程将处理好的图标文件放入工程文件夹下，新建Qt-Qt资源文件。输入文件名保存并加入工程。依次添加前缀，添加文件将文件

加入工程，如下图所示。这些文件添加到工程后就可以在界面设计中使用，很多人在界面设计中改变按钮的样式会直接选择按钮图标，如下图所示。通过选择按钮的icon设置对应大小来实现，然而这样的一个效果就是按钮仍然是有背景和边框的，效果如下图所示。因此很多人的实现方法是通过继承QToolButton或者重绘按钮来实现，然而这些操作仍然相对麻烦，经过对比和查找，这里使用StyleSheet来实现。找到对应的按钮，先在界面编辑中编辑对应的样式表，这里添加border-image，对应普通情况下的按钮图标。然后在主程序中在按钮使用之前指定其他两种状态所对应的图标，代码非常直接，就是指定每种状态对应的文件，QPushButton：hover标示鼠标悬停所对应的状态，QPushButton：pressed则对应鼠标点击的状态，代码如下，注意包含的头文件。#include ui->play_button->setStyleSheet("QPushButton{border-ima ge: url(:/new/icons/icons/play-pause.png);}" "QPushButton:hover{border-image: url(:/new/icons/icons/play-pause-hover.png);}" "QPushButton:pressed{border-image: url(:/new/icons/icons/play-pause-pressed.png);}");

八键鼠标自定义办公按键操作步骤

以定义办公常用按键为例介绍自定义用法： 一、双击配置具图标，如图，打开配置工具页面如下图 二、下面可以开始我们的自定义之旅吧： 进入界面后，首先我们要读取设备参数，这时配置软件会自动读取鼠标的 参数点击确认， 我们现在以办公常用键来自定义这款鼠标的按键， 正常情况，我们的鼠标左，右键和滚轮（中键）不需要重新定义，我们就将“Back”键“Forward”键和“DPI 循环切换键”, 自定义为办公软件经常用到的是“Ctrl C”组合键“Ctrl V” 组合键和快捷方式“打开默认邮件主页”

我们先来将“Forward”键，定义为“Ctrl V”，在按键定义区域找到“Forward”键， 在右下角箭头下拉选项中选中“Ctrl V”键， 如下图：

选中后按左键确认，变成如图示 再来将“Back”键，定义为“Ctrl C”， 在按键自定义区域找到“Back”键，在右 在右下角箭头下拉选项选中“Ctrl C”键，如图： 选中后按左键确认， 变成如图示

现在我们将“DPI 循环切换键”键，定义为“打开默认邮件主页”， 在按键自定义区域找到 “DPI 循环切换键”键， 在右下角箭头下拉选项选中 “打开默认邮件主页”，如图： 选中后按左键确认，变成如图示 最后我们将“免双击键”键， 定义为“打开我的电脑”， 在按键自定义区域找到 “免双击键”键， 在右下角箭头下拉选项选中 “打开我的电脑”，如图 选中后按左键确认，变成如图示

现在四个按键设置完毕后，点击右上角 ，出现如下对话框， 出现如下对话框，点击“确定” 鼠标会自动重启，重启后按键功能定义完成。 现在我们来对比一下定义前，定义后的按键功能图：定义前功能键

Android自定义Button按钮

Android自定义Button按钮 Android自定义Button按钮主要可以分成两种形式: 1.通过自定MyButton类来继承Button,将所有效果在类中实现. 2.通过xml文件来改变Button的样式和颜色. 今天我就先讲通过xml文件,稍后封装自定义Button类再补上. TestcActivity [html] package com.example.blueapp;n import android.app.Activity;n import android.os.Bundle;n public class TestcActivity extends Activity {n nnn @Overriden nnn protected void onCreate(Bundle savedInstanceState) {n nnnnnnn // TODO Auto-generated method stubn nnnnnnn super.onCreate(savedInstanceState);n nnnnnnn setContentView(https://www.wendangku.net/doc/fb3201004.html,yout.testc);n nnn }n }n package com.example.blueapp; import android.app.Activity; import android.os.Bundle; public class TestcActivity extends Activity { n@Override nprotected void onCreate(Bundle savedInstanceState) { nn// TODO Auto-generated method stub nnsuper.onCreate(savedInstanceState); nnsetContentView(https://www.wendangku.net/doc/fb3201004.html,yout.testc); n} } testc.xml [html] n n nnnnn nnn n nnnnn nnn n n nnn nnn