Share via

WPF - Expression Blend: Creating Reflection Effect

  • Article

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

Step 1: Image

Yes, offcourse you need to find a 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 assets of Expression Blend so that you can place it on your art board.

Step 2: Image at art board

http://1.bp.blogspot.com/-dtNKzhNfLzU/U5H-wd6uh7I/AAAAAAAAAuc/93QHuxCyHLI/s1600/ref2.PNG

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

As you have placed the image on the art board, Make it's one more copy.

Step 3: Flip image 

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

For this purpose I would use Transformation Pan in Expression Blend.

http://2.bp.blogspot.com/-8Xb-4xIBFBA/U5H-wP8xzPI/AAAAAAAAAuU/q-4lmzIvzes/s1600/ref3.PNG

Use this panel and make it upside down.

Step 4: opacity

Now select the duplicate Image select it's opacity mask to be gradient. Select the gradient point and set it's alpha to 40 it will make the image transparent.

http://2.bp.blogspot.com/-2AeHVOqW8RA/U5H-yWH2LcI/AAAAAAAAAu4/z4eswYkKRVA/s1600/ref6.PNG

http://1.bp.blogspot.com/-bJOWcBbEPrc/U5H-xWKX0WI/AAAAAAAAAus/gbrcPjX7nPg/s1600/ref5.PNG

http://4.bp.blogspot.com/-pLusIiO8nuQ/U5H-yzwnMDI/AAAAAAAAAu8/XlqVd_ogsfk/s1600/ref7.PNG

Result

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

http://4.bp.blogspot.com/-NglyTN5HBKg/U5H-zCdX9pI/AAAAAAAAAvE/yJnk8WwBFDM/s1600/ref8.PNG

Note:

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