Click here to Skip to main content
11,427,946 members (56,498 online)
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

Share

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 Pin
karmo1289022-Sep-10 22:13
memberkarmo1289022-Sep-10 22:13 
QuestionWhere do you set the default size of the button? Pin
lagu265327-Sep-06 21:32
memberlagu265327-Sep-06 21:32 
GeneralCORAL 64 / CORAL66 Pin
blashyrk12330-Mar-06 0:06
memberblashyrk12330-Mar-06 0:06 
GeneralFonts not changing Pin
Jay Dubal31-May-05 4:59
memberJay Dubal31-May-05 4:59 
GeneralRe: Fonts not changing Pin
Jay Dubal31-May-05 5:02
memberJay Dubal31-May-05 5:02 
GeneralMisc. Comments Pin
Whizzard999221-Oct-04 11:19
memberWhizzard999221-Oct-04 11:19 
GeneralTrubles with adding control to the form Pin
Andrew Khimenko14-Jul-04 2:05
memberAndrew Khimenko14-Jul-04 2:05 
GeneralRe: Trubles with adding control to the form Pin
Jon Nethercott14-Jul-04 10:08
memberJon Nethercott14-Jul-04 10:08 
GeneralIncrease draw speed Pin
RojM8-Jun-04 18:13
memberRojM8-Jun-04 18:13 
GeneralRe: Increase draw speed Pin
Jon Nethercott9-Jun-04 13:56
memberJon Nethercott9-Jun-04 13:56 
General3D style buttons Pin
Glamiac23-Jan-04 8:32
memberGlamiac23-Jan-04 8:32 
GeneralRe: 3D style buttons Pin
Jon Nethercott25-Jan-04 12:52
memberJon Nethercott25-Jan-04 12:52 
GeneralRe: 3D style buttons Pin
CJCraft.com18-Feb-04 14:30
memberCJCraft.com18-Feb-04 14:30 
GeneralColor Button is disabled in the toolbox Pin
Gourou14-Jan-04 9:29
sussGourou14-Jan-04 9:29 
GeneralRe: Color Button is disabled in the toolbox Pin
Jon_UK3918-Jan-04 6:54
memberJon_UK3918-Jan-04 6:54 
Generalnice article Pin
Jermo8-Jan-04 8:52
memberJermo8-Jan-04 8:52 
QuestionNon trivial control? Pin
Carlos H. Perez6-Jan-04 6:10
memberCarlos H. Perez6-Jan-04 6:10 
AnswerRe: Non trivial control? Pin
Jon_UK396-Jan-04 8:18
memberJon_UK396-Jan-04 8:18 
GeneralEmulator Skin Pin
Furty5-Jan-04 14:59
memberFurty5-Jan-04 14:59 
GeneralRe: Emulator Skin Pin
Jon_UK395-Jan-04 22:13
memberJon_UK395-Jan-04 22:13 
GeneralRe: Emulator Skin Pin
Furty5-Jan-04 22:39
memberFurty5-Jan-04 22:39 
GeneralRe: Emulator Skin Pin
Jon_UK396-Jan-04 0:03
memberJon_UK396-Jan-04 0: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 | Terms of Use | Mobile
Web03 | 2.8.150428.2 | Last Updated 5 Jan 2004
Article Copyright 2004 by Jonathan Nethercott
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid