Click here to Skip to main content
15,885,990 members
Articles / Desktop Programming / MFC
Article

Images on XP-Style Buttons

Rate me:
Please Sign up or sign in to vote.
4.56/5 (36 votes)
27 Oct 20043 min read 397.5K   5.5K   190   72
A .NET Windows Forms Button using Visual Styles on Windows XP, that can display an image.

Introduction

One thing I love best about XP is the capability to have themed controls. You can even load new themes much like it's been possible with most window managers for the X Window System.

These themed controls can be used with .NET Windows Forms by supplying a manifest and – for some controls like Button – setting the FlatStyle property to FlatStyle.System.

Unfortunately, setting the FlatStyle property of a Button control to FlatStyle.System makes it impossible to display an image on the face of the button. Somehow, setting the Image property has no effect on these controls.

Background

A number of workarounds have been proposed, e.g., this one by MalteseFalcon. All approaches known to me use owner-drawn buttons to mimic the built in visual styles of XP but provide no ability to match third party visual styles.

The code snippet in this article makes it possible to have images on your XP-themed buttons while retaining the capability to adapt to custom visual styles.

The capability to draw controls using different visual styles was introduced by Microsoft with comctl32.dll, version 6, which has been shipping with the newest versions of Windows, i.e., Windows XP and Windows Server 2003. With this version, a number of new API calls have been introduced, among them is BCM_SETIMAGELIST which assigns an image list to a button control. The code in this article uses Platform Invocation Services (PInvoke) to use the BCM_SETIMAGELIST message.

The BCM_SETIMAGELIST message has another interesting property: if you supply more than one image in the image list, you can have the button display a different image for each of a number of states the button is in:

  • Normal
  • Hover
  • Pressed
  • Disabled
  • Focused

This behavior might be achieved using events as well, but using BCM_SETIMAGELIST, you get it without having to code the event handlers.

Using the code

The code wraps the System.Windows.Forms.Button class in a class called ImageButton. You can use this class just like a normal button except for the additional overloaded method SetImage. If you just want to display an image on the face of the button, you can use the method like this:

C#
Bitmap searchBitmap = new Bitmap("Search_16X16_32bpp.png");
ImageButton searchImageButton = new ImageButton();
searchImageButton.SetImage(searchBitmap);
...

If you want more control over the alignment, padding, or set images for different button states, use the overloaded methods:

C#
Bitmap goBitmap = new Bitmap("Go_48X48_32bpp.png");
Bitmap goHoverBitmap = new Bitmap("Go!_48X48_32bpp.png");
Bitmap goDisabledBitmap = new Bitmap("GoDisabled_48X48_32bpp.png");
ImageButton goImageButton = new ImageButton();
goImageButton.SetImage(goBitmap, goHoverBitmap, goBitmap, goDisabledBitmap, 
                       goBitmap, ImageButton.Alignment.Center);
...

Images with alpha channel are supported.

Points of Interest

Windows Forms ImageLists have a bug: if you add an Image to an ImageList, the alpha channel is lost. Therefore, the class in this article uses a workaround by resetting the pixel values of the Image after it has been added to the ImageList.

The demo image shows some buttons with the default XP visual style (top) as well as the custom Chaninja RC5 visual style (bottom).

The images in the demo are from the Qute collection originally drawn for Mozilla Firebird by Arvid "Quadrone" Axelsson.

History

  • February 24, 2004: Version 1.1.
    • Added alignment for non-XP-style buttons.
    • Added speed-up to Bitmap copying, contributed by Richard Deeming.
  • February 26, 2004: Version 1.2.
    • Added image scaling suggested by nxtwothou.
  • February 28, 2004: Version 1.3.
    • Added bicubic interpolation for rescaling.
  • May 8, 2004: Version 1.4.
    • Added drop down arrow capability
  • May 14, 2004: Version 1.5.
    • Added ThemedImage property for the designer.
    • Added auto-generation of disabled image (thanks to Carlos Leyva).
  • October 25, 2004: Version 1.6.
    • Fixed themes on/off detection bug (thanks to Leonid Kunin).
    • Added NAnt file.
    • Added I18n :-)

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


Written By
Software Developer (Senior) UpdateStar
Germany Germany
Michael Ganss is Managing Director of UpdateStar. UpdateStar offers complete protection from PC vulnerability caused by outdated software. The award-winning UpdateStar offers comfortable software installation, uninstallation, and keeps all of your programs up-to-date. UpdateStar recognizes more than 135,000 software products and lets you know once an update is available for you - for optimized PC security.

Comments and Discussions

 
AnswerRe: problem with run this project? Pin
Michael Ganss25-Oct-04 4:21
Michael Ganss25-Oct-04 4:21 
GeneralProblem with MDI form Pin
Alive99920-Oct-04 5:03
Alive99920-Oct-04 5:03 
GeneralRe: Problem with MDI form Pin
Alive99920-Oct-04 6:54
Alive99920-Oct-04 6:54 
GeneralRe: Problem with MDI form Pin
phanf21-Oct-04 4:36
phanf21-Oct-04 4:36 
GeneralRe: Problem with MDI form Pin
Alive99922-Oct-04 1:23
Alive99922-Oct-04 1:23 
GeneralRe: Problem with MDI form Pin
Alive99922-Oct-04 1:28
Alive99922-Oct-04 1:28 
GeneralSmall problem with disabled buttons Pin
kuninl2-Oct-04 13:27
kuninl2-Oct-04 13:27 
GeneralRe: Small problem with disabled buttons Pin
Michael Ganss25-Oct-04 4:12
Michael Ganss25-Oct-04 4:12 
Leonid,

thanks for pointing that out. I'll add your code to the next release.

Michael
GeneralSome Suggestions Pin
YK Ng5-May-04 14:43
YK Ng5-May-04 14:43 
GeneralRe: Some Suggestions Pin
Michael Ganss8-May-04 4:36
Michael Ganss8-May-04 4:36 
GeneralRe: Some Suggestions Pin
YK Ng13-May-04 16:17
YK Ng13-May-04 16:17 
GeneralRe: Some Suggestions Pin
Michael Ganss14-May-04 6:32
Michael Ganss14-May-04 6:32 
GeneralCode for second Image (above in article)! Pin
hprahul11-Apr-04 15:21
hprahul11-Apr-04 15:21 
GeneralRe: Code for second Image (above in article)! Pin
Michael Ganss12-Apr-04 21:58
Michael Ganss12-Apr-04 21:58 
GeneralRe: Code for second Image (above in article)! Pin
hprahul17-Apr-04 19:18
hprahul17-Apr-04 19:18 
GeneralRe: Code for second Image (above in article)! Pin
Michael Ganss18-Apr-04 22:12
Michael Ganss18-Apr-04 22:12 
GeneralEnabling XP theme support Pin
BramH8-Apr-04 2:28
BramH8-Apr-04 2:28 
GeneralLicensing Pin
YK Ng29-Feb-04 16:56
YK Ng29-Feb-04 16:56 
GeneralRe: Licensing Pin
Marc Clifton1-Mar-04 1:17
mvaMarc Clifton1-Mar-04 1:17 
GeneralRe: Licensing Pin
Michael Ganss1-Mar-04 22:31
Michael Ganss1-Mar-04 22:31 
GeneralMaximum image size Pin
nxtwothou25-Feb-04 10:42
nxtwothou25-Feb-04 10:42 
GeneralRe: Maximum image size Pin
Michael Ganss25-Feb-04 23:51
Michael Ganss25-Feb-04 23:51 
GeneralIncorrect Layout Pin
YK Ng23-Feb-04 15:22
YK Ng23-Feb-04 15:22 
GeneralRe: Incorrect Layout Pin
Michael Ganss24-Feb-04 3:47
Michael Ganss24-Feb-04 3:47 
GeneralRe: Incorrect Layout Pin
remrebel24-Feb-04 6:52
remrebel24-Feb-04 6:52 

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.