Create a Simple Image Button'�CGlyphButton

Environment: WinXP, VC++ 6.0

For too long, I've wanted a simple button that displayed an image. The image needs to be iconic in nature; its visual representation should reflect its functionality.

I want the button to work correctly and appear correctly at all times. There are, of course, plenty of types of image buttons available on this Web site and I've written a few of my own. However, all of them have issues that I don't want to deal with. Owner-Draw buttons are a pain to make look good in every situation. Native buttons with the BS_BITMAP style need unreasonable care in selection of the bitmap. CBitmapButtons are clumsy to use and require a level of artwork that is beyond me. Those custom buttons that do always look and work right tend to have complicated code and lead to code bloat.

I finally started using native buttons and finding a single carefully chosen character from the installed fonts on my system. I then had to create a font and assign it to the button. All the font manipulation made my code look ugly and was not keeping with the principals of OOP, so I finally got around to creating a reusable class that encapsulated all the font manipulation.

Because the original motivation for the CGlyphButton was to have graphical Edit and Delete buttons, those two are predefined and created with a single function call. The CGlyphButton interface allows you to set the font's facename, size, weight, charset, and the single character it is to display. (While any font facename may be specified, if that font is not installed on the user's system, the desired result will not be achieved. I use only fonts that come with Windows: Arial, Wingdings, and so forth).

Declare a variable of type CGlyphButon and then in OnInitDialog set it up by using one or more of the following functions.

void SetGlyph(int cGlyph);         // Specify the single char to
                                   // display
void SetFont(LOGFONT* plf);        // Use the specified LOGFONT
                                   // on the button.
void SetFont(CFont* pFont);        // Use the specified CFont.
void SetHeight(LONG lHeight);      // Specify the height of the
                                   // displayed char.
void SetWeight(LONG lWeight);      // Specify the weight - use
                                   // the FW_* constants
void SetCharSet(BYTE bCharSet);    // DEFAULT_CHARSET is the default

void SetFaceName(CString strFaceName);    // Specify the facename.
                                          // If DEFAULT_CHARSET
                                          // not used, be sure to
                                          // specify the CHARSET
                                          // via SetCharSet()

void SetGlyphEx(LOGFONT* plf, int cGlyph);
void SetGlyphEx(CFont* pFont, int cGlyph);
void SetGlyphEx(LONG lHeight, LONG lWeight, CString strFaceName,
                int cGlyph);

void SetButtonType(int nType);    // Set nType to one of the class
                                  // defined constants
                                  // CGlyphButton::BTN_DELETE or
                                  // CGlyphButton::BTN_EDIT
                                  // One call sets button to
                                  // predefined type.

Source Code Notes

  • cGlyph used above is of type int because some fonts use multi-byte character sets.
  • I use Character Mapper to look for an appropriate char to use as my glyph.
  • I've added CGlyphButton to my Component Gallery. Any time I need to use it, I simply insert that component into my project and I can use ClassWizard to add a CGlyphButton variable.

Demo Project Note

Note the use of a generic manifest file with a resource type of "24" (in quotations) and a resource ID of 1 (IDR_MANIFEST=1). Its presence lets WinXP draw all of the controls in the WinXP style instead of the older visual style.

Example Usage in a Dialog

// MyDlg.h : header file
//
#include "GlyphButton.h"

class CMyDlg : public CDialog
{
public:
  .
  .
  .
  // Dialog Data
  //{{AFX_DATA(CMyDlg)
  enum { IDD = IDD_MY_DIALOG };
  CGlyphButton m_btnOther;
  CGlyphButton m_btnEdit;
  CGlyphButton m_btnDelete;
  .
  .
  .
};

// MyDlg.cpp : implementation file
//
BOOL CMyDlg::OnInitDialog()
{
  CDialog::OnInitDialog();

  m_btnDelete.SetButtonType(CGlyphButton::BTN_DELETE);
    // Creates a predefined DELETE button
  m_btnEdit.SetButtonType(CGlyphButton::BTN_EDIT);
    // Creates a predefined EDIT button
  m_btnOther.SetGlyphEx(-20, FW_BOLD, "Arial", 169);

  return TRUE;
}

Downloads

Download demo project - 18 Kb
Download source - 2 Kb


Comments

  • Change Font Color?

    Posted by Legacy on 12/12/2003 12:00am

    Originally posted by: Bobo

    Very cool!

    Is there a way to change the font color? For example, make
    the check green and the x red.

    Reply
Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • On-demand Event Event Date: September 10, 2014 Modern mobile applications connect systems-of-engagement (mobile apps) with systems-of-record (traditional IT) to deliver new and innovative business value. But the lifecycle for development of mobile apps is also new and different. Emerging trends in mobile development call for faster delivery of incremental features, coupled with feedback from the users of the app "in the wild." This loop of continuous delivery and continuous feedback is how the best mobile …

  • Java developers know that testing code changes can be a huge pain, and waiting for an application to redeploy after a code fix can take an eternity. Wouldn't it be great if you could see your code changes immediately, fine-tune, debug, explore and deploy code without waiting for ages? In this white paper, find out how that's possible with a Java plugin that drastically changes the way you develop, test and run Java applications. Discover the advantages of this plugin, and the changes you can expect to see …

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds