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

An Aqua Button Control Written in C# for .NET

, 17 Oct 2006
Rate this:
Please Sign up or sign in to vote.
I have written a number of applications and have always been a little disappointed at how drab they look using the standard VS controls. I had been looking for an easy way for brightening up these apps and in the end resorted to writing my own button control.
Sample Image - Sample Image.jpg

Introduction

I have written a number of applications and have always been a little disappointed at how drab they look using the standard VS controls. I had been looking for an easy way for brightening up these apps and in the end resorted to writing my own button control based on the "The Aqualizer Strikes Back!" work found on the CodeProject site. 

Using this, control bitmaps are created "on the fly" according to the attributes of the control. Colour, Height, Width, Font Size and Text. The slow rendering speed of the graphics is negated by using cached bitmaps. For each button, two PNG files are produced. One is the colour of the button and the other which is clear and is used when the mouse hovers over the button and when the button is disabled. Using this control, you gain the advantages of both options - flexible image generation and - speed.

Using the Control in Your Own Applications

The control can be used as a normal button control "as is". Simply add the project to your solution and you can add the control to your forms. Remember the aquabutton control must be compiled before it can be added to the form in the form editor. Use the properties ButtonText, ButtonColour, FontSize and TextColour to set the text and colours of the button.

Points of Interest

New Properties on the Button

Using VS 2003, I spent quite some time trying to make Text and ForeColor do my bidding. For one reason or another, I found these to be unreliable and decided in the end to use my own properties. Hence ButtonText, ButtonColour, FontSize and TextColour are used.

Making the Button's Text Property Viewable on the Form Editor

To add my own properties to the Aqua Button Control, I found it useful to use the Description, Default Value and the Browsable attributes. The sample below shows how this is. Useful tips in setting the properties can be given in the description field.

[Description("The text visible on the control. Use \\n for line breaks")]
[DefaultValue("Not Set")
[Browsable(true)]
public string ButtonText
{
    set
    {
        base.Text="not set";
        initialise();
        m_text=value;
        redrawButton();
    }

    get
    {
        return m_text;
    }
}

Deriving Your Own Button Classes

If in a moment of madness, if you feel inclined to base your own control on the Aqua Button control, it is perfectly possible to override the CreateImage() method to produce alternative designs (e.g. diamonds, emeralds, etc). The helper classes for the graphics are provided for doing all of this. You may have to make some of them public.

To understand how to do this, just use the class provided to get yourself started. For more information about how the algorithms work, I suggest you take a look at the excellent "Aqualiser Strikes Back" article. In overriding CreateImage(), be sure to cache the images in the same way as the base class or performance will suffer.

private void createBaseImages()
{
    /* Call the overridable CreateImage routines to get the bitmaps/images */
    m_image=CreateImage( m_buttonColour );
    m_nofocusImage=CreateImage( Color.White );
    this.Image = m_image;
}

Limitations

  • The behaviour of the button is slightly limited in that it does not provide the dialog type behaviour. With minor tweaks (or with me being prompted) this may be remedied in future releases.
  • The buttons still lack feedback on pressing. They need either a click or a visual action to complete the effect.
  • The 2D graphics library used dictates that the code is compiled with the "allow unsafe code" option set. For this reason, it is best to hive the control into its own library as not to enforce this option on other assemblies.
  • The bitmap is not rendered until the Text property is changed from "Not Set". At this point every time the font, size, text or colour is changed, a new bitmap is rendered. This is OK for released applications, but can mean a lot of bitmaps can be created in your %temp% directory during development.

Feedback

I use this control a lot in my own applications as it brightens up the UI dramatically. I realize that the control is not completely finished and has shortcomings (not serious ones hopefully). Feedback is gratefully accepted and where fitting will be incorporated in later versions of the control.

License

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

About the Author

Rad1cal
Web Developer
United Kingdom United Kingdom
No Biography provided

Comments and Discussions

 
GeneralMy vote of 3 Pinmembergaps9623-Apr-11 19:04 
QuestionHow can i get a click event? Pinmemberalfredopfr30-Jun-09 10:53 
QuestionCan the corner radius be adjusted? PinmemberMember 227500610-Mar-09 5:40 
GeneralBackColor Transparent problem !!! Pinmemberhonma21-Jan-09 14:13 
QuestionIs this can use for smart device? PinmemberChanuri29-Dec-08 19:24 
AnswerRe: Is this can use for smart device? PinmemberRad1cal7-Jan-09 6:07 
QuestionCan the text be made brighter? PinmemberDutchJohn11-May-08 9:55 
AnswerRe: Can the text be made brighter? Pinmemberaberg6-Jul-08 9:47 
GeneralCannot Download or view Screenshots PinmemberSukhjinder_K8-Dec-07 20:00 
QuestionHow to asign short cut key Pinmembersudhir paliwal22-Oct-07 4:10 
AnswerRe: How to asign short cut key PinmemberRad1cal29-Nov-07 4:11 
QuestionCan Aqua Buttons be used with Web Form?? PinmemberB-RadG18-Jul-07 10:10 
AnswerRe: Can Aqua Buttons be used with Web Form?? PinmemberRad1cal24-Jul-07 6:44 
Generalvery nice PinmemberAlexandros20051019-Oct-06 23:47 
GeneralRe: very nice PinmemberRad1cal20-Oct-06 12:40 
Questionvery cool Pinmemberwurakeem17-Oct-06 2:41 
AnswerRe: very cool PinmemberRad1cal17-Oct-06 5:17 
AnswerRe: very cool PinmemberRad1cal18-Oct-06 0:10 
GeneralVery nice visual PinmemberLutz Morrien16-Oct-06 23:36 

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.140721.1 | Last Updated 18 Oct 2006
Article Copyright 2006 by Rad1cal
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid