Click here to Skip to main content
Click here to Skip to main content

A Simple Bitmap Button Implementation

, 2 Jul 2003
Rate this:
Please Sign up or sign in to vote.
A small class that provides a pure bitmapped button capability for WinForms.
<!-- Article image -->

Sample Image - screenshot.jpg

<!-- Add the rest of your HTML here -->

Introduction

It appears after some minor searching that nobody has written a BitmapButton for The Code Project (or anywhere else).  WiB's excellent XP style button control solves the problem of XP style buttons with icons.  But what if you want to control the entire appearance of the button using a bitmap, regardless of OS, manifest, theme, etc.?  This control does provides that ability.  Mind you that this class is pretty bare bones--I haven't made any effort to make is usable with a form designer.  If anyone wants to update the code with this capability, I'll be more than happy to add them as a co-author.

Using The BitmapButton

Specifying Button State Images

 The BitmapButton class uses a single bitmap comprised of one or more images, where each image represents the button in one of five states.  The images must be placed contiguously from left to right.  For example:

represents the bitmap of a button with five states:

  1. up
  2. down
  3. focused
  4. mouse-over
  5. disabled

Initializing The BitmapButton

The button is initialized in the usual manner with the additional line of code to specify the bitmap file:

bitmapButton=new BitmapButton();
bitmapButton.Location=new Point(232, 32);
bitmapButton.Size=new Size(32, 32);
bitmapButton.TabIndex=0;
bitmapButton.Text="&Down";
bitmapButton.Image=new Bitmap("downArrow.bmp");

Three important notes:

  1. The Text field is used exclusively to specify the keyboard shortcut for the button;
  2. The button width should be the same as the width of a single state image in the bitmap (all images should be the same width and height);
  3. The button height should be the same as the bitmap height.

That's it.  (If you forget the image, the program will generate an exception).

Behind The Scenes

Button State

Button state is a complicated thing when considering the dual user interface of keyboard and mouse.  For example, the user may have the mouse over the button but be using the tab key to navigate between the controls.  A complete state diagram appears as follows:

This diagram represents the state transitions that must be considered when using the mouse and the keyboard together.  It's fairly complicated!

Button State Using The Keyboard

If the keyboard is being used, the state diagram is much simpler (the Disabled state has been removed for clarity only):

Button State Using The Mouse

If the mouse is being used, the state diagram has some missing state transitions (again, the Disabled state has been removed for clarity only):

Event Handlers

To manage all the events that can occur and properly transition between different states, several event handlers must be defined:

Paint+=new PaintEventHandler(BitmapButton_Paint);
MouseDown+=new MouseEventHandler(BitmapButton_MouseDown);
MouseUp+=new MouseEventHandler(BitmapButton_MouseUp);
GotFocus+=new EventHandler(BitmapButton_GotFocus);
LostFocus+=new EventHandler(BitmapButton_LostFocus);
MouseEnter+=new EventHandler(BitmapButton_MouseEnter);
MouseLeave+=new EventHandler(BitmapButton_MouseLeave);
KeyDown+=new KeyEventHandler(BitmapButton_KeyDown);
KeyUp+=new KeyEventHandler(BitmapButton_KeyUp);
EnabledChanged+=new EventHandler(BitmapButton_EnabledChanged);
Paint Responsible for painting the button in all its different states.
MouseDown Transitions into the "Clicked" state.
MouseUp Transitions into the "Has Focus" state.
GotFocus Transitions into the "Has Focus" state (got focus through keyboard, for example)
LostFocus Transitions into the "Button Up" or "Mouse Over" state.
MouseEnter If in the "Button Up" state, transitions to the "Mouse Over" state.
MouseLeave If in the "Mouse Over" state, transitions to the "Button Up" state.
KeyDown Transitions to the "Clicked" state when the user presses the spacebar while the button has focus.
KeyUp Transitions to the "Has Focus" state when the user releases the spacebar while the button has focus.
EnabledChanged  Transitions to the "Disabled" state or back to the "Button Up" state when the Enabled state of the button is changed.

Drawing The Image

While double buffering is not required, since the entire state image is drawn on the surface of the button, it is implemented in case the control is enhanced to include additional drawing effects.  Double buffering is specified with the SetStyle method, which is a protected member, because someone decided that, since the control will have its own Paint handler, it should not be settable without sub-classing the control.  Never mind that the Paint event handler could be implemented in a completely separate class!

SetStyle(ControlStyles.UserPaint |
              ControlStyles.AllPaintingInWmPaint |
              ControlStyles.DoubleBuffer, true);
The button image is displayed in the Paint event handler. Given the state, it determines the index of the requested image. The bitmap does not need to include all the image states, as long as the image states provided are contiguous (meaning, you can't have button up, button down, and disabled image states, leaving focused and mouse-over empty--if you want an image for the disabled state, then you have to provide images for all the other states as well).
private void BitmapButton_Paint(object sender, PaintEventArgs e)
{
    Graphics gr=e.Graphics;
    int indexWidth=Size.Width*(int)imgState;

    if (Image.Width > indexWidth)
    {
        gr.DrawImage(Image, 0, 0,
                     new Rectangle(new Point(indexWidth, 0), Size),
                     GraphicsUnit.Pixel);
    }
    else
    {
        gr.DrawImage(Image, 0, 0,
                     new Rectangle(new Point(0, 0),
                     new Size(Size.Width, Size.Height)),
                     GraphicsUnit.Pixel);
    }
}

Conclusion

Wow, that's probably one of the shortest articles I've written in recent times! Bitmap buttons can have a lot more complexity to them than I have implemented here.  For example, what if your images don't have borders, and you'd like the control to generate a 3D style border by itself?  There's also considerations for different button state sizes and transparency, for example.  Hopefully, this article will give the reader the basis for customizing the bitmap control to his/her needs.

 

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

Marc Clifton

United States United States
Marc is the creator of two open source projets, MyXaml, a declarative (XML) instantiation engine and the Advanced Unit Testing framework, and Interacx, a commercial n-tier RAD application suite.  Visit his website, www.marcclifton.com, where you will find many of his articles and his blog.
 
Marc lives in Philmont, NY.

Comments and Discussions

 
GeneralImage problem on some screen resolutions PinsussJohn Newton29-Jul-05 9:28 
GeneralRe: Image problem on some screen resolutions PinmemberRitcho1-Jan-06 20:24 
GeneralRe: Image problem on some screen resolutions Pinmemberrambutan8-Nov-07 13:56 
GeneralHot area addition PinmemberLasse Johansen9-Sep-04 6:13 
QuestionCopyright ? Pinmemberblero200028-Apr-04 1:34 
AnswerRe: Copyright ? PineditorMarc Clifton28-Apr-04 11:45 
Generalc# &amp; pop_up menue Pinmemberamjadqaqa15-Dec-03 23:39 
Generalfocus rectangle Pinsusschris1830-Oct-03 16:06 
GeneralRe: focus rectangle PineditorMarc Clifton30-Oct-03 16:39 
GeneralRe: focus rectangle Pinsusschris1831-Oct-03 3:15 
GeneralRe: focus rectangle Pinmember_eulogy_10-Apr-05 12:37 
GeneralQuestion... PinmemberSmile Seo3-Jul-03 18:49 
GeneralRe: Question... PineditorMarc Clifton4-Jul-03 1:11 
GeneralRe: Question... PinmemberKant4-Jul-03 3:29 
GeneralRe: Question... PineditorMarc Clifton4-Jul-03 7:35 
GeneralOoo nice pictures Pinmemberleppie3-Jul-03 11:29 
GeneralRe: Ooo nice pictures PineditorMarc Clifton3-Jul-03 11:54 
GeneralSimple and Cool PinmemberKant3-Jul-03 9:28 
GeneralRe: Simple and Cool PineditorMarc Clifton3-Jul-03 9:48 
GeneralRe: Simple and Cool PinmemberDaniel Turini28-Apr-04 2:08 

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

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

| Advertise | Privacy | Mobile
Web01 | 2.8.140821.2 | Last Updated 3 Jul 2003
Article Copyright 2003 by Marc Clifton
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid