Entire screen semi-transparent modal .Net winforms

Have you seen a wb screen that forces the whole page to be disabled so you can click ok/cancel or a similar dialog?  Since popups have been largely eliminated, a floating div has become more common.  I wanted to create this same effect in a Windows form application, and here I will detail the steps to show how it’s done.

But first, here’s an example of what it looks like.

Using the TransparencyKey for irregular shaped .Net Windows Forms

I found most of the documentation on creating winforms with a transparent portion to be out of date and frustrating.  32-bit color depth is probably the most common screen setting these days, and some special steps have to be used to get the old techniques to work.

I will detail the steps I used to get a media-player style (non-square) window working.

First a very shot background on what didn’t work.  Microsoft has this rundown titled ‘Shaped Windows Forms and Controls in Visual Studio .NET’ at http://msdn.microsoft.com/en-us/library/aa289517.aspx.  There is mention in the article that 32-bit colors won’t work with this approach.  Surprisingly, they advise you to explain to your users that they’ll have to set their screen to less than 24-bit to get your program to display correctly!  Obviously out-of-date  but I couldn’t find anything newer.

So, here’s the rundown.

Step 1

If you want the entire form to be semi-transparent you can easily do that by setting the ‘opacity’ percentage of the form.  This is useful for creating a screen overlay that forces the entire screen to go modal (like some web pages).  There is more about doing this here.

Opacity or TransparencyKey

Also, the transparency key and the opacity do not interact with each other.  Any color set in the TransparencyKey property is 100% see-through.  So for this example, just leave the opacity at it’s default.

What I wanted was not the entire form to be transparent but only portions so I could create a ‘cool’ user interface much like the media player skins.  To do this you’ll create an image that contains the masked and unmasked  portions and set the TransparencyKey property of the form to the color that will be see-thru.
Start by creating an image in your drawing program that at least outlines the shape your form.  Something like this for example:

transparency mask

Note that this embedded image is a gif, and even though that supposed to work, it didn’t.  I had some luck with a bmp format, but eventually I gave up and used a png file.  The png8, png24, and png32 all worked for me, so I stuck with png8 because it produced the smallest file.

I tried MSPaint with mixed results.  Eventually I created a file with Adobe Fireworks and exported to PNG using an alpha transparency.  This will work fine, but indexed transparencies will not.

Step 2

According to MS documentation, you should be able to just set the background image of the form to the shape graphic you created and then set the transparencykey to the correct color (maroon in the example above).  For 32-bit color insert this code somewhere before the rendering of the form is complete:

private void OddShapeForm_Load(object sender, EventArgs e)
{
    System.Drawing.Bitmap img = new System.Drawing.Bitmap("png8a.png");
    Color color = img.GetPixel(0, 0);
    img.MakeTransparent(color);
    this.BackgroundImage = img;
    this.TransparencyKey = color;
    this.BackColor = color;
}

There’s a benefit to having the background image set in the code anyway, as it make the form easier to see (I think).  When you draw your image to use as a mask, it’s probably better not to use white for the transparent color.  I did this initially, but found if the CLR cannot properly read the graphic format of the file, it often thinks the color is white anyway.  So you may have weird areas turning transparent on you.

Step 3

Fix any controls gone awry.  After these first two steps I found that the controls on my form (ComboBoxes and the basckground of Labels) were also transparent.  These extra ‘holes’ in my form were driving me crazy!  And no, they were not the same color as the transparency.  I did discover they could be fixed by changing the background color from ‘Control’ to ‘transparent’.

System color Control

The former is under ‘System’ colors and the latter under ‘Web’.   Like so:

web color transparent

You will also find that if a label or other control falls into the transparent area (after setting as above), it will have an opaque color (maroon in this case) for the portion that falls out.

The biggest hiccup in these steps is getting the image correct.  I found PNG to be the least picky format.  But a lot will depend on your graphics editor.  Photoshop will probably work well.  I have read that simple transparencies will come through as transparent, but I didn’t have Photoshop to check it with.  Although there is an online version of Photoshop now (http://photoshop.com).  A little experimentation with a simple two color graphic and a few simple controls on your form before you begin the real interface work may go a long way to avoid frustration.

Good luck!

One last thing, I am using VMWare workstation, so I don’t believe the graphics card or your physical hardware are going to affect the outcome, beyond what you can see in the software settings.