Image Button and Simulate Windows Media Player UI

• Download source - 789.43 KB

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:

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
       {
           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