(X) Hide this
    • Login
    • Join
      • Generate New Image
        By clicking 'Register' you accept the terms of use .
        Why Register?

Tip: Using Blur and DropShadow effects in Silverlight 3

Submit Article
(5 votes)
Nikolay Raychev
>
Nikolay Raychev
Joined Mar 28, 2008
Articles:   22
Comments:   58
More Articles
5 comments   /   posted on Apr 02, 2009
Tags:   pixel-shader , blur , shadow , effects , nikolay-raychev
Categories:   General , Design
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.

That's it!


Subscribe

Comments

  • -_-

    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 !   :-) 
  • nikolayraychev

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

  • LawBot

    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

Login to comment:
  *      *       
Forgotten Password? Registration Why register?