Adding images is very easy to do in Silverlight. All you do is add an <Image> element to your Silverlight user control with the Source property set to the path of where your image is located and that image will be displayed. So the following code will produce the image shown in Figure 1.

<Image Source="Computer_Cleaner.png" />

Figure 1: A simple Silverlight image

A Mirror Reflection

However, just displaying a simple image is pretty plain. Through the magic of XAML you can make this image a little more interesting. One of the neat things we can do with XAML is to flip an image completely upside down by using a RenderTransform. By putting a ScaleTransform as your RenderTransform on a XAML element and setting the ScaleY property to minus one you can cause that XAML element to flip upside down. The following XAML will render the image shown in Figure 2.

<StackPanel>
  <Image Source="Computer_Cleaner.png"
          Name="theImage"
          Height="70"
          Width="50" />
  <Image Source="{Binding ElementName=theImage, Path=Source}"
          Height="{Binding ElementName=theImage, Path=Height}"
          Width="{Binding ElementName=theImage, Path=Width}"
          Opacity=".20"
          RenderTransformOrigin="0.0,0.15">
    <Image.RenderTransform>
      <ScaleTransform ScaleY="-1" />
    </Image.RenderTransform>
  </Image>
</StackPanel>

Figure 2: An image with a mirror reflection

Now this XAML takes a little more explanation. First off there are now two image controls within a StackPanel control. The first image has is the same as shown in the first example, but we have set the Name property and an explicit Height and Width. The second image uses data binding to use the same Source, Height and Width as the first image.

To the second image are three additional properties added. First is the Opacity of 20%. This is what gives the second image the opaque, “reflection” look. A RenderTransform of a ScaleTransform with its ScaleY set to minus one to flip the image. The last property is an offset to make this image appear below the first image. This is done by setting the RenderTransformOrigin to “0,0.15”. There are two values separated by a comma in this origin property. They are the X and Y coordinates to set the center point of the render transform. Since we are not using ScaleX in the ScaleTransform, you only need to set the Y coordinate to a 15% offset of the center point. This is what moves the image a little below the first image.

Summary

Creating a mirror image of any control in XAML is as easy as adding a RenderTransform. Making reflections can spice up your user interface a little and make it not so drab. You can expand on this concept by adding a nice Border with an interesting background around the image. Put a bunch of these images together and you can use them as a nice menu system.

NOTE: You can download the complete sample code at my website. http://www.pdsa.com/downloads. Choose Tips & Tricks, then "Mirror Reflections with Silverlight Images" 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!