In Silverlight, you can use visual effects to enhance the look and design of your application. There are multiple techniques for creating visual effects in Silverlight. These techniques include built-in pixel shader effects, such as BlurEffect and DropShadowEffect, transforms and gradient brushes to create the illusion of reflection and mirror effects, and custom pixel shaders. This QuickStart describes how to use blur effects, shadow effects, reflection and mirror effects, and introduces custom pixel shaders.

This QuickStart contains the following sections:

Pixel Shader Effects

Pixel shader effects allow you to add effects, such as gray scale, red eye removal, pixel brightness, and shadows, to rendered objects. Pixel shader effects use an algorithm to alter how pixels are displayed. There are two built-in pixel shader effects in Silverlight: BlurEffect and DropShadowEffect. You can also create custom pixel shader effects, which is discussed at the end of this QuickStart.

You can apply a pixel shader effect to an object by setting the Effect property of UIElement to the desired effect. The Effect property can be set in either XAML or in the code-behind. Only one effect and be applied to an object at a time.

For more information about Pixel Shaders, see the Pixel Shader Effects topic in MSDN.

Blur Effects

BlurEffect is a pixel shader effect that causes an object to look as if it were out of focus.

The Radius property specifies the amount of blur to apply to the object. A value of 0 applies no blur effect to the object. An increasingly larger value makes the object more blurry. The default value is 5.

The following example shows how to apply a BlurEffect to a TextBlock and to a Button. The effect is created in XAML, though you could create the same effect in the code-behind. Use the slider in this example to experiment with different Radius values.

Drop Shadow Effects

DropShadowEffect is a pixel shader effect that applies a shadow behind an object. The shadow is positioned at a specified distance from the object and at a specified angle.

The ShadowDepth property sets the distance between the object and the shadow that is cast. Increasing this value positions the shadow effect further away from the object. The default value is 5.

The Direction property sets the angle at which the shadow is cast. The valid range of values is from 0 to 360. A value of 0 places the shadow directly to the right of the object. Increasing the value causes the shadow to rotate counter-clockwise around the object. So, directly up from the object is 90. The default value is 315.

The DropShadowEffect has a number of other properties that can be tweaked to change how the shadow is rendered. The BlurRadius property blurs the shadow in a similar manner as BlurEffect. The Color property specifies the color of the shadow. The Opacity property specifies the opacity of the shadow. A value of 0 indicates that the shadow is completely transparent and a value of 1 indicates the shadow is completely opaque.

The following example creates a TextBlock and applies a DropShadowEffect effect. The ShadowDepth is set to the default value of 5, the Direction is set to the default value of 315, the BlurRadius is set to the default value of 5, and the Color is set to black. Use the sliders in this example to experiment with different property values.

Reflection and Mirror Effects

Creating reflection and mirror effects is a little different than creating blur and shadow effects because these effects are not built into Silverlight. However, you can create reflection and mirror effects by using features present in Silverlight.

To create a mirror effect, create two identical visual elements and place them in a Canvas side-by-side. On the second object, add a ScaleTransform and set the ScaleY property to -1. This will flip the second object in relation to the first object, but will keep the size the same. Then set the Canvas.Top property on the second object to position it next to the original object.

To create a reflection effect on a TextBlock, you can use a LinearGradientBrush on the Foreground of the second object to gradually fade the color of the text and give it the illusion of reflection. To create a reflection effect on a UIElement, such as a Button or an Image, use a LinearGradientBrush on the OpacityMask.

The following example creates a mirror and reflection effect on a TextBlock. Use the sliders in this example to experiment with different property values.

The following example creates a mirror and reflection effect on an Image. Use the sliders in this example to experiment with different property values.

Custom Pixel Shader Effects

You are not limited to only blur and shadow pixel shader effects in Silverlight. You can create your own custom pixel shader effects. To create a custom pixel shader effect you will need to create the shader in High-Level Shader Language. The pixel shader is then compiled into a .ps file and included in your Silverlight application.

For an example of creating a custom pixel shader, see the Pixel Shader Effects topic on MSDN. For information about High-Level Shader Language, see the Programming Guide for HSLS and the DirectX SDK.

See Also

• Pixel Shader Effects
• 3-D Effects (Perspective Transforms)
• Transforms
• Programming Guide for HSLS