Silverlight 3: Effects Baby!

Silverlight 3 is out of beta and here. There are plenty of things that Silverlight 2 had that were really awesome, but what kind of new things does Silverlight 3 bring to the table? Well, after some perusing over at the Silverlight site, I have found a really neat feature that we can all use to make our applications look better: effects. The really cool thing is that they can be used with any Silverlight control, and even better, you can do everything right from your XAML source.

For the release of Silverlight 3, you have 2 built-in effects to play around with: blurs and drop shadows. But, you can do a lot with just two, considering you can apply these effects to any control you choose, from a lonely text block to a complete gridview with 100 controls inside of it. You can even use the effects on images, which is even cooler.



To start with, let's see what the XAML looks like without any effects at all:

To start with, we are going to add a dropshadow effect to the first bit of text, then bind the slider to the shadow effect. To do this, we first have to add the shadow effect, which will look something like this:

As you can see, adding the drop shadow is as easy as a couple more tags. This type of effect has three properties: ShadowDepth, BlurRadius, and Color. In this case we don't need to change the color, so we only utilize two. The blur effect is even easier, with one property to handle:

As you can see, all we have to set for a blur is a Radius property, which we set for zero. Now, the savvy developer will notice that we gave our effects names. We did this for our next step, binding the sliders to the effect values. Recently, I learned how to do this within the xaml quite easily. We take the value of the slider and bind it to the property of another component:

In order to bind the slider value to the effect, you need to give it a name. Easy enough. The Path attribute of the bind is pointing to the property the value of the slider will be. Mode refers to how the binding will operate, in this case a two way binding will work just fine. To continue, we need to bind our second slider:

That will bind the blur's Radius to our slider value. If you run your application you will see that your sliders now control the two effects. But our application has one last trick, two effects on one element.

The trick is, however, that you technically only apply one effect to any element. The work around for this is to nest an element inside another that already has an effect. In this case we use a border component and put a textbox inside of that. To get the desired blurred and shadowed textbox, we apply a blur to the border, and then a shadow to the box:

It is really that easy. All you have to do is add a couple of tags, use a little bit of nesting, and you have some pretty neat little effects.

That is pretty much all I have for this tutorial. Today we have learned how to add new silverlight effects to our applications, and remember that these effects can be applied to any control. Also remember that whenever you need coding help, all you have to do is Switch On The Code.