How can I use a .png file as a button in Windows Form ? ( in C# - visual studio 2013 )

Question

I need to use a .png file as a button . I just want to show a picture ( without any extra area around it ) to users .

My problem is in design and specify the area that should reacts clicking . I changed some properties of my button , but I couldn't achieve to my purpose . I changed the FlatStyle to Flat or the BackColor to Transparent , but the button has a colored background around itself yet . I need to remove the background completely .

I also tried the PictureBox , but I couldn't remove the background by properties again .

Solution

Use a Button instead of a PictureBox. because it also gives the ability to use keyboard and tabbing, but the PictureBox does not.

Add a Button to your form and set these properties:

Image = optionalPNGImage //should be 32bpp (alpha channel enabled)
BackColor = Color.Transparent;
FlatStyle = FlatStyle.Flat;
FlatAppearance.BorderSize = 0;
FlatAppearance.MouseDownBackColor = Color.Transparent;
FlatAppearance.MouseOverBackColor = Color.Transparent;
ForeColor = System.Drawing.Color.White;
Text = "Hello";

The result would be like this:

Next, if you want to change the picture of the Button on mouse over or mouse click, create these events:

//happens when your mouse enters the region of the button.
private void button1_MouseEnter(object sender, EventArgs e)
{
    button1.Image = picMouseOver;
}

//happens when your mouse leaves the region of the button.
private void button1_MouseLeave(object sender, EventArgs e)
{
    button1.Image = picRegular;
}

//happens when your mouse button is down inside the region of the button.
private void button1_MouseDown(object sender, MouseEventArgs e)
{
    button1.Image = picMouseDown;
}

//happens when your mouse button goes up after it went down.
private void button1_MouseUp(object sender, MouseEventArgs e)
{
    button1.Image = picRegular;
}

Comments

[Rahul]

You are on the right track. You should be using PictureBox (OR) create a user control.

[Federico Berasategui]

winforms doesn't support custom UI designs. You're looking for WPF.

[Matin Lotfaliee]

@HighCore not true. winforms support custom UI designs. but it is hard to do so. WPF is easier and uses GPU instead of CPU.

[Federico Berasategui]

@MatinLotfaliee please, PLEASE show me your winforms version of this. winforms is useless. And retarded.

[Matin Lotfaliee]

@HighCore Take a look at this. Written by me using Winforms .net 2.0. When you don't believe in something you won't get any success in it.

[Federico Berasategui]

@MatinLotfaliee dude, I don't care if you made the full Avatar movie on Cobol. winforms is useless. I'm sure I can achieve the same in 5% the amount of time and code that it took you to do that, using current technology, and without resorting to a bunch of horrible "owner draw" hacks. You know that saying "the right tool for the job"? well, winforms is the right tool if you need to run your software on my grandma's 386 computer on Windows 3.1. Otherwise, use technology from this century and you'll get the same or better results in a fraction of the time.

[Matin Lotfaliee]

@HighCore read your first comment. You said a false sentence that winforms does not support custom ui. Next I told you it is supported but it is much harder and I do agree with that. If you don't want to share a knowledge about how to create a custom button in WPF as an answer, then please don't mislead others about what you don't know.

[Federico Berasategui]

@MatinLotfaliee sorry, my idea of "technology ABC supports XYZ" is that you can achieve a certain thing XYZ using technology ABC WITHOUT having to resort to a bunch of horrible hacks, and WITHOUT having to spend an enormous amount of time to achieve a simple feature. Otherwise, you could also say that COBOL supports 3D animations... In the case of winforms, IT DOESN'T SUPPORT custom UI designs, simply because in order to achieve them you need to spend an enormous amount of time and effort fighting the platform incapabilites. It's a useless framework that doesn't support anything.

[Reyhaneh Sharifzadeh]

I changed every things that you said by properties , but the button has the square background yet ! upload7.ir/imgs/2014-07/22846469106631005728.png

[Matin Lotfaliee]

If you are using a picturebox as a background, you should change the parent of the button to that one instead of the form. inside the constructor or formLoad methods, using the code: button1.Parent = pictureBox1. But the best way is to set that background in the form's backgroundImage property without adding extra codes.

[Reyhaneh Sharifzadeh]

yes , there was a PictureBox under the button . As you said , I deleted it and now there's just the form's BackgroundImage , but the button is still like before !

[Matin Lotfaliee]

Yep, I tested it myself and you are right about it. I changed my answer, using Transparent BackColor and FlatAppearances, it should do the job.

[Reyhaneh Sharifzadeh]

The button's appearance is exactly what I want now , thanks . But it still reacts by clicking on the square area ! I want it reacts just by clicking on the image .

[jordanhill123]

@ReyhanehSH You can set the Region of the Control msdn.microsoft.com/en-us/library/…