Text Reflection effect with WPF and XAML

Posted by Kyprulez in Programming | 0 comments

I bet everyone has seen, especially with the advent of Web 2.0, different sorts of text pieces that have a reflection beneath them which gives the impression the text is “sitting” on a surface.Although the effect is very easy to do in Photoshop, I decided to show you that it can be as easy and enjoyable in WPF.

Here’s the plan behind this:

• Create the desired text
• Duplicate it and place it under the initial one
• Perform a Y axis flip(or vertical flip)
• Play with the both the text’s opacity and the foreground gradient opacity

Here’s what we will achieve at the end of this tutorial:

Now I’m going to show the whole code and then break it into the above steps and explain it.

Implementation

<Window
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	x:Class="Reflection.MainWindow"
	x:Name="Window"
	Title="MainWindow"
	Width="640" Height="480" Background="#FF1F313D">

	<Grid x:Name="LayoutRoot">
		<TextBlock Margin="126,132,112,0" VerticalAlignment="Top" Height="61" Text="Reflection Effect" TextWrapping="Wrap" FontSize="53.333">
			<TextBlock.Foreground>
				<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
					<GradientStop Color="#FF8C8C8C" Offset="1"/>
					<GradientStop Color="#FFEEEEEE"/>
				</LinearGradientBrush>
			</TextBlock.Foreground>
		</TextBlock>
		<TextBlock Margin="126,174,112,218" FontSize="53.333" Text="Reflection Effect" TextWrapping="Wrap" RenderTransformOrigin="0.5,0.5" Opacity="0.1">
			<TextBlock.RenderTransform>
				<TransformGroup>
					<ScaleTransform ScaleX="1" ScaleY="-1"/>
					<SkewTransform AngleX="0" AngleY="0"/>
					<RotateTransform Angle="0"/>
					<TranslateTransform/>
				</TransformGroup>
			</TextBlock.RenderTransform>
			<TextBlock.Foreground>
				<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
					<GradientStop Color="#FF8C8C8C" Offset="1"/>
					<GradientStop Color="#00EEEEEE" Offset="0.348"/>
				</LinearGradientBrush>
			</TextBlock.Foreground>
		</TextBlock>
	</Grid>
</Window>

Step 1

<TextBlock Margin="126,132,112,0" VerticalAlignment="Top" Height="61" Text="Reflection Effect" TextWrapping="Wrap" FontSize="53.333">
	<TextBlock.Foreground>
		<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
			<GradientStop Color="#FFEEEEEE"/>
			<GradientStop Color="#FF8C8C8C" Offset="1"/>
    	</LinearGradientBrush>
	</TextBlock.Foreground>
</TextBlock>

Here’s our initial text(which cites “Reflection Effect”).Apply a linear gradient to it by specifying <LinearGradientBrush EndPoint=”0.5,1″ StartPoint=”0.5,0″> and set the Offset = 1 to the dark color(#FF8C8C8C), so that the gradient goes from bright(#FFEEEEEE) to dark(#FF8C8C8C).

Step 2

<TextBlock Margin="126,174,112,218" VerticalAlignment="Top" Height="61" Text="Reflection Effect" TextWrapping="Wrap" FontSize="53.333">
	<TextBlock.Foreground>
		<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
			<GradientStop Color="#FFEEEEEE"/>
			<GradientStop Color="#FF8C8C8C" Offset="1"/>
    	</LinearGradientBrush>
	</TextBlock.Foreground>
</TextBlock>

Duplicate the textblock and position it right under the first one(as you can see, because of the position, the margin differs here).Next we need to flip it.

Step 3

<TextBlock Margin="126,174,112,218" FontSize="53.333" Text="Reflection Effect" TextWrapping="Wrap" RenderTransformOrigin="0.5,0.5">
	<TextBlock.RenderTransform>
		<TransformGroup>
			<ScaleTransform ScaleX="1" ScaleY="-1"/>
		</TransformGroup>
	</TextBlock.RenderTransform>
	<TextBlock.Foreground>
		<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
		    <GradientStop Color="#FFEEEEEE"/>
			<GradientStop Color="#FF8C8C8C" Offset="1"/>
		</LinearGradientBrush>
	</TextBlock.Foreground>
</TextBlock>

To perform the flip first set the TextBlock’s RenderTransformOrigin property to “0.5, 0.5″.Then, add the RenderTransform block and be sure to set ScaleY to “-1″.This is mandatory in order to flip it vertically.

Step 4

<TextBlock.Foreground>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
		    <GradientStop Color="#00EEEEEE" Offset="0.348"/>
            <GradientStop Color="#FF8C8C8C" Offset="1"/>
	</LinearGradientBrush>
</TextBlock.Foreground>

The final step is to make the effect look realistic.No matter which color you use, in order to make the bottom of the layer transparent you need to set the first pair of the hex value to “00″; in our case “#00EEEEEE”.This pair controls the alpha transparency and you’ll find it in every hex value in WPF.Play a bit with the Offset property and try make the gradient transparent up to the middle.Here I set it to “0.348″.

Furthermore, to make it look even more realistically play with the TextBlock’s Opacity property.I set it to “0.1″, but you are free to set it as you wish.Blending it all together we get the whole code from the start of this tutorial.

I hope you enjoyed and stay tuned for more articles!

Related posts:

1. Create a shinny-looking orb in Photoshop
2. Rotating a line in C#