Color Button for the .NET Compact Framework

• Download source files - 8.25 Kb

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