Posted by: Zeeshan Amjad | July 21, 2009

Text Reflection in WPF


Crating a Text is very easy and can be done completely in XAML without writing a single line of C# or any other programming language code. Here for simplicity we made one very simple application to give proof of concept. It can be further enhanced by using the shadow opaque or other techniques.

At first step we create one grid with two rows. The top row contains the text and the bottom row contains the reflection of it.

 

  1: <Window x:Class="Reflection.Window1"
  2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4:     Title="Reflection" Height="300" Width="300">
  5:     <Grid>
  6:         <Grid.RowDefinitions>
  7:             <RowDefinition/>
  8:             <RowDefinition/>
  9:         </Grid.RowDefinitions>        
 10:     </Grid>
 11: </Window>
 12: 

Then we created text block at the top row and write something in it and assigned one name to it which we are going to use during the creation of reflection. At the bottom grid we create one border and create visual brush for that border and bind this to the name we just created in the first row of the grid. At last stage we apply the transformation to the visual brush and set the scaleY = -1 to get the reflection effect across y axis. If we want to get reflection across x-axis then we will set scaleX = -1. We can also apply reflection to both x and y axis at the same time.

Here is the complete XAML code to demonstrate the reflection across Y-axix.

 

  1: <Window x:Class="Reflection.Window1"
  2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4:     Title="Reflection" Height="300" Width="300">
  5:     <Grid>
  6:         <Grid.RowDefinitions>
  7:             <RowDefinition/>
  8:             <RowDefinition/>
  9:         </Grid.RowDefinitions>
 10:         
 11:         <TextBlock VerticalAlignment="Stretch" HorizontalAlignment="Stretch" 
 12:                    Width="200" Height="50" 
 13:                    x:Name="SampleText"  FontSize="36"
 14:                    TextAlignment="Center" Grid.Row="0">
 15:             Hello World
 16:         </TextBlock>
 17:         
 18:         <Border Grid.Row="1" Width="200" Height="50">
 19:             <Border.Background>
 20:                 <VisualBrush Visual="{Binding ElementName=SampleText}">   
 21:                     <VisualBrush.Transform>
 22:                         <ScaleTransform ScaleX="1" ScaleY="-1" CenterX="100" CenterY="25"/>
 23:                     </VisualBrush.Transform>
 24:                 </VisualBrush>
 25:             </Border.Background>
 26:         </Border>
 27:     </Grid>
 28: </Window>
 29: 

Here is the output of the program

 

Reflection_01

If we want to apply reflection on both x and y axis then we have to set the value of scaleX and scaleY = -1. Here is the XAML file for this.

 

  1: <Window x:Class="Reflection.Window1"
  2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4:     Title="Reflection" Height="300" Width="300">
  5:     <Grid>
  6:         <Grid.RowDefinitions>
  7:             <RowDefinition/>
  8:             <RowDefinition/>
  9:         </Grid.RowDefinitions>
 10:         
 11:         <TextBlock VerticalAlignment="Stretch" HorizontalAlignment="Stretch" 
 12:                    Width="200" Height="50" 
 13:                    x:Name="SampleText"  FontSize="36"
 14:                    TextAlignment="Center" Grid.Row="0">
 15:             Hello World
 16:         </TextBlock>
 17:         
 18:         <Border Grid.Row="1" Width="200" Height="50">
 19:             <Border.Background>
 20:                 <VisualBrush Visual="{Binding ElementName=SampleText}">   
 21:                     <VisualBrush.Transform>
 22:                         <ScaleTransform ScaleX="-1" ScaleY="-1" CenterX="100" CenterY="25"/>
 23:                     </VisualBrush.Transform>
 24:                 </VisualBrush>
 25:             </Border.Background>
 26:         </Border>
 27:     </Grid>
 28: </Window>
 29: 

Here is the output of this program.

 

Reflection_02

Advertisements

Responses

  1. […] We have already discuss the usage of Visual Brush and see how we can use it to make a text reflection. This time we are going to make a visual brush to fill the geometrical shape with control. We will […]

  2. Well, it was usefull .


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: