Follow Me on Instagram Subscribe via RSS Feed

Images with Rounded Corners and Drop Shadows in Silverlight

September 8, 2010

Silverlight lets you do many great little effects with very little effort.  However, sometimes you need to rethink your approach when you want to use a few of these things together.

This happened to me the other day when I wanted to display an image, round the corners, and then add a drop shadow.

It sounded simple enough.  So let’s look at how you would accomplish each of these independently.

Rounding Corners

Silverlight includes a nice little clipping feature on it’s UI elements that let you modify the shape of the element.  Some of the options are using rectangles, ellipses, custom paths, and a few others.  For our case, we only need to use the rectangle for clipping.  We can do this because the rectangle includes properties for rounding the corner.

So to round the corners of our image, it looked something like this:

                <Image VerticalAlignment="Center" 
                       HorizontalAlignment="Center" 
                       Stretch="None" 
                       Source="Jellyfish.jpg">
                    <Image.Clip>
                        <RectangleGeometry RadiusX="5"
                                           RadiusY="5"
                                           Rect="0,0,150,113"/>
                    </Image.Clip>
                </Image>
You will see that we added a <Image.Clip> to our image that defines our rounded image.  Here is the comparison between the original and our rounded image:
 
image
 

Drop Shadow

Now that we have rounded the corners of our image, lets take a step back and look at adding a drop shadow.  Again, Silverlight makes this rather straight forward and this effect can be added to any UI element.

               <Image VerticalAlignment="Center" 
                      HorizontalAlignment="Center" 
                      Stretch="None" 
                      Source="Jellyfish.jpg">
                    <Image.Effect>
                        <DropShadowEffect />
                    </Image.Effect>
                </Image>

The DropShadowEffect has some properties (ie. Opacity, ShadowDepth, BlurRadius) that can be tweaked to allow you to dial in the look you are after.  However, out of the box, this is what you get:

image

Adding Rounded Corners and a Drop Shadow

So I know what you are thinking: “we can do each separately, so let’s just add the two and we are good to go.” I thought the same thing.  However, if you add a Clip and Effect/DropShadow to an image, it comes out looking identical to the image with rounded corners.

So why does this happen?  Well it turns out to be quite simple.  The clip is simply clipping off your drop shadow effect.  Not exactly what we were looking for.  So how do we get around this?

Sometimes it takes stepping back from a problem and taking a different approach.  After many (and it was quite a few actually) failed attempts, I had to do just that.  Remember the great little rectangle we used for clipping, because it has rounded corners?  Well, instead of using it for clipping, I started with it as my main object instead of an image.

If we create a rectangle with rounded corners, we can add a drop shadow effect and get the look we are looking for.

                <Rectangle VerticalAlignment="Center" 
                           HorizontalAlignment="Center" 
                           RadiusX="5"
                           RadiusY="5"
                           Width="150"
                           Height="113"
                           Fill="Blue">
                    <Rectangle.Effect>
                        <DropShadowEffect Opacity="0.5"/>
                    </Rectangle.Effect>
                </Rectangle>

So with this little bit of XAML, we get the following:

image

So we have rounded corners and a drop shadow.  If only it was our image instead of a blue rectangle we would be in business.  So enters another cool little item in Silverlight, the ImageBrush.  With the ImageBrush you can use an image for you fill.  This works for any UI element, whether it is a rectangle, button, or even text.  So let’s modify our code and use the image brush:

                <Rectangle VerticalAlignment="Center" 
                           HorizontalAlignment="Center" 
                           RadiusX="5"
                           RadiusY="5"
                           Width="150"
                           Height="113">
                    <Rectangle.Effect>
                        <DropShadowEffect Opacity="0.5"/>
                    </Rectangle.Effect>
                    <Rectangle.Fill>
                        <ImageBrush ImageSource="jellyfish.jpg"/>
                    </Rectangle.Fill>
                </Rectangle>

By applying our image using the ImageBrush we end up with the following:

image

And there you have it.  We managed to round the corners of our image and add a drop shadow.  Not exactly how I originally intended to do it, but maybe this will give you something to add to your bag of tricks.

Filed in: Random Thoughts

Leave a Reply