January 27th, 2009

Resizeable Silverlight shadow effects

The Effects filter in Expression Design can not be used for Silverlight as they are not supported in the current Silverlight plug-in (SL2).

You can use a PNG image of a shadow to get around this, but this can cause problems if you require to re-size the object the shadow sits behind, especially if you need to re-size it non-proportionately.

By using a grid of 9 boxes in Blend we can create a perfect shadow for any rectangular shape that will re-size and maintain the shadows corners and keep a constant effect.

To start with we need to create a grid 300px by 300px with a rectangle inside. This rectangle needs to be set to stretch both horizontally and vertically. Next we need to set this rectangle’s margins to 20,20,20,20. Finally we will give this rectangle a solid colour of black set to 65%.

Next we will create 4 more rectangles inside the same grid. We need to arrange each of these 4 rectangles so that our first rectangle is surrounded above, below, to the left and to the right. We will do this by arranging the 4 rectangles as follows;

Each of these 4 rectangles are aligned to stick to the edge of the grid they connect with. They are also fixed to a width or height of 20 pixels depending on which side they sit on.

The next stage is to place 4 more rectangles of 20 x 20 pixels, one in each corner of our grid. Each of these rectangles are aligned to stick to their corner.

Notice at this point we can change the pixel dimensions of our grid and all the edges and corner squares retain their shape without distorting.

Our next step is to colour our rectangles up to give us our shadow effect. Each of our rectangles running along an edge will require a linear gradient going from black at 65% alpha to black 0% alpha fading towards the edge of the grid.

Our corner squares are going to require a little more work. Each corner will require a radial gradient using the same colours we used in the last 4 rectangles. But each radial gradient needs to be twice the size of the corner rectangle and offset to give a quarter circle shape.

This concludes creating the shadow effect.

The only thing left to do is to make our grid behave based on another object, like a popup window. We can now offset our grid to position the shadow, the example below offsets the grid by setting the Margin to 5, 5, -12, -12.