How To Use Image Transparency

Placing an image into a picturebox results in a solid-coloured square regardless of what shape your image is supposed to be. You can break out of the box by using GDI to draw your images with embedded transparency.

Download: ImageTransparency.zip - Demonstrates image transparency, click detection, dragging, color replacement, resource embedding.
Unzip all files (executables plus dependencies) into a single folder.

How to Create Images with Transparency

Okay, it's time to throw MS Paint out the window because it will be of no help to you now. I suggest you download the trial version of one of the following programs:

  • Paint Shop Pro
  • Adobe Photoshop
  • GIMP (should be installed on the lab computers)

Transparency information is only possible in two of the most common image formats: GIF and PNG (portable network graphic). You typically designate a background color to be the transparency. In some cases you may wish to choose a color that's so ugly that it would never appear in any image otherwise - my favorites are gawdy hot-pink or vomitous yellow-green.

Be careful with antialiased edges on the objects in your image - this can result in a gross looking fringe of pixels if the background in your program doesn't match that in the original image.

In Paint Shop Pro...

  • Set your image color depth to 256 colors.
  • Use the Set Palette Transparency option to select the background color.
  • To ensure the transparency worked correctly, toggle the View Palette Transparency option on and off to knock out the transparent background.
  • Save the image out as GIF format.

In Photoshop

  • Use the Save Image for Web... option.
  • Select the GIF format.
  • In the palette display, click on the background color to select it.
  • Right below the palette display, click the button that looks like a checkerboard to set this color as the image transparency.
  • Save the image.

In GIMP

I've never used this program before, so your guess is as good as mine...

Getting the Image into your Application

There are a few ways to get the image into your application:

  • Load it in from the harddrive at runtime using Image.FromFile.
  • Have Visual Studio embed the image in a PictureBox, ImageList etc.
  • Manually embed the image in your Executable binary and retrieve it at runtime.

Embedding the image in your Executable binary isn't as difficult as it sounds - and it makes sure there's no chance the image file could be missing or tampered with. To embed an image in your executable:

  • In the Solution Explorer window, right click on your project and click Add Existing Item....
  • Set the filename filter to All Formats and browse for your image. Once you have found it and selected it, press Open. The image file appears in your project.
  • Click on the image file in the Solution Explorer and you will see a set of properties for that object in the Properties window.
  • Set the Build Action property to Embed Resource.

To get the image file from your executable during runtime, use the following code:

Image myimage = Image.FromStream( this.GetType().Assembly.GetManifestResourceStream("MyNamespace.picture.gif") );

In the above code, MyNamespace is the default namespace of your project. The image file here is assumed to be "picture.gif". If you place the image file into a subfolder in your project, such as a folder named "images", you would use the string "MyNamespace.images.picture.gif" - ie. use the . as a directory delimeter.

Drawing the Image

Use GDI+ to draw the image to your form or control. It automatically understands the meaning of the transparency, and thus doesn't occlude the background where the tranparency color sits.

Graphics g = this.CreateGraphis();
g.DrawImageUnscaled( myimage, 0, 0 );