Recommended

Skip Navigation LinksHome / Tips / View Tip

Using Blur and DropShadow effects in Silverlight 3

+ Add to SilverlightShow Favorites
5 comments   /   posted by Nikolay Raychev on Apr 02, 2009
(2 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 :)

  • RE: Using Blur and DropShadow effects in Silverlight 3  

    posted by LawBot on Mar 17, 2010 09:56

    There is one thing to mention if you want to apply visually more than one effect on a certain control (regarding the comment from nikolayraychev).

    The visual effect you set on a container control, like a border, canvas or a grid, does only affect the children of the specific container if you set the background of the container to "no brush".

    For the german audience I recently published a demo video in german language on my channel LawBot on Silverlight on vimeo.com on how to build a 3D text effect on a Textblock control where I used this technique.

    Best regards,

    M. (LawBot/SilverLaw)

Add Comment

 
 

   
  
  
   
Please add 6 and 4 and type the answer here:

Help us make SilverlightShow even better and win a free t-shirt. Whether you'd like to suggest a change in the structure, content organization, section layout or any other aspect of SilverlightShow appearance - we'd love to hear from you! Need a material (article, tutorial, or other) on a specific topic? Let us know and SilverlightShow content authors will work to have that prepared for you. (hide this)