How to customize Button Control like this one?

Question

I want to make a custom button control (image button is ok) like this one.

I'm a new user, so I can't post image here. So I uploaded the picture here

I'm kind of desperate right now after trying some tutorials

Any suggestion is highly appreciated.

Thanks

Updated 08/10/2019: I asked this question so many years ago, and at that time I didn't have the permission to upload image, so the image I uploaded to the third party site is long gone now. I got many requests about re-uploading the image, so here is what I remember from that project I did eight years ago, I just find some random images about window form that match my memory

This is when the button is in normal state

This is when the button is hovered or clicked, with the rounded border

Solution 1

You could create a class that inherits from Button to keep all your styling in one place. To do the hover and pressed states you can override the mouse enter / leave events of the button and change style.

Here is an example from one of our projects (I changed the colours but your get the idea). Where we change some colours you could switch the images.

public class MossieButton : Button
{
    private static Font _normalFont = new Font("Arial", 10F, System.Drawing.FontStyle.Bold, System.Drawing.GraphicsUnit.Point, ((byte)(0)));

    private static Color _back = System.Drawing.Color.Grey;
    private static Color _border = System.Drawing.Color.Black;
    private static Color _activeBorder = System.Drawing.Color.Red;
    private static Color _fore = System.Drawing.Color.White;

    private static Padding _margin = new System.Windows.Forms.Padding(5, 0, 5, 0);
    private static Padding _padding = new System.Windows.Forms.Padding(3, 3, 3, 3);

    private static Size _minSize = new System.Drawing.Size(100, 30);

    private bool _active;

    public MossieButton()
        : base()
    {
        base.Font = _normalFont;
        base.BackColor = _border;
        base.ForeColor = _fore;
        base.FlatAppearance.BorderColor = _back;
        base.FlatStyle = System.Windows.Forms.FlatStyle.Flat;
        base.Margin = _margin;
        base.Padding = _padding;
        base.MinimumSize = _minSize;
    }

    protected override void OnControlAdded(ControlEventArgs e)
    {
        base.OnControlAdded(e);
        UseVisualStyleBackColor = false;
    }

    protected override void OnMouseEnter(System.EventArgs e)
    {
        base.OnMouseEnter(e);
        if (!_active)
            base.FlatAppearance.BorderColor = _activeBorder;
    }

    protected override void OnMouseLeave(System.EventArgs e)
    {
        base.OnMouseLeave(e);
        if (!_active)
            base.FlatAppearance.BorderColor = _border;
    }

    public void SetStateActive()
    {
        _active = true;
        base.FlatAppearance.BorderColor = _activeBorder;
    }

    public void SetStateNormal()
    {
        _active = false;
        base.FlatAppearance.BorderColor = _border;
    }
}

Solution 2

Can't see the picture but I guess you can change the border of the button and set a background image.

button1.FlatStyle = FlatStyle.Flat;
button1.BackgroundImage = Bitmap.FromFile("image.jpg");

Solution 3

I think the simplest way is set some properties of the button like below and

this.button1.FlatStyle = System.Windows.Forms.FlatStyle.Flat;
this.button1.Image = "Any Image"
this.button1.ImageAlign = System.Drawing.ContentAlignment.MiddleLeft;
this.button1.TextImageRelation = System.Windows.Forms.TextImageRelation.ImageBeforeText;

then write the code for

  private void button1_Click(object sender, EventArgs e)
    {
        //Code for Image Appearance.
        button1.Text = "OnClick";
    }

    private void button1_MouseEnter(object sender, EventArgs e)
    {
        //Code for Image Appearance.
        button1.Text = "Enter";
    }

    private void button1_MouseLeave(object sender, EventArgs e)
    {
        //Code for Image Appearance.
        button1.Text = "Normal";
    }

Update:

I don't know whether I am going correct or not but I think You can also achive your goal by putting a Button and a label inside a panel and arrange them according to your choice. Make the button1.FlatStyle = System.Windows.Forms.FlatStyle.Flat at initial with Label.Text="Normal". Then on Mouse enter to the Panel draw a rectangle with a border around the button and change the text of the label to "Hover". Like that Clicking on the Panel also you change the rectangle border according to you and make the label.Text="OnClick".