Image reflection in XAML

  • Article

It's relatively easy writing code in XAML to create a UI to display a reflective image. I'll demonstrate it in this simple Silverlight 2.0 app, the same code also can be applied to WPF app. You need to have Visual Studio 2008 and Silverlight SDK installed on your machine, check here to get all stuff you need.

  1. Launch VS 2008, and create a new project. From the New Project dialog, select Silverlight item under "Visual C#" node on the left pane, you should see Silverlight Application project template on the right pane. The default project name would be SilverlightApplication1 (you can change the name or leave it as is)
  2. Then on the New Silverlight Application dialog, select "Dynamically generate an HTML test page to host Silverlight within this project" option and click OK. The new project (and all its files) will be created and by default the VS editor will open file Page.xaml with following xaml code:

<UserControl x:Class="SilverlightApplication1.Page"

   xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"

   xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"

   Width="400" Height="300">

    <Grid x:Name="LayoutRoot" Background="White">

    </Grid>

</UserControl>

Now we need to add an image file (only JPG and PNG files are supported by Silverlight right now) to the project. On the Solution Explorer window, right-click the project node (i.e. SilverlightApplication1) and select Add -> Existing Item... menu. The Add Existing Item dialog will let us to select file(s) which we want to add to the project. In my example, I browse to the sample pictures folder on my Vista machine and pick Tree.jpg, and the file will be added under the project node on the Solution Explorer window.

Now we need to modify the default xaml code to add the image control. You can start by adding following code inside the <Grid> element:

<Image Canvas.Left="10" Canvas.Top="10" Width="200" Height="130" Source="Tree.jpg" Stretch="Fill"/> 

From the VS xaml editor, you'd see the image of trees (assuming you're adding Tree.jpg to the project like I did). Press Ctrl+F5 to run the project and see the UI output on the browser. In order to create a reflective image, we need to add another image control, and use ScaleTransform (set the ScaleY or ScaleX value to negative number) to make it happens. We also need to set the Opacity attribute value to a number less than 1 to make the fade reflection effect. The final xaml code would be:

<UserControl x:Class="SilverlightApplication1.Page"

xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"

Width="400" Height="300">

<Grid x:Name="LayoutRoot" Background="White">

<Canvas Width="400" Height="300">

<Image Canvas.Left="10" Canvas.Top="10" Width="200" Height="130" Source="Tree.jpg" Stretch="Fill"/>

<Image Canvas.Left="10" Canvas.Top="270" Width="200" Height="130" Source="Tree.jpg" Stretch="Fill" Opacity="0.3">

<Image.RenderTransform>

<ScaleTransform ScaleY="-1"/>

</Image.RenderTransform>

</Image>

</Canvas>

</Grid>

</UserControl>

Run the app from VS (Ctrl+F5) to see the output yourself, or you can see my sample app from this Silverlight streaming site (note that it may prompt you to install Silverlight 2 Beta 2 runtime if your machine doesn't have it already).

There are still other interesting things we can do in XAML along with .NET code, so stay tuned!