Monday, October 5, 2009

Silverlight 3 Borders and Drop Shadow

One of the reasons I use Silverlight and RIA Services is for rapid application development. I am admittedly not a front-end GUI developer. One of the main reasons is the details. Yeah  can still rock some CSS/HTML some killer XML and etc. But you ask be to create a button and make it look good, I'm fired. Silverlight 3 and for that matter all versions of Silverlight bring the realm of front-end development back into my context. One of the neat tricks I learned recently was how to simply add a drop show effect. So for the hours of time we used to spend making these effects it now simply takes a line of XAML to get the effect. Here is an example of the code required. (I am using Silverlight 3 with RIA services)


                            <textbox height="25" style="color: red;" text="Enter a Product Id" width="350" x:name="txt_ProductId">
                                <textbox.effect>
                                    <dropshadoweffect></dropshadoweffect>
                                </textbox.effect>
                            </textbox>


With this you get the full effect of having a drop shadow matching whatever Silverlight tool you happen to be using. In this case obviously a text box but I have used it on buttons, data grids, panels and even canvases. I am going to working on maintaining that effect on button clicks next. I'll keep you updated.

No comments: