In my last blog post I showed you how to create a mirror image as shown in Figure 1. This simple image with a reflection is a nice effect, but it does look a little flat and not very interesting just sitting directly on the user control. In this blog post you will learn how to add a background using a border, a linear gradient and a drop shadow to give this reflection a little more depth and interest to the user’s eye as shown in Figure 3.

Figure 1: A mirror image in Silverlight

Creating Gradients in Visual Studio

Gradients are pretty easy to add in Visual Studio. There is no need to go into Expression Blend. Simply click on a Grid or Border control, then go to the Properties Window and drop down the arrow next to the Background property as shown by callout #1 in Figure 2. You can then select the 3rd icon from the left just above color palette (callout #2). That is the Linear Gradient brush. Then down below the color palette (callout #3) you can select whether you want a horizontal, vertical or radial type of gradient.

After that it is just a matter of setting colors for 2 or more stops of the gradient. When using colors for a gradient make sure you keep the colors very similar for each stop. Just vary by the lightness or darkness of the same color. For example having a gradient go from DarkGray to LightGray looks very good. However, going from a DarkBlue to a Yellow would not look very good.

Figure 2: You can add Linear Gradients right in Visual Studio

You should try creating some linear and radial gradients on the Grid of a Silverlight User Control to get a feel for how to build these visual elements. As I mentioned, keep the colors close together. The key to a good looking interface is subtlety.

Create Border around Mirror Reflection Images

The easiest method to get your mirror reflection image on a background as shown in Figure 3 is to wrap a Border control around the StackPanel. On the Border you will need to put a LinearGradientBrush on the Background and use a DropShadowEffect on the Effect property. Let’s take a look at how to build these.

Figure 3: Adding a Border, Gradient Background and Drop Shadow around your reflection will add more visual appeal

Build a DropShadowEffect

A Border control (and other controls) have an Effect property where you can add a drop shadow. I like to make a DropShadowEffect resource so I can reuse that effect in many places. Place the following XAML in your App.xaml file or resource dictionary.

<DropShadowEffect x:Key="Border.Shadow"
                  Color="Gray"
                  ShadowDepth="10"
                  BlurRadius="2" />

Build a LinearGradientBrush

Now it is time to add the Linear Gradient Brush that will be the background of our Border control. The particular gradient brush used in this sample has 5 stops in it. All are various shades of gray as shown in the XAML below.

<LinearGradientBrush StartPoint="0.5,0.0"
                      EndPoint="0.5,0.5"
                      x:Key="Border.Brush">
  <GradientStop Color="Gray"
                Offset="0" />
  <GradientStop Color="#FFA4A4A4"
                Offset="0.6" />
  <GradientStop Color="#FF969393"
                Offset="0.85" />
  <GradientStop Color="#FFC4C4C4"
                Offset="0.75" />
  <GradientStop Color="Silver"
                Offset="1" />
</LinearGradientBrush>

You will notice that the 4th stop has an offset that is less than the 3rd stop. This is what gives the whiter shade of gray that is in between the two darker grays in the background. Using this technique gives your background a depth like there is a corner in that location.

Build Style for Border

Now that you have these two resources (the gradient brush and the drop shadow) you will now build a <Style> for the Border control that we will put around the StackPanel that contains the mirror images. Here is the style I used for this sample, but feel free to modify this to suit your needs.

<Style TargetType="Border"
       x:Key="Border.Style">
  <Setter Property="Background"
          Value="{StaticResource Border.Brush}" />
  <Setter Property="Effect"
          Value="{StaticResource Border.Shadow}" />
  <Setter Property="CornerRadius"
          Value="20" />
  <Setter Property="Margin"
          Value="8,8,16,8" />
  <Setter Property="VerticalAlignment"
          Value="Top" />
</Style>

This style is created along with your other resources and then is applied to your Border control.

<Border Style="{StaticResource Border.Style}">
  ... <StackPanel> here
</Border>

Summary

Having a couple of good looking gradients in your toolbox and adding drop shadow effects to your user controls can add a lot of character to your application. Experiment with creating your own styles within Visual Studio. Yes, Expression Blend can be helpful for certain things in XAML, but Visual Studio can be used for everything done in this blog post.

NOTE: You can download the complete sample code at my website. http://www.pdsa.com/downloads. Choose Tips & Tricks, then “Add Gradient Background to Mirror Image" from the drop-down.

Good Luck with your Coding,
Paul Sheriff

** SPECIAL OFFER FOR MY BLOG READERS **
We frequently offer a FREE gift for readers of my blog. Visit http://www.pdsa.com/Event/Blog for your FREE gift!