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:
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>
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>