Silverlight BlurEffect Example

In this article we will be seeing how to create Silverlight BlurEffect 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 about BlurEffect and its properties.

Namespace: System.Windows.Media. Effects

Assembly: System.Windows

BlurEffect:

BlurEffect is used to represent an effect that we can apply to an object that simulates looking at the object through an out-of-focus lens. It is defined by the Radius property.

Radius:

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

Without BlurEffect:

<Canvas Height="200" Width="200" Background="white">

        <Rectangle Height="50" Width="50" Fill="Orange" Canvas.Left="25" Canvas.Top="75"></Rectangle>

        <Rectangle Height="50" Width="50" Fill="White" Canvas.Left="75" Canvas.Top="75"></Rectangle>

        <Rectangle Height="50" Width="50" Fill="Green" Canvas.Left="125" Canvas.Top="75"></Rectangle>

</Canvas>

With BlurEffect:

                            

<Canvas Height="200" Width="200" Background="white">

        <Canvas.Effect>

            <BlurEffect Radius="120"></BlurEffect>

        </Canvas.Effect>    

        <Rectangle Height="50" Width="50" Fill="Orange" Canvas.Left="25" Canvas.Top="75"></Rectangle>

        <Rectangle Height="50" Width="50" Fill="White" Canvas.Left="75" Canvas.Top="75"></Rectangle>

        <Rectangle Height="50" Width="50" Fill="Green" Canvas.Left="125" Canvas.Top="75"></Rectangle>

</Canvas>

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 following.

<UserControl x:Class="SilverlightBlurEffect.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">

        <Canvas.Effect>

            <BlurEffect Radius="120"></BlurEffect>

        </Canvas.Effect>    

        <Rectangle Height="50" Width="50" Fill="Orange" Canvas.Left="25" Canvas.Top="75"></Rectangle>

        <Rectangle Height="50" Width="50" Fill="White" Canvas.Left="75" Canvas.Top="75"></Rectangle>

        <Rectangle Height="50" Width="50" Fill="Green" Canvas.Left="125" Canvas.Top="75"></Rectangle>

    </Canvas>

</UserControl>

Testing the solution:

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