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.

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.