Skip Navigation LinksHome / Tips / View Tip

Using Blur and DropShadow effects in Silverlight 3

+ Add to SilverlightShow Favorites
4 comments   /   posted by Nikolay Raychev on Apr 02, 2009
(0 votes)
Categories: General
Silverlight 3 comes with two built in Pixel Shaders:

We have the following image:



We want to blur it:

<Image Width="300"   
    Source="http://terraristic.net/photos/  
    Brachypelma_albiceps/Brachypelma_albiceps_1.jpg"> 
    <Image.Effect>
        <BlurEffect Radius="8"></BlurEffect>
    </Image.Effect>
</Image> 

We have the following result:



Note the Radius parameter. The bigger the radius is, the more blurred the picture is.

Now let's make a shadowed picture:

<Image Width="300"   
    Source="http://terraristic.net/photos/  
    Brachypelma_albiceps/Brachypelma_albiceps_1.jpg"> 
    <Image.Effect>
        <DropShadowEffect BlurRadius="30" Color="Gray"
            Direction="-45" Opacity="0.5" ShadowDepth="20">
        </DropShadowEffect>
    </Image.Effect> 
</Image> 

The result:

 

The DropShadow effect has several parameters:
  • BlurRadius - the bigger the radius is, the more blurred the shadow is.
  • Color - the shadow color.
  • Direction - an angle specifying the direction of the shadow. If you set it to zero the shadow will fall on the right side.
  • Opacity - the shadow opacity.
  • ShadowDepth - it specifies how far (deep) from the picture the shadow will appear.

You can define your own Pixel Shaders using a special language called HLSL. But this is beyond the scope of this tip.

Share


Comments

Comments RSS RSS
  • RE: Using Blur and DropShadow effects in Silverlight 3  

    posted by Thanigainathan on Jun 15, 2009 02:05

    Nice article,

    Thanks,

    Thani           

  • RE: Using Blur and DropShadow effects in Silverlight 3  

    posted by Hasan KESER on Sep 18, 2009 09:37
    can we use both of these effects ?I tried to use both of them ,but silverlight did not allow it.
  • RE: Using Blur and DropShadow effects in Silverlight 3  

    posted by Andean on Sep 26, 2009 23:11
    Excellent article !!  I saw another article doing pretty much the same with 3 or 4 borders !  and you just showed how easy is to do this with a lot less of XAML code.   Thanks so much !   :-) 
  • RE: Using Blur and DropShadow effects in Silverlight 3  

    posted by nikolayraychev on Oct 29, 2009 15:56

    Sorry for the late reply, Hasan.

    I made a little research and found out that Silverlight 3 does not support multiple effects. But you can easily work around this:

    <Border> 
        <Image   
            Width="300"      
            Source="http://terraristic.net/photos/  
                Brachypelma_albiceps/Brachypelma_albiceps_1.jpg"> 
            <Image.Effect> 
                <DropShadowEffect BlurRadius="30" Color="Gray"   
                    Direction="-45" Opacity="0.5" ShadowDepth="20">  
                </DropShadowEffect> 
            </Image.Effect> 
        </Image> 
        <Border.Effect> 
            <BlurEffect Radius="8"></BlurEffect> 
        </Border.Effect> 
    </Border> 

    I hope that this is helpful for you.

    Andean, thanks for the nice words :)

Add Comment

 
 

   
  
  
   
Please add 7 and 1 and type the answer here: