Click here to Skip to main content
Click here to Skip to main content
Go to top

SpringButton

, 7 Jul 2006
Rate this:
Please Sign up or sign in to vote.
A nice and simple button in C#.

Sample Image - springbutton.jpg

Introduction

This sample shows how to build a simple button with a nice graphic interface. This control is an example of using the drawings classes and the essential keywords. I decided to draw an unusual button like this picture below:

Sample Image - abutton.jpg

First step

First of all, I declare my new class:

public class SpringButton : Control
{}

How to expose the proprieties

After that, I expose some essential proprieties like the size in pixel of the triangles and the second color of the button. All the other proprieties that I need are available in the System.Windows.Form.Control class.

//this variable say if the
//mouse is over the contol
private bool Sel = false;
private Color BackColor2= Color.Gray;

public Color BackColorEnd
{
    get{return BackColor2; }
    set{BackColor2=value; 
        this.Invalidate();  }
}

int _triangle =25;
//I add a proprety
//that's the lenght of
//a triangle rectangle (45°)

public int Triangle
{
    get{return _triangle;}
    set{ 
        _triangle=value;
        //if lenght change I update 
        //the control
        this.Invalidate(true);
    }
}

Mouse "lighting"

Another important step is to set the control as 'selected' when the mouse is over it. So if the mouse is over the control, the back color and the border color are inverted (see the code in the OnPaint override).

//set the button as "selected" on mouse entering
//and as not selected on mouse leaving
protected override void OnMouseEnter(EventArgs e)
{
    Sel = true;
    this.Invalidate();
}
protected override void OnMouseLeave(EventArgs e)
{
    Sel = false;
    this.Invalidate();
}

The core

The main step is this override of the OnPaint procedure. In this method, I draw directly on the control. First the central rectangle, and then the two triangles in the opposite corners. Here is the code:

protected void PaintBut(PaintEventArgs e)
{
    //I select the rights color 
    //To paint the button...
    Color FColor = this.BackColorEnd;
    Color BColor = this.BackColor;
    if (Sel == true)
    {
      FColor = this.BackColor;
      BColor = this.BackColorEnd;
    }
    //and draw(see All the code...)

The delegate

I will now explain how to use the delegate. I declared this class that I use as EventArgs. When the user clicks on the control, if the click has been on a triangle and I delegate with the TriangleEventArgs that says the triangle has been clicked.

protected override void OnMouseDown(MouseEventArgs e)
{ 
    base.OnClick(e);
    // if the user use this delegate...
    if (this.TriangleClick != null)
    {
    //check if the user click on the left triangle
    //or in the right with some geometrics  rules...
    //(is't possible to click all triangle at the same time )
    
    int x= e.X;
    int y= e.Y;
    
    if((x<_triangle)&&(y<=(_triangle-x))||
       (x>this.ClientRectangle.Width-_triangle)&&
       (y>=(this.ClientRectangle.Height-_triangle-x)) )
    {
        //try with right...
        TriangleClickEventArgs te= new TriangleClickEventArgs(false);
        //if not...
        if((x<_triangle)&&(y<=(_triangle-x)))
            te= new TriangleClickEventArgs(true);
           
            this.TriangleClick(this,te);
        }
    }
}

Credits

If you would like to see my other works, please visit my home page: http://zeppaman.altervista.org.

License

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

Share

About the Author

No Biography provided

Comments and Discussions

 
GeneralIButtonControl Pinmembergabis15-Jul-06 20:06 
GeneralAh! It's cool! PinmemberMahesh Sapre10-May-06 4:07 
GeneralRe: Ah! It's cool! PinmemberSir Zeppa'Man10-May-06 5:04 
GeneralNice PinmemberNinjaCross9-May-06 23:51 
GeneralRe: Nice PinmemberSir Zeppa'Man10-May-06 0:31 
Generaltyu Pinmemberpccai24-Nov-05 1:12 
QuestionSpring Button Pinmembermr chiken23-Nov-05 5:57 
GeneralRe: Spring Button [modified] PinmemberThe_Mega_ZZTer9-Jul-06 13:50 

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.140916.1 | Last Updated 7 Jul 2006
Article Copyright 2005 by Sir Zeppa'Man
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid