Typography in WPF

Introduction

Typography is said to be the technique of arranging text and its design. The arrangement of type involves the selection of typefaces, point size, line length, line spacing, adjusting the spaces between groups of letters and adjusting the space between pairs of letters. WPF provides the rich-interface only with the advanced features like Text Decoration, Animations and Typography. WPF discover the rich typographic features available in both the OpenType Fonts.

The typographic features in WPF:

Includes the better quality in terms of Quality and the Text Rendering
Include features like bidirectional text, Unicode features
Includes kerning and number alignment
Capitalization of letters in words (known as Ligatures)
Usage of custom font weights
And the enhanced support for fonts.

Now, let's create a simple application using the following steps.

Step 1 : Open Microsoft Visual Studio 2010.

Step 2 : Select File->New->Project.

Step 3 : Select WPF Browser Application and then click Ok.

Step 4 : Now write the following code for Page1.xaml.

<Page x:Class="typography.Page1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300" Title="Page1">
<Grid Background="#FFEBDCDC">
<Rectangle Canvas.Left="-526.614" Canvas.Top="-159.984" Height="38"
HorizontalAlignment="Stretch"
Margin="0,10,0,0" Name="Rectangle1" Stroke="Black" VerticalAlignment="Top">
<Rectangle.Fill>
<LinearGradientBrush EndPoint='0,1'>
<LinearGradientBrush.GradientStops>
<GradientStop Offset='0' Color='#FFFF0000'/>
<GradientStop Offset='.39' Color='#9900FF00'/>
<GradientStop Offset='.16' Color='#00FFFFFF'/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Button Margin="55,143.75,138,68" Name="button1" Click="Button1_Click">
<Button.LayoutTransform>
<ScaleTransform ScaleX="5" ScaleY="5">
</ScaleTransform>
</Button.LayoutTransform>
<StackPanel Orientation="Horizontal">
<Canvas Width="20" Height="18" VerticalAlignment="Center">
<Ellipse Canvas.Left="1" Canvas.Top="1" Width="18" Height="18" Fill="CadetBlue"
Stroke="Black"/>
<Ellipse Canvas.Left="5.5" Canvas.Top="5" Width="2.5" Height="3" Fill="Black"/>
<Ellipse Canvas.Left="11" Canvas.Top="5" Width="2.5" Height="3" Fill="Black" />
<Path Data="M 5,10 A 3,3 0 0 0 13,10" Stroke="Black"/>
</Canvas>
<TextBlock VerticalAlignment="Center"> Click me</TextBlock>
</StackPanel>
</Button>
</Grid>
</Page>

Step 5 : Now write the following code for Page1.xaml.cs

using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Threading;
namespace typography
{
public partial class Page1 : Page
{
public Page1()
{
InitializeComponent();
}
private void Button1_Click(object sender, RoutedEventArgs e)
{
FormattedText text;
text = new FormattedText("MCN SOLUTIONS WELCOMES YOU ", Thread.CurrentThread.CurrentUICulture,
FlowDirection.LeftToRight, new Typeface("Arial Black"),10, Brushes.Red);
Geometry textdata = text.BuildGeometry(new Point(5, 40));
button1.Clip = textdata;
}
}
}

Step 6 : Now press F5 key to run the application

Output:

After clicking on the Button the Output is as Follows

Step 7 : Now add a new Page into the application by right-clicking on the application in the Solution Explorer.

Step 8 : Now write the following code for Page2.xaml

<Page x:Class="typography.Page2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300" Title="Page2">
<Grid Background="#FFF2E2E2">
<Ellipse Fill="BlueViolet" Width="25" Height=" 120">
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Ellipse.MouseEnter">
<BeginStoryboard Name="Animenter">
<Storyboard>
<DoubleAnimation By="400" Duration="0:0:2" Storyboard.TargetProperty="Width"/>
<DoubleAnimation By="400" Duration="0:0:2" Storyboard.TargetProperty="Height"/>
<ColorAnimation Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)"
Duration="0:0:4" From="BlueViolet" To="Red"
RepeatBehavior="Forever" AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Ellipse.MouseLeave">
<BeginStoryboard HandoffBehavior="Compose" Name="Animleave">
<Storyboard >
<DoubleAnimation By="-400" Duration="0:0:2" Storyboard.TargetProperty="Width"/>
<DoubleAnimation By="-400" Duration="0:0:2" Storyboard.TargetProperty="Height"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Ellipse.Unloaded">
<RemoveStoryboard BeginStoryboardName="Animenter"/>
<RemoveStoryboard BeginStoryboardName="Animleave"/>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
</Grid>
</Page>

The Designing Window of Page2.xaml is as Follows

Step 9 : Now select the App.xaml file from the Solution Explorer and change the StartupUri to Page2.xaml.

Step 10 : Press F5 key to run the application

Output : when the mouse is over the ellipse the size of the ellipse increases and the color is also changing.

When the mouse is released from the ellipse, the size of the ellipse decreases and the color is also changing.

Here are some other useful resources which may help you.

Drawing Bezier Curves in WPF
Pie Chart in WPF
Visual Brush in WPF
Drawing Splines and Curves in GDI+
Drawing Graphics Paths in GDI+