Adding Reflection Effects with XAML
Besides the obvious transformation effects, you can use transforms to create rich and varied effects in your applications—it’s all about figuring out which transforms provide the effects you want. Imagine that you want to create a reflection effect. This is simple, combining a transform and opacity settings. The Figure below demonstrates the kinds of effects you can create. In this figure you see an Image element placed in two Grid cells. The Image in the lower Grid cell has been compressed vertically, flipped vertically, and has its opacity set.
If you examine the markup for ReflectionDemo.xaml, you’ll find the following features:
- The page contains a Grid with two rows:
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
- The top row contains an image, with its Stretch property set to Uniform so it displays the entire image in the space available:
<Image Source="{StaticResource DogImage}"
Stretch="Uniform" />
- The bottom row contains the same image. You need some way to manually position the image. You could set its coordinates in a container like a Canvas, but in this case, all you need to do is flip it vertically. To flip it in place, you would normally set the RenderTransformOrigin property to (0, 0.5). Because the intent is to scale the “reflection” image so that it’s slightly shorter than the original image (80% of the original size), the markup sets the RenderTransformOrigin property to 0.44 so that the images line up (there was some trial and error involved to get the images set just right):
<Image Source="{StaticResource DogImage}"
Stretch="Uniform"
Grid.Row="1"
RenderTransformOrigin="0,0.44" Opacity="0.7">
…
</Image>
- The bottom image also has its opacity set to 0.7, which makes it look slightly “washed out.”
- Within the Image element, the Image.RenderTransform property contains a ScaleTransform element that specifies a ScaleY property of -0.8. This value both scales the image in the vertical direction to 80% of its original value, and flips the image vertically:
<Image.RenderTransform>
<ScaleTransform ScaleY="-0.8" />
</Image.RenderTransform>
Given the two modifications to the bottom image, you can easily create the illusion of a reflection by displaying the same image twice. RenderTransformOrigin="0,0.44" Opacity="0.7">
This post is an excerpt from the online courseware for our Windows 8 Using XAML: Bindings, Shapes, and Animation course written by expert Ken Getz.
Ken Getz is a Visual Studio expert with over 25 years of experience as a successful developer and consultant. He is a nationally recognized author and speaker, as well as a featured instructor for LearnNowOnline.
Thousands of developers worldwide use LearnNowOnline to gain the technical skills they need to succeed on the job and advance their career.