Click here to Skip to main content
Click here to Skip to main content

Image Button and Simulate Windows Media Player UI

By , 27 May 2008
Rate this:
Please Sign up or sign in to vote.

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

License

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

About the Author

Andy Lang
Architect
China China
No Biography provided

Comments and Discussions

 
GeneralMy vote of 5 PinmvpKanasz Robert27-Sep-12 8:38 
Generalpause button PinmemberBleary Eye23-Jul-09 11:04 
GeneralRe: pause button PinmemberAndy Lang23-Jul-09 17:12 
GeneralLooks cool... PinmemberVCKicks21-Aug-08 19:31 
GeneralA couple of pointers... Pinmemberthomasswilliams28-May-08 12:55 
GeneralRe: A couple of pointers... PinmemberAndy Lang28-May-08 16:01 
GeneralRe: A couple of pointers... Pinmemberbytex9-Mar-09 3:32 
GeneralRe: A couple of pointers... PinmemberAndy Lang9-Mar-09 15:16 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

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