Adding Reflection to Text in WPF

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. 

Sample 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 

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.JPG

Thanks !!!

Next Recommended Reading Use a Background Worker in WPF using C#