Creating Reflection Effect in WPF - Expression Blend


Let's take some time and create a reflection effect of an image. You may call that water effect. We would use Expression Blend to do this task within minutes.

Step 1

  • Yes, off course you need to find an image for this purpose. I hope you find a nice and classy image for practice.

  • After you have found the image, you need to place that very image into the assets of Expression Blend so that you can place it on your art board.

Step 2

art mode image

  • Now place the image on the art board on Expression Blend.

  • Since you have placed the image on the art board, make one more copy.

Step 3

  • Now you need to flip the image so that it seems to be the reflected version of the original image.

  • For this purpose I will use Transformation Pan in Expression Blend.

    tranform render

  • Use this panel and make it upside down.
Step 4
  • Now select the duplicate image and select it's opacity mask to be gradient. Select the gradient point and set it's alpha to 40, that will make the image transparent.




Yes, you are done. You have successfully created a reflection effect using Expression Blend for WPF.

you are done

Note: Opacity Mask option is not available for Windows Phone and Windows Store SDK for Expression Blend.


Personal Blog: Blend Unleashed.