SilverlightShow: Tip: Using Blur and DropShadow effects in Silverlight 3 Comments http://www.silverlightshow.net/ Silverlight articles, Silverlight tutorials, Silverlight videos, Silverlight samples SilverlightShow.net http://www.rssboard.org/rss-specification Argotic Syndication Framework 2008.0.2.0, http://www.codeplex.com/Argotic en-US estoychev@completit.com (Emil Stoychev) RE: Using Blur and DropShadow effects in Silverlight 3 <p>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).</p> <p>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 <strong>background</strong> of the container to "<strong>no brush</strong>". </p> <p>For the german audience I recently published a demo video in german language on my channel <a href="http://www.vimeo.com/lawbot" title="Watch the video on LawBot on Silverlight at vimeo.com" target="_blank">LawBot on Silverlight </a>on vimeo.com on how to <a href="http://www.vimeo.com/10197392" target="_blank">build a 3D text effect on a Textblock </a>control where I used this technique.</p> <p>Best regards,</p> <p>M. (LawBot/SilverLaw)</p> http://www.silverlightshow.net/items/Using-Blur-and-DropShadow-effects-in-Silverlight-3.aspx#comment3241 LawBot http://www.silverlightshow.net/items/Using-Blur-and-DropShadow-effects-in-Silverlight-3.aspx Wed, 17 Mar 2010 09:56:40 GMT RE: Using Blur and DropShadow effects in Silverlight 3 <p>Sorry for the late reply, <span id="ctl00_cphMiddle_ContentPlaceHolderContent_itemComments_dlstComments_ctl02_lblCommentAuthor"><strong>Hasan</strong>.</span></p> <p><span>I made a little research and found out that Silverlight 3 does not support multiple effects. But you can easily work around this:</span></p> <div style="border-bottom: #7f9db9 1px solid; border-left: #7f9db9 1px solid; line-height: 100% !important; background-color: white; font-family: courier new; font-size: 11px; overflow: auto; border-top: #7f9db9 1px solid; border-right: #7f9db9 1px solid;"> <table style="border-bottom: #eee 0px solid; border-right-width: 0px; background-color: #fff; margin: 2px 0px; width: 99%; border-collapse: collapse; border-top-width: 0px; border-left-width: 0px;" cellspacing="0" cellpadding="0"> <colgroup><col style="border-bottom: #f7f7f7 1px solid; padding-left: 10px; font-family: courier new; white-space: nowrap; font-size: 11px;" /></colgroup> <tbody> <tr> <td><span style="font-size: 11px;"></span><span style="color: blue;"><</span><span style="font-size: 11px;">Border</span><span style="color: blue;">></span><span style="font-size: 11px;"> </span></td> </tr> <tr> <td style="background-color: #f7f7f7;">    <span style="color: blue;"><</span><span style="font-size: 11px;">Image   </span></td> </tr> <tr> <td>        <span style="color: red;">Width</span><span style="font-size: 11px;">=</span><span style="color: blue;">"300"</span><span style="font-size: 11px;">      </span></td> </tr> <tr> <td style="background-color: #f7f7f7;">        <span style="color: red;">Source</span><span style="font-size: 11px;">="http://terraristic.net/photos/  </span></td> </tr> <tr> <td>            Brachypelma_albiceps/Brachypelma_albiceps_1.jpg"<span style="color: blue;">></span><span style="font-size: 11px;"> </span></td> </tr> <tr> <td style="background-color: #f7f7f7;">        <span style="color: blue;"><</span><span style="font-size: 11px;">Image.Effect</span><span style="color: blue;">></span><span style="font-size: 11px;"> </span></td> </tr> <tr> <td>            <span style="color: blue;"><</span><span style="font-size: 11px;">DropShadowEffect </span><span style="color: red;">BlurRadius</span><span style="font-size: 11px;">=</span><span style="color: blue;">"30"</span><span style="font-size: 11px;"> </span><span style="color: red;">Color</span><span style="font-size: 11px;">=</span><span style="color: blue;">"Gray"</span><span style="font-size: 11px;">   </span></td> </tr> <tr> <td style="background-color: #f7f7f7;">                <span style="color: red;">Direction</span><span style="font-size: 11px;">=</span><span style="color: blue;">"-45"</span><span style="font-size: 11px;"> </span><span style="color: red;">Opacity</span><span style="font-size: 11px;">=</span><span style="color: blue;">"0.5"</span><span style="font-size: 11px;"> </span><span style="color: red;">ShadowDepth</span><span style="font-size: 11px;">=</span><span style="color: blue;">"20"</span><span style="font-size: 11px;">>  </span></td> </tr> <tr> <td>            <span style="color: blue;"></</span><span style="font-size: 11px;">DropShadowEffect</span><span style="color: blue;">></span><span style="font-size: 11px;"> </span></td> </tr> <tr> <td style="background-color: #f7f7f7;">        <span style="color: blue;"></</span><span style="font-size: 11px;">Image.Effect</span><span style="color: blue;">></span><span style="font-size: 11px;"> </span></td> </tr> <tr> <td>    <span style="color: blue;"></</span><span style="font-size: 11px;">Image</span><span style="color: blue;">></span><span style="font-size: 11px;"> </span></td> </tr> <tr> <td style="background-color: #f7f7f7;">    <span style="color: blue;"><</span><span style="font-size: 11px;">Border.Effect</span><span style="color: blue;">></span><span style="font-size: 11px;"> </span></td> </tr> <tr> <td>        <span style="color: blue;"><</span><span style="font-size: 11px;">BlurEffect </span><span style="color: red;">Radius</span><span style="font-size: 11px;">=</span><span style="color: blue;">"8"</span><span style="font-size: 11px;">></span><span style="color: blue;"></</span><span style="font-size: 11px;">BlurEffect</span><span style="color: blue;">></span><span style="font-size: 11px;"> </span></td> </tr> <tr> <td style="background-color: #f7f7f7;">    <span style="color: blue;"></</span><span style="font-size: 11px;">Border.Effect</span><span style="color: blue;">></span><span style="font-size: 11px;"> </span></td> </tr> <tr> <td><span style="color: blue;"></</span><span style="font-size: 11px;">Border</span><span style="color: blue;">></span><span style="font-size: 11px;"> </span></td> </tr> </tbody> </table> </div> <p><span>I hope that this is helpful for you.</span></p> <p><span id="ctl00_cphMiddle_ContentPlaceHolderContent_itemComments_dlstComments_ctl04_lblCommentAuthor"><strong>Andean</strong>, thanks for the nice words :)</span></p> http://www.silverlightshow.net/items/Using-Blur-and-DropShadow-effects-in-Silverlight-3.aspx#comment2597 nikolayraychev http://www.silverlightshow.net/items/Using-Blur-and-DropShadow-effects-in-Silverlight-3.aspx Thu, 29 Oct 2009 15:56:53 GMT RE: Using Blur and DropShadow effects in Silverlight 3 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 !   :-) http://www.silverlightshow.net/items/Using-Blur-and-DropShadow-effects-in-Silverlight-3.aspx#comment2407 Andean http://www.silverlightshow.net/items/Using-Blur-and-DropShadow-effects-in-Silverlight-3.aspx Sat, 26 Sep 2009 23:11:46 GMT RE: Using Blur and DropShadow effects in Silverlight 3 can we use both of these effects ?I tried to use both of them ,but silverlight did not allow it. http://www.silverlightshow.net/items/Using-Blur-and-DropShadow-effects-in-Silverlight-3.aspx#comment2365 Hasan KESER http://www.silverlightshow.net/items/Using-Blur-and-DropShadow-effects-in-Silverlight-3.aspx Fri, 18 Sep 2009 09:37:40 GMT RE: Using Blur and DropShadow effects in Silverlight 3 <p>Nice article,</p> <p>Thanks,</p> <p>Thani           </p> http://www.silverlightshow.net/items/Using-Blur-and-DropShadow-effects-in-Silverlight-3.aspx#comment1659 Thanigainathan http://www.silverlightshow.net/items/Using-Blur-and-DropShadow-effects-in-Silverlight-3.aspx Mon, 15 Jun 2009 02:05:05 GMT