Click here to Skip to main content
15,867,330 members
Articles / Desktop Programming / MFC

Float like a Butterfly, Sting like a ButtonFly

Rate me:
Please Sign up or sign in to vote.
4.95/5 (12 votes)
14 Oct 2022CPOL3 min read 6.7K   114   5   12
There's no reason the buttons used as part of your programs' UI shouldn't be beautiful and practical at the same time. Introducing: ButtonFly — an all-in-one C++ class to reduce your overhead and create beautiful buttons.
ButtonFly is a unique class for creating UI for buttons which can handle four different images per button: Mouse Over, Pressed, Un Pressed (normal) and Disabled. Until now, handling different button states required a lot more code and overhead. Using the ButtonFly class, you can effortlessly handle "everything-button".

Image 1

Introduction

It was the actress Drew Barrymore who said, "Everyone is like a butterfly: They start out ugly and awkward and then morph into beautiful, graceful butterflies that everyone loves." On the same notion, there's no reason the buttons used as part of your User Interface (UI) shouldn't be beautiful and practical at the same time.
UI and the underlying code used for buttons are often neglected and require unnecessary expense. To tackle these problems, I've created a straightforward way to enhance your buttons: ButtonFly - the first all-in-one beautiful button class. 

Background

ButtonFly is a unique class we developed here at Secured Globe, Inc. ButtonFly saves you a lot of overhead and coding time because one button can handle four images:

  • Mouse Over
  • Pressed
  • Un Pressed (normal)
  • Disabled

Until now, handling different button states required a lot more code and expense. Using the ButtonFly class, you have an easy-to-handle everything-button. The gif image below shows the four different states of a single button, all of which are part of a single class.

Image 2

ButtonFly has DPI (Dots-Per-Inch) awareness so that a programmer can decide its size. The chosen size will be used regardless of the monitor's resolution.

Using the Code

The are several steps you need to take in order to use the code.

1. Defining the Images

In order to define the images shown, the following function is used:

C++
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();
}

You call SetImages by sending to it four resource IDs.

2. Initializing

You would normally want to call two functions to add a SG_ButtonFly to your MFC dialog. These calls will take place inside the OnInitDIalog() function, so you can use this to point to the current scope.

For example, if you wish to add a button that will be used to export data as .txt:

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

       m_btnExportToTxt.SetParent(this);

3. Definition

You need to define the button in the header file of the dialog to which you wish to add the button.

C++
SG_ButtonFly m_btnExportToTxt;

(You need to include “SG_ButtonFly.h”.)

Each image added to the button is defined in several places:

In resource.h, you define the resource ID:

C++
IDB_PNG_EXPORT                               131

and you do that for each of the four images.

In the resource file (.rc file), you add:

C++
IDB_PNG_EXPORT          PNG                                   "res\\export.png"

That means that you place a .png image named “export.png” in the res folder in the source code path.

You can read more about Resource Identifiers here.

4. The Four States

We define an enum to support four possible states of our button:

C++
enum State
{
   Normal = 0,
   Hover,
   Press,
   Disable,
};
  • Normal is how the button will look like when nothing happens.
  • Hover is what happens when we hover the button with our mouse.
  • Press is what happens when we click the button.
  • Disable is how our button will look like when it's disabled.

5. Adding Captions to Buttons

You may also wish to add a caption (text) to the button. To do so, you use SetCaptionText().

C++
m_btnExportToTxt.SetCaptionText(L"This is my caption");

6. Using Less Images

In case you want the button to have a single image, or have two images, you just use the same ones when you initialize it.

For example, you can use just a single image, IDB_PNG_EXPORT for all four states.

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

The final result might also look like the gif image below:

Image 3

Happy coding!

History

  • 14th October, 2022: Initial version

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
CEO Secured Globe, Inc.
United States United States
Author, key speaker, entrepreneur, cyber security, cyber forensics expert and consultant, as well as a hands on C++ professional with 25+ years of experience in the industry. Founded Secured Globe, Inc. together with her husband, Michael Haephrati. A professional painter, illustrator and photographer always seeking for the next great shot…

Comments and Discussions

 
Questionincomplete Pin
merano9922-Oct-22 8:58
mvemerano9922-Oct-22 8:58 
AnswerRe: incomplete Pin
Ruth_Haephrati24-Oct-22 0:30
professionalRuth_Haephrati24-Oct-22 0:30 
AnswerRe: incomplete Pin
Ruth_Haephrati25-Oct-22 1:41
professionalRuth_Haephrati25-Oct-22 1:41 
GeneralRe: incomplete Pin
merano9925-Oct-22 12:02
mvemerano9925-Oct-22 12:02 
GeneralRe: incomplete Pin
Ruth_Haephrati27-Oct-22 9:33
professionalRuth_Haephrati27-Oct-22 9:33 
GeneralMy vote of 5 Pin
Randor 21-Oct-22 19:17
professional Randor 21-Oct-22 19:17 
GeneralRe: My vote of 5 Pin
Ruth_Haephrati27-Oct-22 9:26
professionalRuth_Haephrati27-Oct-22 9:26 
GeneralRe: My vote of 5 Pin
Randor 27-Oct-22 18:04
professional Randor 27-Oct-22 18:04 
GeneralRe: My vote of 5 Pin
Michael Haephrati28-Oct-22 9:56
professionalMichael Haephrati28-Oct-22 9:56 
Oh yes. We rented an apartment on 41st, close to Broadway. There was a Tarot Reader lady who placed her table at the entrance of the building, blocking the way, so her clients would be invited in, and the tenants at the building… well we had to ask her (politely) to squeeze a bit and let us pass through (“sorry. We are not clients. We live here”). That was 12 years ago and the moment we raised capital from investors, we moved as fast as we could…
- Michael Haephrati מיכאל האפרתי


modified 28-Oct-22 16:34pm.

GeneralRe: My vote of 5 Pin
Randor 28-Oct-22 10:57
professional Randor 28-Oct-22 10:57 
QuestionExcellent article ! Pin
_Flaviu16-Oct-22 21:44
_Flaviu16-Oct-22 21:44 
AnswerRe: Excellent article ! Pin
Ruth_Haephrati18-Oct-22 5:41
professionalRuth_Haephrati18-Oct-22 5:41 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.