Click here to Skip to main content
15,867,488 members
Articles / Mobile Apps / Windows Mobile
Article

Color Button for the .NET Compact Framework

Rate me:
Please Sign up or sign in to vote.
4.67/5 (10 votes)
4 Jan 20043 min read 216.3K   1K   65   22
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:

C#
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):

C#
#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):

C#
#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.

C#
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.

C#
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.

C#
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


Written By
Software Developer (Senior) CodeWrite Ltd.
United Kingdom United Kingdom
Jon is a Software engineer with over 30 years of experience, the last 18 of which have been using C# and ASP.NET. Previously he has used C++ and MFC. He has a degree in Electronic Systems Engineering and is also a fully licensed radio amateur (M0TWM).

Comments and Discussions

 
Generalchange background color when disabled Pin
karmo1289022-Sep-10 21:13
karmo1289022-Sep-10 21:13 
QuestionWhere do you set the default size of the button? Pin
Klive827-Sep-06 20:32
Klive827-Sep-06 20:32 
GeneralCORAL 64 / CORAL66 Pin
blashyrk12329-Mar-06 23:06
blashyrk12329-Mar-06 23:06 
GeneralFonts not changing Pin
Jay Dubal31-May-05 3:59
Jay Dubal31-May-05 3:59 
GeneralRe: Fonts not changing Pin
Jay Dubal31-May-05 4:02
Jay Dubal31-May-05 4:02 
GeneralMisc. Comments Pin
Robert Bouillon21-Oct-04 10:19
Robert Bouillon21-Oct-04 10:19 
GeneralTrubles with adding control to the form Pin
Andrew Khimenko14-Jul-04 1:05
Andrew Khimenko14-Jul-04 1:05 
GeneralRe: Trubles with adding control to the form Pin
Jonathan Nethercott14-Jul-04 9:08
professionalJonathan Nethercott14-Jul-04 9:08 
GeneralIncrease draw speed Pin
RojM8-Jun-04 17:13
RojM8-Jun-04 17:13 
Jon - Great article and easy to understand. I'm writing an application which will use many buttons (colored) and using the Color Button I'm finding the draw speed to be rather slow i.e. I can see the individual buttons being drawn. Can you think of anything I could do to speed the process up.

Roj
GeneralRe: Increase draw speed Pin
Jonathan Nethercott9-Jun-04 12:56
professionalJonathan Nethercott9-Jun-04 12:56 
General3D style buttons Pin
Glamiac23-Jan-04 7:32
Glamiac23-Jan-04 7:32 
GeneralRe: 3D style buttons Pin
Jonathan Nethercott25-Jan-04 11:52
professionalJonathan Nethercott25-Jan-04 11:52 
GeneralRe: 3D style buttons Pin
CJCraft.com18-Feb-04 13:30
CJCraft.com18-Feb-04 13:30 
GeneralColor Button is disabled in the toolbox Pin
Gourou14-Jan-04 8:29
Gourou14-Jan-04 8:29 
GeneralRe: Color Button is disabled in the toolbox Pin
Jonathan Nethercott18-Jan-04 5:54
professionalJonathan Nethercott18-Jan-04 5:54 
Generalnice article Pin
Jermo8-Jan-04 7:52
Jermo8-Jan-04 7:52 
QuestionNon trivial control? Pin
Carlos H. Perez6-Jan-04 5:10
Carlos H. Perez6-Jan-04 5:10 
AnswerRe: Non trivial control? Pin
Jonathan Nethercott6-Jan-04 7:18
professionalJonathan Nethercott6-Jan-04 7:18 
GeneralEmulator Skin Pin
Furty5-Jan-04 13:59
Furty5-Jan-04 13:59 
GeneralRe: Emulator Skin Pin
Jonathan Nethercott5-Jan-04 21:13
professionalJonathan Nethercott5-Jan-04 21:13 
GeneralRe: Emulator Skin Pin
Furty5-Jan-04 21:39
Furty5-Jan-04 21:39 
GeneralRe: Emulator Skin Pin
Jonathan Nethercott5-Jan-04 23:03
professionalJonathan Nethercott5-Jan-04 23:03 

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

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