Blog
Adding Reflection Effects with XAML
By Ken Getz | February 11, 2013
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 figurefo 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 theRenderTransformOrigin property to (0, 0.5). Because the intent is toscale the "reflection" image so that it's slightly shorter than the original image (80% of the original size), the markup sets theRenderTransformOrigin property to 0.44 so that the images line up(there was some trial and error involved to get the images set justright):
<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.
