Image Blur and Shadow in Silverlight

2011-09-07

Silverlight Pixel shaders can manipulate pixels for different effects. There are different shaders: blur and drop shadow.

The following is a blur sample:

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

    <Grid x:Name="LayoutRoot" Background="White"> 
        <StackPanel Orientation="Horizontal" > 
        <Image Source="/SilverlightApplication2;component/Images/Koala.jpg" Width="200" Margin="3" > 
            <Image.Effect> 
                <BlurEffect Radius="0" /> 
                </Image.Effect> 
            </Image> 
        <Image Source="/SilverlightApplication2;component/Images/Koala.jpg" Width="200" Margin="3" > 
            <Image.Effect> 
                <BlurEffect Radius="5" /> 
            </Image.Effect> 
        </Image> 
        <Image Source="/SilverlightApplication2;component/Images/Koala.jpg" Width="200" Margin="3" > 
            <Image.Effect> 
                <BlurEffect Radius="10" /> 
            </Image.Effect> 
        </Image> 
        </StackPanel> 
    </Grid> 
</UserControl>

The screen result:

slblur

The following is drop shadow sample:

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

    <Grid x:Name="LayoutRoot" Background="White"> 
        <StackPanel Orientation="Horizontal" > 
            <Image Source="/SilverlightApplication2;component/Images/Koala.jpg" Width="200" Margin="3" > 
                <Image.Effect> 
                    <DropShadowEffect Color="Green"    Direction="-110" /> 
                </Image.Effect> 
            </Image> 
        </StackPanel> 
    </Grid> 
</UserControl>
slshadow

Every time only one shader can be applied to an element (object), How about we want to both a blur and a drop shadow effect for the same image ?

We can use nesting controls and apply separate shader to each control:

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

    <Grid x:Name="LayoutRoot" Background="White"> 
        <Canvas> 
            <Canvas.Effect> 
                <DropShadowEffect  Color="Green"    Direction="-110"> 
                </DropShadowEffect> 
            </Canvas.Effect>

            <Image Source="/SilverlightApplication2;component/Images/Koala.jpg" Width="200" Margin="3" > 
                <Image.Effect> 
                    <BlurEffect  Radius="10" /> 
                </Image.Effect> 
            </Image> 
        </Canvas > 
    </Grid> 
</UserControl>
slblur1