One of the new exciting features in Silverlight 3 is pixel shader effects. These effects can be applied to any user interface element on the Silverlight UI.
Introduction:
Pixel shader effects allow you to add effects, such as grayscale, red eye removal, pixel brightness, and shadows, to rendered objects. You can use the pixel shader effects built in with the Silverlight runtime or if you wish, you can create your own.
There are two pixel shader effects that are available in Silverlight 3 namely, DropShadowEffect and BlurEffect. You can apply only one effect directly to an element at a time. For example, you cannot apply both BlurEffect and a DropShadowEffect to the same element directly.
In the previous article (Using Pixel shader Effects in Silverlight 3), you were shown how to create a drop shadow effect using XAML code. In this article you will see how to achieve this using code behind.
To start with, let us create a new Silverlight 3 application using Visual Web Developer 2008
The MainPage.xaml will be open by default. The code in this XAML file will be seen as follows:
<UserControl x:Class="SilverlightAppNew.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:DesignWidth="640" d:DesignHeight="480">
<Grid x:Name="LayoutRoot">
</Grid>
</UserControl>
Just as in the previous article, you will add a StackPanel control from the Toolbox into the XAML code between the <Grid></Grid> tags:
<UserControl x:Class="SilverlightApp.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:DesignWidth="640" d:DesignHeight="480">
<Grid x:Name="LayoutRoot">
<StackPanel>
</StackPanel>
</Grid>
</UserControl>
The StackPanel is a layout control that allows you to organize child controls in a horizontal or vertical fashion.
Next, add a button control between the StackPanel tags and configure it as shown below:
<UserControl x:Class="SilverlightApp.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:DesignWidth="640" d:DesignHeight="480">
<Grid x:Name="LayoutRoot">
<StackPanel>
<Button Content="New Pixel Effect Demo"
Width="200" Margin="5" Background="Orchid">
</Button>
</StackPanel>
</Grid>
</UserControl>
Now within the Button control content, using Intellisense, select the Click event. You will be prompted whether to create a new Event handler. When you double click on it, an event handler would be generated both in the XAML code as well the .cs code (code behind). When you open the .cs file, you will see the empty autogenerated event handler.
private void Button_Click(object sender, RoutedEventArgs e)
{
}
Now, you need to write code to generate the drop shadow effect. To access the DropShadowEffect class within your code, you will require to reference the System.Windows.Media.Effects namespace. Hence, add a using statement as follows:
using System.Windows.Media.Effects;
Then within the event handler, add the following code:
private void Button_Click(object sender, RoutedEventArgs e)
{
DropShadowEffect deffect = new DropShadowEffect();
deffect.Color = Colors.Magenta;
deffect.Direction = 320;
deffect.ShadowDepth = 25;
deffect.BlurRadius = 5;
deffect.Opacity = 0.5;
((Button)sender).Effect = deffect;
}
This code will not only create a new instance of the DropShadowEffect class but also set its properties. Later, you are also assigning this instance to the Effect property of the Button. Thus through the code behind, you have achieved what had been earlier done only through XAML.
When you finally run the application and click on the button, you will see the output showing the button with the dropshadow effect.
Conclusion: This article explored how to use pixel shader effects in Silverlight 3.