Programmer's notes

Image reflection effect in WPF

0 217

With the Windows Presentation Foundation (WPF) it is very easy to create nice looking applications. One of the cool effects I like to have in my applications is the image reflection.

Below is a simple example how to easilly create effects like this:


When creating effects it is a good practice to make them reusable. And in the WPF applications I’m using Styles for this. So first, I have to create a new style. I want to change the way the control looks like, so I’m creating the setter for the Template property of this control. In this template I am using Grid layout to have good scalability of images. There are two rows. In the first one, there is an actual Image that user is specifing. In the second row, there is a reflection. So you can think of this second row as a surface where image is reflecting.

The image reflection effect is created using the combination of ScaleTransform and OpacityMask. With the ScaleTransform I’m flipping the image vertically. And with the OpacityMask I’m making the image fade into the background.

Here is the complete source code:

The important things:

  • Lines 6 – 33: creating Style for application window
  • Line 7: this style is for Button controls and the identifier is ImageReflection
  • Line 8: styling the Template property of Button control
  • Line 16: the main Image with the Source bound to parent control Tag property
  • Line 17: the reflecion Image with the Source bound to the same Tag property, with the Opacity set to highlight that this is a reflection
  • Line 19: the ScaleTransform that flipps the image vertically
  • Lines 22 – 25: the OpacityMask with the LinearGradientBrush that creates the fadding effect
  • Lines 35 – 38: the sample code that shows how the same image looks like without and with the reflectin effect
  • Lines 40 – 54: the sample code that shows three different images with the reflection effect

To enable the reflection effect you have to set:

  1. Coltrol type to Button
  2. Image source in the Tag property to the Assembly name and image component
  3. Style to the Static Resource with the style name specified in the x:Key property (Line 7)

Here is how the same image looks like without and with the reflection effect. Please note that to enable the effect you need to change the control type from Image to Button (as the Style is for the Button target type). And the Source has to be changed to Tag (as the Button control doesn’t have the Source property).



Leave a Reply


Around Dev

My way of seeing

%d bloggers like this: