Introduction

For a project I'm working on, I had to create transparent fuzzy drop shadows similar to those found in various Windows applications. Want to have them too? Then read on! Or just download the sources...

Background

Unfortunately, there's no support at all for these drop shadows in Visual Studio 2005/WinForms, but there is in WPF! Fortunately, I only needed panels with shadows and shadows for rectangular shapes are easy. I just took the method I use for web pages and applied it to WinForms. The trick is as follows: Using strategically placed and tiled pictures of a shadow, we can simulate a shadow effect. When transparent PNGs are used, it looks just like the real thing. The image parts we need are outlined in red below:

Normally, I'd start with creating these images. Luckily for you, I've already done it and have provided them with the source. Now it's time to start coding!

The project

Go to File > New > Project and select Class Library. Call it ShadowPanel and click OK. Now rename class1.cs to ShadowPanel.cs. That's the file we'll work with. It's always handy to create a test project. So, right click the solution in the solution explorer and select Add > New Project. Pick Windows Application this time and call it ShadowPanelTest.

Properties

First, we need some properties. It would be nice to provide at least a border and a background color. So, it's time to open ShadowPanel.cs and add the following:

We can't use the original panel BackgroundColor property because that's for the entire panel, including the shadow area! So, I created a PanelColor property that defines the color for the area inside the shadow. About those references to System.Drawing and System.Drawing.Drawing2D: You might have to add them manually by right-clicking on References in the Solution Explorer and selecting them in the list.

Images

Now for the images that we can use to actually draw the shadow. You can download them with the sources if you didn't do this already. Create a folder in the project called Images and add the tshadowXXXX.png files. Select them in the solution explorer and change the Build Action to Embedded Resource. That way, the files will be compiled into the DLL and you won't need to distribute them with your application.

I added the images as static in the code; kudos go to Remco Schrijvers for proposing this. I also added two private members to describe the size of the images -- they are 5×5 pixel images -- and the offset (margin) of the shadow from the left and top. Please add the following code to the ShadowPanel class:

I think the code says it all. Just add the following after Graphics.g = e.Graphics;:

// Create tiled brushes for the shadow on the
// right and at the bottom.
TextureBrush shadowRightBrush =
new TextureBrush(shadowRight, WrapMode.Tile);
TextureBrush shadowDownBrush =
new TextureBrush(shadowDown, WrapMode.Tile);
// Translate (move) the brushes so the top or
// left of the image matches the top or left of the
// area where it's drawed. If you don't understand why
// this is necessary, comment it out.
// Hint: The tiling would start at 0,0 of the control, so
// the shadows will be offset a little.
shadowDownBrush.TranslateTransform(0, Height - shadowSize);
shadowRightBrush.TranslateTransform(Width - shadowSize, 0);
// Define the rectangles that will be filled with the brush.
// (where the shadow is drawn)
Rectangle shadowDownRectangle = new Rectangle(
shadowSize + shadowMargin, // X
Height - shadowSize, // Y
Width - (shadowSize * 2 + shadowMargin),// width (stretches)
shadowSize // height
);
Rectangle shadowRightRectangle = new Rectangle(
Width - shadowSize, // X
shadowSize + shadowMargin, // Y
shadowSize, // width
Height - (shadowSize * 2 + shadowMargin) // height (stretches)
);
// And draw the shadow on the right and at the bottom.
g.FillRectangle(shadowDownBrush, shadowDownRectangle);
g.FillRectangle(shadowRightBrush, shadowRightRectangle);

You can add ShadowPanel to the test project by opening the Form1.cs designer. If you build the project once, ShadowPanel should appear in the toolbox. Just drag it to the form and run it. You'll hopefully get the following result:

By the way: I set my form's background color to white, so it might look different for you.

Points of interest

Of course, I won't stop you from adding more functionality. Please do! Also, let me know if you appreciated this tutorial!

History

June 17th, 2007 - First version

June 30th, 2007 - Added OnResize

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

You can do it in several ways. If you're a beginner or intermediate web developer (and not a CSS guru) i'd recommend starting out with a table for it as it's simple and works also from WYSIWYG editors. Here is a very brief explanation:

Create a HTML table with 3 rows and 3 columns, set the width of the top and bottom row and the left and right column to 5 pixels. The middle cell shouldn't have size set, because we want it to auto-fill. Put the corner images in the corner cells, set the side and bottom images as the background image of the respective cells.

The images from the download will work fine, but not in Internet Explorer 6 or below, as it didn't support transparent PNG's correctly.

Do you need more information? Sources? There are also articles about using CSS to create this effect.