Click here to Skip to main content
15,867,308 members
Articles / Desktop Programming / Windows Forms

Image Button and Simulate Windows Media Player UI

Rate me:
Please Sign up or sign in to vote.
4.36/5 (6 votes)
27 May 2008CPOL2 min read 82.9K   4.9K   51   8
Use image button to build pretty UI

Image 1

Image 2

Introduction

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.

Background

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

Andy.UI

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:

C#
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.

C#
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.

C#
/// <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
       {
           get
           {
               if ( !mImages.ContainsKey ( ButtonState.Normal ) )
                   mImages.Add ( ButtonState.Normal, null );
               return mImages [ ButtonState.Normal ];
           }
           set
           {
               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.

History

  • 2008-5-28 – Created the article

License

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


Written By
Architect
China China
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralMy vote of 5 Pin
Kanasz Robert27-Sep-12 8:38
professionalKanasz Robert27-Sep-12 8:38 
Generalpause button Pin
Bleary Eye23-Jul-09 11:04
Bleary Eye23-Jul-09 11:04 
GeneralRe: pause button Pin
Andy Lang23-Jul-09 17:12
Andy Lang23-Jul-09 17:12 
GeneralLooks cool... Pin
VCSKicks21-Aug-08 19:31
VCSKicks21-Aug-08 19:31 
GeneralA couple of pointers... Pin
thomasswilliams28-May-08 12:55
thomasswilliams28-May-08 12:55 
GeneralRe: A couple of pointers... Pin
Andy Lang28-May-08 16:01
Andy Lang28-May-08 16:01 
GeneralRe: A couple of pointers... Pin
bytex9-Mar-09 3:32
bytex9-Mar-09 3:32 
Great article ! How to change this button's type to RadioButton ?
GeneralRe: A couple of pointers... Pin
Andy Lang9-Mar-09 15:16
Andy Lang9-Mar-09 15: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.