Silverlight development tips (part 2) - Creating a vista like window shadow
As part of developing our Silverlight UI layer, I wanted to have our windows display a shadow like in Windows Vista. Searching the internet I found several methods of doing it, and most of them looked too complicated. I wanted to have a simple XAML file that I can easily adjust to different sizes.
One of the things that are very easy to overlook is the opacity value that every Silverlight color can have. This allows to create a simple gradient fill which combines opacity in it, Like in the following XAML code:
<
Rectangle Width="147" Height="25" RadiusX="0" RadiusY="0" Canvas.Left="25" x:Name="ShadowT"><Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#009D9494" Offset="0"/>
<GradientStop Color="#FF000000" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
Notice that the above rectangle has a gradient which has two colors, which are #009D9494 and #FF000000. The first two characters in the color format are the opacity, so the gradient fill of the rectangle will be partially transparent.
What I have done to create the Vista Window shadow was to create 4 ellipses and 4 rectangles which are organized in such a way that they create a rectangle with gradient opacity on its edges. I have used the XAML in a control which updates the sizes of the elements according to its own size. This gave me the flexibility of adapting the shadow size to different window sizes.
You can see the XAML file, in our SVN repository here:
http://72.55.165.182/svn/Public/Core/trunk/Gizmox.WebGUI.Client.Silverlight.Themes.Default/Shadow.xaml