Click here to Skip to main content
13,793,138 members
Click here to Skip to main content
Add your own
alternative version


51 bookmarked
Posted 27 May 2008
Licenced CPOL

Image Button and Simulate Windows Media Player UI

, 27 May 2008
Rate this:
Please Sign up or sign in to vote.
Use image button to build pretty UI


In my own shareware “LanTing Music Center”, I want the UI looks with more personality, so I decided to design some UI elements to build the application. Image button is the first and basic element. With image button, it is easy to build a very beautiful user interface.

In this sample, I use image button to build a form that looks like Microsoft’s Windows Media Player.


In a skinned form, some buttons look irregular, but indeed it is also a rectangle button. Only because the image makes it look irregular, we can use image to represent a button. Normally a button has four states: disabled, normal, hover and pressed, so we can use four images to represent the four states of a button.

Sometimes we use PNG format image, and we know PNG supports transparent background. We will hope the button can support transparent, and then the background of the button will not be covered.

The Demo Solution


This is a UI library, now it only contains one control-ImageButton. I will add more UI controls to this library - a WinForm application to show the usage of UI element. Now there is only the demo of image button, use image button to build a form that looks like Windows Media Player.

Using the Code

Add assembly Andy.UI to your project reference, or add the image button control to Visual Studio toolbox, and then you can use it.

Points of Interest

1. Double buffer

To improve performance, image button uses double buffer to prevent flicker. To do this, only use the below code in the constructor:

DoubleBuffered = true;

2. Transparent

To support transport only, you need the code given below. But I want to say that this is really transparent. When image button paints, it will ask its parent to draw its background, so it looks like it is transparent.

SetStyle ( ControlStyles.UserPaint, true ); 
SetStyle ( ControlStyles.SupportsTransparentBackColor, true ); 
BackColor = Color.Transparent;

3. Image Properties

We need four images to represent the button states; normally we need four variables which are of image type. It is a little bit of a bother, so I use a dictionary to store the images, button state is the key.

/// <summary>
/// images that state used
/// </summary>
private Dictionary<ButtonState,Image> mImages = new Dictionary<ButtonState, Image> ( );
       /// <summary>
       /// Get or set normal state image
       /// </summary>
       [DefaultValue ( null )]
       public Image NormalImage
               if ( !mImages.ContainsKey ( ButtonState.Normal ) )
                   mImages.Add ( ButtonState.Normal, null );
               return mImages [ ButtonState.Normal ];
               mImages [ ButtonState.Normal ] = value;
               Invalidate ( );

Note, if in this pattern it is recommended using property in ImageButton class. This is because the key can only be added to the dictionary when it gets the property. Or you can add the states key to the dictionary in the constructor.

4. Designer

The first time you add an ImageButton to the form, there are no state images, so there is no display on the ImageButton. It’s not convenient to judge where the button is when you design your form. So there is an ImageButtonDesigner, only draw a gray rectangle on the button in design time and no normal state image, thus you know where the button is.


  • 2008-5-28 – Created the article


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Andy Lang
China China
No Biography provided

You may also be interested in...

Comments and Discussions

GeneralMy vote of 5 Pin
Kanasz Robert27-Sep-12 9:38
memberKanasz Robert27-Sep-12 9:38 
Generalpause button Pin
Bleary Eye23-Jul-09 12:04
memberBleary Eye23-Jul-09 12:04 
GeneralRe: pause button Pin
Andy Lang23-Jul-09 18:12
memberAndy Lang23-Jul-09 18:12 
GeneralLooks cool... Pin
VCSKicks21-Aug-08 20:31
memberVCSKicks21-Aug-08 20:31 
GeneralA couple of pointers... Pin
thomasswilliams28-May-08 13:55
memberthomasswilliams28-May-08 13:55 
GeneralRe: A couple of pointers... Pin
Andy Lang28-May-08 17:01
memberAndy Lang28-May-08 17:01 
GeneralRe: A couple of pointers... Pin
bytex9-Mar-09 4:32
memberbytex9-Mar-09 4:32 
GeneralRe: A couple of pointers... Pin
Andy Lang9-Mar-09 16:16
memberAndy Lang9-Mar-09 16:16 

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.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web02 | 2.8.181207.3 | Last Updated 28 May 2008
Article Copyright 2008 by Andy Lang
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid