Reflection Effect For Beginners Using Silverlight 4

In this post I will show you how you can create the Reflection effect using the blend 4 in Silverlight application. It is really easy and nice to have the reflection effect in your application.Creating reflection and mirror effects is a little different than creating blur and shadow effects because these effects are not built into Silverlight. However, you can create reflection and mirror effects by using features present in Silverlight. Output of the this exercise will be as shown in the Image 1.

Image 1

Let us start the example and how to create reflection effect in Blend 4.Create a silverlight application using blend 4. In the MainPage add text block control and set text property of the text block control. I have set the "REFLECTION EFFECT" in my case, you can set what ever you like. And also set the foreground color of the text and the properties which you want to set like font size, font family etc.

In the next step copy past the text block you have created previously and set the scale of the second text block control. In the image 2 you can see that I have set the scale of the second text block control to -1 for the y-Axes. By setting the second text block scale to -1 the second text block will flip. Now set the margin of the second text block so that it can placed beneath the first text block control (As I have placed my both text block control in grid layout so you need to set the margin from the top of the second text block control.

Image 2

The next step is to set the foreground color of the second text block control to that it will look like the reflection of the first control. Select the foreground color of the second text block control and set the gradient color of the foreground color.

Image 3

Now reverse the gradient color and set the opacity of the first color to 0 percent and the offset of the first color will be 0.255. By doing so it will create reflection like effect.

All and any comments / bugs / suggestions are welcomed!