Click here to Skip to main content
15,170,971 members
Articles / Desktop Programming / Windows Forms
Posted 9 Jan 2009


52 bookmarked

Transparent Buttons in .NET

Rate me:
Please Sign up or sign in to vote.
3.79/5 (22 votes)
9 Jan 2009CPOL3 min read
How to create a transparent text or image button.


I needed to add transparent buttons to my .NET application, so I searched the web from start to end, and all that came up was more or less confusing information. In the end, I implemented it myself, and decided to share it for everyone's benefit.


I found a number of different scenarios under the same catch-all "transparent buttons" phrase:

  1. You may want a freeform button, whose only active parts are its foreground pixels - this article does not cover this scenario. In my case, the button still has the good old rectangle shape, although the image displayed may be irregular.
  2. You may want a text button whose background should be transparent. This turned out to be pretty easy (see the code sample).
  3. You may want a button with an image, where the background of the image is transparent. This is more tricky, but fairly simple (see code sample).
  4. You may want to use alpha blending so that the button image dissolves into the background - there is no sample for this in this article.

The samples below (and the sample application in the download) assumes that you:

  • have a Windows Form with a PictureBox (named PictureBoxWithBear), with an image assigned to it,
  • a Button with its Text property set (named TextButton),
  • another button where we will not display text, but an image (named ImageButton).

(All the sample code goes into the constructor of the form.)

Using the Code

Let's jump right into it!

Problem 1: Add a text button with a transparent background

// Assign a parent to the button - this way the framework will know, where to look
// for the pixels that will be shown on the transparent areas.
this.TextButton.Parent = this.PictureBoxWithBear;
this.TextButton.BackColor = Color.Transparent;

Problem 2: Add a button with an image with transparent background

We already know how to set the background of the button to transparent - we use it here. But, we also have to set the background of the image to transparent. Here is how: normally, you would assign an image to the Button.Image property - but unfortunately, Image does not support TransparentColor. But, ImageList does!

So, this is what we should do:

  1. Create an image with some special background color (in the sample, this is Color.Magenta, 0xff00ff).
  2. Load that image (from file or resource).
  3. Add it to the button's ImageList (not to the Image!) property.
  4. Set the TransparentColor of the ImageList to the special color you chose.

This will be the result:

And this is the code to do that:

// Set the button background transparent.
// Also set the FlatAppearance.MouseOverBackColor transparent, so that when you
// hover over the button, the button won't blink.
// If you like, you can set FlatAppearance.MouseDownBackColor transparent as well,
// so that the button doesn't blink when clicked.
this.ImageListButton.Parent = this.PictureBoxWithBear;
this.ImageListButton.BackColor = Color.Transparent;
this.ImageListButton.FlatAppearance.MouseOverBackColor = Color.Transparent;

// Now, add an image, whose background should also be transparent.
// ImageStrip32x32.bmp contains
// some 32x32 pixel images next to each other,
// with their background set magenta (0xff00ff).
Image TheImageStrip = Image.FromFile("ImageStrip32x32.bmp", true);
ImageList TheImageList = new ImageList();
TheImageList.ImageSize = new Size(32, 32);
TheImageList.TransparentColor = Color.Magenta;

// Tell the button to show the 3rd image from
// the ImageStrip - this is the one with the flower.
this.ImageListButton.ImageList = TheImageList;
this.ImageListButton.ImageIndex = 3;

Transparent Buttons in Compact Framework 2.0

In theory, you should be able to do the same in CF2, but you can't. When you try to set the button's parent, an InvalidArgumentException is thrown. To work around this problem, you have to draw the button face as if it was transparent: Pick up the content from the background, paint it on top of your button, and then, over that, paint your own image.

The other problem is that you can't specify a transparent color for either the Image or the ImageList object. But Graphics.DrawImage does know about transparency: One of its overloads accepts an ImageAttributes parameter. Using ImageAttributes (in theory), you can specify a range of colors that will be displayed transparent. In reality you can only specify a range that contains a single color (the limits of the interval are the same), but never mind, a single color will do for now.

Here is how you do it:

// Create a temporary bitmap, where we assemble the current button image.
Bitmap MergedImage = new Bitmap(this.Width, this.Height);
Graphics MergedImageGraphics = Graphics.FromImage(MergedImage);

// Fill the current merged image from the corresponding part of the parent.
	new Rectangle(0, 0, MergedImage.Width, MergedImage.Height),
	new Rectangle(this.Left, this.Top, this.Width, this.Height),

// Draw the foreground image.
ImageAttributes ia = new ImageAttributes();
ia.SetColorKey(this.TransparentColor, this.TransparentColor);

	new Rectangle(0, 0, MergedImage.Width, MergedImage.Height),
	0, 0, ForegroundImage.Width, ForegroundImage.Height,
	GraphicsUnit.Pixel, ia);

// Draw the merged button image.
e.Graphics.DrawImage(MergedImage, 0, 0);


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


About the Author

Hungary Hungary
No Biography provided

Comments and Discussions

Questionmy vote of 5 Pin
igetorix13-Jul-16 4:07
Memberigetorix13-Jul-16 4:07 
GeneralMyVote of 5 Pin
Avdushima18-Dec-14 6:54
MemberAvdushima18-Dec-14 6:54 
Questionsimple and best description Pin
SIR bae28-Aug-14 14:30
MemberSIR bae28-Aug-14 14:30 
GeneralMy vote of 5 Pin
Member 152665317-Jan-12 13:10
MemberMember 152665317-Jan-12 13:10 
GeneralMy vote of 1 Pin
akhaj5-Feb-11 5:06
Memberakhaj5-Feb-11 5:06 
GeneralA question remains open Pin
Petru6616-Nov-10 7:59
MemberPetru6616-Nov-10 7:59 
GeneralMy vote of 1 Pin
Youssof77115-Sep-10 3:14
MemberYoussof77115-Sep-10 3:14 
GeneralRe: My vote of 1 Pin
haiduong8724-May-19 21:47
Memberhaiduong8724-May-19 21:47 
GeneralMy vote of 5 Pin
Dan Randolph13-Jul-10 14:34
MemberDan Randolph13-Jul-10 14:34 
GeneralTransparent Button XP Style Pin
ComeAroundMan10-Mar-10 23:44
MemberComeAroundMan10-Mar-10 23:44 
GeneralI wish I wrote this. Pin
hughbiquitous8-May-09 11:20
Memberhughbiquitous8-May-09 11:20 
GeneralRe: I wish I wrote this. Pin
BalintN13-Jun-09 9:32
MemberBalintN13-Jun-09 9:32 
QuestionIn Vista? Pin
Dalibor Savanovic23-Feb-09 4:59
MemberDalibor Savanovic23-Feb-09 4:59 
AnswerRe: In Vista? Pin
BalintN13-Jun-09 9:13
MemberBalintN13-Jun-09 9:13 
GeneralRe: In Vista? Pin
BalintN13-Jun-09 11:48
MemberBalintN13-Jun-09 11:48 
GeneralEnhancement Pin
TerryFogg22-Jan-09 17:38
MemberTerryFogg22-Jan-09 17:38 
GeneralRe: Enhancement Pin
BalintN13-Jun-09 9:32
MemberBalintN13-Jun-09 9:32 
GeneralMy vote of 2 Pin
ProJester119-Jan-09 9:05
MemberProJester119-Jan-09 9:05 
GeneralMy vote of 2 Pin
Giri Ganji13-Jan-09 23:14
MemberGiri Ganji13-Jan-09 23:14 
GeneralRe: My vote of 2 Pin
itsravie14-Jan-09 1:10
Memberitsravie14-Jan-09 1:10 
JokeRe: My vote of 2 Pin
BalintN15-Jan-09 0:16
MemberBalintN15-Jan-09 0:16 
GeneralRe: My vote of 2 Pin
pradeep joshi17-May-09 22:50
Memberpradeep joshi17-May-09 22:50 
GeneralRe: My vote of 2 Pin
pradeep joshi17-May-09 22:51
Memberpradeep joshi17-May-09 22:51 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.