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

I've already tried FlatStyle with Image, used some custom controls. But the thing is I cannot create button like in the picture (with rounded border) Currently I'm working on the rounded border :( — Kent, Mar 17 '11 at 08:30
Could you please re-add the image to your question? I think that would be helpful. Thanks — halloei, Aug 10 '15 at 08:17

score 10 · Accepted Answer · answered Mar 17 '11 at 04:53

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;
    }
}

I think this one would do the trick. But I want the button's border to be rounded. So I'm working on it. Hope I'll figure out how to create button exactly the same as in the picture :) Thanks for your help — Kent, Mar 17 '11 at 08:35
Shouldn't the private static Color _back = System.Drawing.Color.Grey; be Gray ? I don;t know why C# calls it "Gray", "Grey" is correct spelling. — Burgo855, Mar 05 '17 at 07:18

score 2 · Answer 2 · answered Mar 17 '11 at 04:43

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");

answered Mar 17 '11 at 04:43

Fun Mun Pieng

6,751
3
28
30

score 1 · Answer 3 · edited Apr 27 '11 at 06:23

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

How to customize Button Control like this one?

3 Answers3

Linked