Float like a Butterfly, Sting like a ButtonFly

• Download source code - 3.7 KB

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.

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:

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:

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.

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:

IDB_PNG_EXPORT                               131

and you do that for each of the four images.

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

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:

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().

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.

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:

Happy coding!

History

• 14^th October, 2022: Initial version