Adding Reflection to the Text

Introduction

You can make your text elements look more attractive by adding various special effects to the text.

One such effect that can be implemented on the TextBlock element is Reflection you can create a new TextBlock to contain the reflection of the text written in the original TextBlock.You can then place the new TextBlock under the original TextBlock.

The reflection effect can be created by transforming the desired element by using the RenderTransform property of the element.

Code

Consider the following code snippet:

<Canvas>
<TextBlock Width=”56” Canvas.Left=”50” Canvas.Top= “0” Text=”Reflection Text” FontWeight = “Bold” FontSize= “16” Foreground=”Red”/>

<TextBlock Width=”67” Canvas.Left=”50” Canvas.Top= “53” FontSize=”16” FontWeight = “Bold” Text=”Reflection Text” Foreground=”LightBlue”/>
                   <TextBlock.RenderTransform>
       <ScaleTransform ScaleY = “-2”/>
</TextBlock.RenderTransform>
</TextBlock>
</Canvas>

Explanation

The preceding code snippet creates two TextBlocks.The first TextBlock is created to display the actual text, whereas the second TextBlock is created to display the reflection of the text contained in the first TextBlock. The ScaleTransform tag scale the Y axis of the second TextBlock with a negative value to invert the text contained in it.

The following figure shows the output of the preceding code snippet.

Output

That's all enjoy the code snippet.