像蝴蝶一样飘逸，像 ButtonFly 一样蛰伏

• 下载源代码 - 3.7 KB

引言

女演员德鲁·巴里摩尔曾说过：“每个人都像一只蝴蝶：它们一开始丑陋而笨拙，然后蜕变成美丽而优雅的蝴蝶，每个人都喜欢它们。” 同样地，没有理由让您的用户界面 (UI) 中的按钮不能兼具美观和实用性。
UI 和用于按钮的底层代码经常被忽视，并需要不必要的费用。为了解决这些问题，我创建了一种增强按钮的简单方法：ButtonFly - 第一个多合一的漂亮按钮类。 

背景

ButtonFly 是我们在 Secured Globe, Inc. 开发的一个独特的类。ButtonFly 可以为您节省大量的开销和编码时间，因为一个按钮可以处理四张图像

• 鼠标悬停
• 按压
• 未按下（正常）
• 禁用

到目前为止，处理不同的按钮状态需要更多的代码和费用。 使用 ButtonFly 类，您可以轻松地处理所有按钮。 下面的 gif 图像显示了单个按钮的四种不同状态，所有这些状态都是单个类的一部分。

ButtonFly 具有 DPI（每英寸点数）感知能力，因此程序员可以决定其大小。 无论监视器的分辨率如何，都将使用所选尺寸。

Using the Code

您需要采取几个步骤才能使用该代码。

1. 定义图像

为了定义显示的图像，使用以下函数

void SG_ButtonFly::SetImages(UINT nNormalId, UINT nHoverId, 
     UINT nPressId, UINT nDisableId, LPCTSTR lpszResourceType)
{
       ReleaseImages();
       LoadImageFromResource(m_images[Normal], nNormalId, lpszResourceType);
       LoadImageFromResource(m_images[Hover], nHoverId, lpszResourceType);
       LoadImageFromResource(m_images[Press], nPressId, lpszResourceType);
       nDisableId = nDisableId == 0 ? nNormalId : nDisableId;
       LoadImageFromResource(m_images[Disable], nDisableId, lpszResourceType);
       // AutoSize();
}

您可以通过向其发送四个资源 ID 来调用 SetImages。

2. 初始化

通常您需要调用两个函数才能将 SG_ButtonFly 添加到您的 MFC 对话框。 这些调用将在 OnInitDIalog() 函数内部进行，因此您可以使用 this 来指向当前作用域。

例如，如果您希望添加一个用于将数据导出为 .txt 的按钮

m_btnExportToTxt.SetImages(IDB_PNG_EXPORT, IDB_PNG_EXPORT2, 
                           IDB_PNG_EXPORT3, IDB_PNG_EXPORT4);

       m_btnExportToTxt.SetParent(this);

3. 定义

您需要在想要添加按钮的对话框的头文件中定义该按钮。

SG_ButtonFly m_btnExportToTxt;

（您需要包含“SG_ButtonFly.h”。）

添加到按钮的每个图像都在多个位置定义

在 resource.h 中，您定义资源 ID

IDB_PNG_EXPORT                               131

您对四个图像中的每一个都这样做。

在资源文件（.rc 文件）中，您添加

IDB_PNG_EXPORT          PNG                                   "res\\export.png"

这意味着您将名为“export.png”的 .png 图像放置在源代码路径中的 res 文件夹中。

您可以在 此处 阅读有关资源标识符的更多信息。

4. 四种状态

我们定义一个 enum 来支持我们按钮的四种可能状态

enum State
{
   Normal = 0,
   Hover,
   Press,
   Disable,
};

• Normal 是什么都不发生时按钮的样子。
• Hover 是我们用鼠标悬停在按钮上时发生的事情。
• Press 是我们单击按钮时发生的事情。
• Disable 是我们的按钮在禁用时的样子。

5. 向按钮添加标题

您可能还希望向按钮添加标题（文本）。 为此，您可以使用 SetCaptionText()。

m_btnExportToTxt.SetCaptionText(L”This is my caption”);

6. 使用较少的图像

如果您希望按钮只有一个图像，或者有两个图像，您只需在初始化时使用相同的图像即可。

例如，您可以仅对所有四种状态使用单个图像 IDB_PNG_EXPORT。

m_btnExportToTxt.SetImages(IDB_PNG_EXPORT, IDB_PNG_EXPORT, 
                           IDB_PNG_EXPORT, IDB_PNG_EXPORT);

最终结果也可能如下图 gif 图像所示

祝您编码愉快！

历史

• 2022 年 10 月 14 日：初始版本