Silverlight- DropShadowEffect Example

In this article we will be seeing how to create Silverlight DropShadowEffect using Visual studio 2010.

Pixel shader effects in Silverlight allows you to add effects, such as gray scale, red eye removal, pixel brightness, and shadows, to rendered objects. There are two types of Pixel Shader effects in Silverlight. They are BlurEffect and DropShadowEffect. In this we will be seeing how to about DropShadowEffectand its properties.

Namespace: System.Windows.Media. Effects

Assembly: System.Windows

DropShadowEffect:

DropShadowEffectis used to apply a shadow behind the object. It is defined by the following properties.

• BlurRadius.
• Direction.
• Color.

BlurRadius:

This property is used to specify the amount of blur to apply to the shadow.

Color:

This property is used to specify the color ofthe shadow.

Direction:

This property is used to specify the angle at which the shadow is cast.

Steps Involved:

Creating a Silverlight Application:

1. Open Visual Studio 2010.
2. Go to File => New => Project.
3. Select Silverlight from the Installed templates and choose the Silverlight Application template.
4. Enter the Name and choose the location.
5. Click OK.
6. In the New Silverlight Application wizard check the "Host the Silverlight Application in a new Web site".
7. Click OK.

Creating the UI:

Open MainPage.xaml file and replace the code with the below one.

<UserControl x:Class="SilverlightDropShadowEffect.MainPage"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 mc:Ignorable="d"
 d:DesignHeight="300" d:DesignWidth="400">
<Canvas Height="200" Width="200" Background="White">
<TextBlock Text="Drop Shadow Effect" FontFamily="Arial" FontSize="20">
<TextBlock.Effect>
<DropShadowEffect BlurRadius="3" Direction="-100" Color="Gray"></DropShadowEffect>
</TextBlock.Effect>
</TextBlock>
</Canvas>
</UserControl>

Testing the solution:

1. Build the solution.
2. Hit ctrl+F5.