Thursday, August 7, 2008

How to create shadow

Shadow effect gives 3D experience to the user and it greatly increases UX (user experience) during browsing. Unlike WPF, Silverlight does not have a pre-defined object that can create the effect for you. So to create shadow, you may need to create a shape and color it with black.

clip_image002

Let’s look at the MENU Bar again, when mouse hover over, the menu item will raise and leave a shadow below it. (“About Us”)

The shadow is created using Ellipse. XAML looks like this:

<Ellipse Height="4" x:Name="ellipse" Width="50" Opacity="0.5" RenderTransformOrigin="0.5,0.5" StrokeThickness="0" Margin="0,0,0,0" VerticalAlignment="Stretch">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="#00000000"/>
<GradientStop Color="#FFFFFFFF" Offset="1"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>



*Noticed that I am using a RadialGradientBrush to create the fading effect at the outer area.

No comments: