Image Shadow UserControl for ASP.NET 2.0

• Download source code - 4.28 KB

Introduction

This ASP.NET 2.0 UserControl will add a shadow to an image on your webpage (see the sample image above).

Background

Recently, I was developing a web-shop for a customer who wanted a shadow on the product images, to give them a more appealing look. Unfortunately, no ASP.NET 2.0 image control supports the drop shadow feature. So, I started searching the web, and stumbled upon Brian Williams’ great tutorial Onion Skinned Drop Shadows. Immediately, I realized that this was what I was looking for. Thanks Brian for this beautiful tutorial.

When I read the features listed below:

• Automatically expand and contract to fit any object, without specifying widths.
• Allow you to modify the shadow depth with no image manipulation.
• Render the same across all browsers without cutting any corners.

I knew that this could be a great user control for any website. So, I fired up Visual Studio and started coding. The result was a user control with only six properties:

• ImageUrl
• Width
• Height
• Style
• OffsetX
• OffsetY

The ImageUrl property is where you set the virtual path of your image. The width and height properties are optional. With the Style property, you can add styles to your image – margin or borders etc. The OffsetX and OffsetY are the width and height of the shadow.

Using the Code

• Download the source code and unzip it.
• Add the two files ShadowImage.ascx and ShadowImage.ascx.vb and the image folder to your project.
• Drag the control from your Solution Explorer to an ASPX page in Design mode.
• Switch to code view and add attributes like shown below.
• Press F5 and run your solution.

<uc1:shadowimage id="ShadowImage1" runat="server" 
         Width="160" ImageUrl="myimage.jpg" 
         OffsetX="8" OffsetY="8" 
         Style="border:2px solid #666666" />

Points of Interest

This control only supports images – that was what I needed. If you want to make it clickable, just substitute the image with an ImageButton and raise a public event when it’s clicked. You could easily add a shadow to any object, as it automatically expands and contracts to fit any object, without specifying widths. You should also visit Brian Williams’s tutorial, Onion Skinned Drop Shadows, for more details and extra shadow modes...