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

Color Button for the .NET Compact Framework

, 4 Jan 2004
Rate this:
Please Sign up or sign in to vote.
Shows how to write a color button control for the .NET compact framework.

Sample Image - ColourButtons.gif

Introduction

I have written this article for two reasons. The first is that, while the standard .NET framework allows you to change the color of buttons, this feature is missing from the compact framework. The buttons in the compact framework are a boring black on grey. The second reason for writing this article is that, whilst it is relatively straightforward to write standard controls, writing controls for the compact framework is slightly more challenging, since there isn't a project template for the compact framework controls in Visual Studio. I would imagine that both of these issues will be resolved in time by Microsoft, but for the time being, a user control is required and this control is not trivial to write.

Creating the Control

There are already several articles describing how to create a control for the compact framework, so I won't duplicate those articles here. In my opinion, one of the better articles is on the MSDN site: Creating Custom Controls for the .NET Compact Framework by Chris Kinsman, Vergent Software, September 2002. It took me a while to get this to work, but that turned out to be because there are quite a few steps to follow and you have to make sure you don't miss any out!

The Code

Having created a blank control, I set about changing it to work as a button. I wanted to create a button that behaved the same way as the standard .NET CF button, but had more colors. I decided to give the button, 4 new color properties. These are:

Color m_NormalBtnColour = Color.LightYellow;
Color m_NormalTxtColour = Color.Blue;
Color m_PushedBtnColour = Color.Blue;
Color m_PushedTxtColour = Color.Yellow;

The properties of these are exposed by the control using the following code (which shows one of the four - the others are identical with different names and descriptions):

#if NETCFDESIGNTIME
    [Category("Appearance")]
    [DefaultValue(3)]
    [Description("The normal colour of the button.")]
#endif
public Color NormalBtnColour
{
    set
    {
        m_NormalBtnColour = value;
        Invalidate();
    }
    get
    {
        return m_NormalBtnColour;
    }
}

Note that I invalidate the control after the color has been changed. This is so that the control is redrawn when the color is changed whilst designing the form. I also had to remove the two standard color properties: BackColor and ForeColor. I did this with the following code (one of two shown):

#if NETCFDESIGNTIME
    [Browsable(false)]
    [EditorBrowsable(EditorBrowsableState.Never)]
#endif
public override Color BackColor
{
    set
    {;}
    get
    { return new Color(); }
}

Browsable(false) removes the item from the property window, and EditorBrowsable(Never) prevents intellisense from displaying the property. Finally, for the attributes, I added the button state, which is either normal or pushed.

public enum States 
{ 
    Normal, 
    Pushed 
}

States m_state;

This was set to normal in the constructor, and would be set to pushed on a mouse down event and back to normal on a mouse up event. Also, in order that the button was correctly drawn in design mode, OnResize was overridden to invalidate the control when the button was resized.

protected override void OnMouseDown(
            System.Windows.Forms.MouseEventArgs e) 
{
    m_state = States.Pushed; 
    // button receives input focus
    Focus();  
    base.OnMouseDown(e); 
    Invalidate(); 
} 

protected override void OnMouseUp(
            System.Windows.Forms.MouseEventArgs e) 
{
    m_state = States.Normal;
    base.OnMouseUp(e);
    Invalidate();
}

protected override void OnResize(EventArgs e)
{
    base.OnResize(e);
    Invalidate();
}

The only thing left to do was the OnPaint method. This draws the button using the two normal colors if the button is in the normal state, or the two pushed colors if the button is in the pushed state.

protected override void OnPaint(PaintEventArgs e) 
{
    Graphics graphics = e.Graphics;

    Pen pen;
    SolidBrush brush;
    SolidBrush textBrush;

    //Work out the colours that we should be using
    // for the text and background
    if (m_state == States.Normal)
    {
        brush = new SolidBrush(m_NormalBtnColour);
        textBrush = new SolidBrush(m_NormalTxtColour);
        pen = new Pen(m_NormalTxtColour);
    }
    else
    {
        brush = new SolidBrush(m_PushedBtnColour);
        textBrush = new SolidBrush(m_PushedTxtColour);
        pen = new Pen(m_PushedTxtColour);
    }

    //Draw a rectangle and fill the inside
    graphics.FillRectangle(brush, 0, 0, Width, Height);
    graphics.DrawRectangle(pen, 0, 0, Width-1, Height-1);

    //Create a font based on the default font
    int fontHeight = 10;
    Font font = new Font(FontFamily.GenericSerif,
               fontHeight, FontStyle.Bold);

    //Find out the size of the text
    SizeF textSize = new SizeF();
    textSize = e.Graphics.MeasureString(Text, font);

    //Work out how to position the text centrally
    float x=0,y=0;
    if (textSize.Width < Width)
        x = (Width - textSize.Width) /2;
    if (textSize.Height < Height)
        y = (Height - textSize.Height) /2;

    //Draw the text in the centre of the button using
    // the default font
    graphics.DrawString(Text, font, textBrush, x, y);
}

As described in the "building controls" articles, there are 2 solutions, one for the actual control, and one for the control in the designer. I wrote a batch file to build both solutions and copy the assemblies to the correct location, so that they could be picked up by Visual Studio. Once the controls have been added to "My User Controls", they can be dragged onto forms and manipulated just like any other control.

History

  • 05 Jan 2004 - Initial version.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

Jonathan Nethercott
Software Developer (Senior) CodeWrite Ltd.
United Kingdom United Kingdom
Jon is a Software engineer with over 25 years of experience, the last 9 of which have been using C# and ASP.NET. Previously he has used C++ and MFC. He has a degree in Electronic Systems Engineering.

Comments and Discussions

 
Generalchange background color when disabled Pinmemberkarmo1289022-Sep-10 21:13 
QuestionWhere do you set the default size of the button? Pinmemberlagu265327-Sep-06 20:32 
GeneralCORAL 64 / CORAL66 Pinmemberblashyrk12329-Mar-06 23:06 
GeneralFonts not changing PinmemberJay Dubal31-May-05 3:59 
GeneralRe: Fonts not changing PinmemberJay Dubal31-May-05 4:02 
GeneralMisc. Comments PinmemberWhizzard999221-Oct-04 10:19 
GeneralTrubles with adding control to the form PinmemberAndrew Khimenko14-Jul-04 1:05 
GeneralRe: Trubles with adding control to the form PinmemberJon Nethercott14-Jul-04 9:08 
GeneralIncrease draw speed PinmemberRojM8-Jun-04 17:13 
GeneralRe: Increase draw speed PinmemberJon Nethercott9-Jun-04 12:56 
General3D style buttons PinmemberGlamiac23-Jan-04 7:32 
GeneralRe: 3D style buttons PinmemberJon Nethercott25-Jan-04 11:52 
GeneralRe: 3D style buttons PinmemberCJCraft.com18-Feb-04 13:30 
GeneralColor Button is disabled in the toolbox PinsussGourou14-Jan-04 8:29 
GeneralRe: Color Button is disabled in the toolbox PinmemberJon_UK3918-Jan-04 5:54 
Generalnice article PinmemberJermo8-Jan-04 7:52 
QuestionNon trivial control? PinmemberCarlos H. Perez6-Jan-04 5:10 
AnswerRe: Non trivial control? PinmemberJon_UK396-Jan-04 7:18 
GeneralEmulator Skin PinmemberFurty5-Jan-04 13:59 
GeneralRe: Emulator Skin PinmemberJon_UK395-Jan-04 21:13 
GeneralRe: Emulator Skin PinmemberFurty5-Jan-04 21:39 
GeneralRe: Emulator Skin PinmemberJon_UK395-Jan-04 23:03 

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
Web03 | 2.8.140709.1 | Last Updated 5 Jan 2004
Article Copyright 2004 by Jonathan Nethercott
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid