Images on XP-Style Buttons

• Download demo project - 40.3 Kb
• Download source - 4.20 Kb

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:

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:

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 :-)