Sunday, February 8, 2009

Fancy fonts in XAML (Silverlight and WPF)

Outline, Shadow, Embossed and Engraved text in XAML.

Here are a few quick and easy ways to spice of your text in XAML.

To use these tricks, you need to have the ability to exactly place the text. For that you need to use a Canvas Layout control.


<UserControl x:Class="SilverlightApplication2.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="320" Height="200">
<Grid x:Name="LayoutRoot" Background="White">
<Grid.ColumnDefinitions >
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button Margin="3">
<Canvas Width="800" Height="60">
<TextBlock FontSize="36"
Canvas.Top="2" Canvas.Left="10">Outline</TextBlock>
<TextBlock FontSize="36"
Canvas.Top="2" Canvas.Left="12">Outline</TextBlock>
<TextBlock FontSize="36"
Canvas.Top="4" Canvas.Left="10">Outline</TextBlock>
<TextBlock FontSize="36"
Canvas.Top="4" Canvas.Left="12">Outline</TextBlock>
<TextBlock FontSize="36"
Canvas.Top="3" Canvas.Left="11"
Foreground="White">Outline</TextBlock>
</Canvas>
</Button>
<Button Grid.Column="0" Grid.Row="1" Margin="3">
<Canvas Width="800" Height="60">
<TextBlock FontSize="36"
Canvas.Top="5" Canvas.Left="4"
Foreground="Black">Shadow</TextBlock>
<TextBlock FontSize="36"
Canvas.Top="3" Canvas.Left="2"
Foreground="Gray">Shadow</TextBlock>
</Canvas>
</Button>
<Button Grid.Column="1" Grid.Row="0" Margin="3">
<Canvas Width="800" Height="60">
<TextBlock FontSize="36"
Canvas.Top="3" Canvas.Left="0"
Foreground="Gray">Engrave</TextBlock>
<TextBlock FontSize="36"
Canvas.Top="5" Canvas.Left="2"
Foreground="White">Engrave</TextBlock>
<TextBlock FontSize="36"
Canvas.Top="4" Canvas.Left="1"
Foreground="Black">Engrave</TextBlock>
</Canvas>
</Button>
<Button Grid.Column="1" Grid.Row="1" Margin="3">
<Canvas Width="800" Height="60">
<TextBlock FontSize="36"
Canvas.Top="5" Canvas.Left="3"
Foreground="Gray">Emboss</TextBlock>
<TextBlock FontSize="36"
Canvas.Top="2" Canvas.Left="2"
Foreground="White">Emboss</TextBlock>
<TextBlock FontSize="36"
Canvas.Top="4" Canvas.Left="4"
Foreground="Black">Emboss</TextBlock>
</Canvas>
</Button>
</Grid>
</UserControl>

3 comments:

wsh said...

I like it. I'm wondering if it's possible to use these same text features using dynamic text. For instance a user types some text in a textbox and it's rendered in a textblock with the style as they are typing.

Any thoughts?

chaithanya said...

Thanks...
Check this for XAML free E-Learning

XAML E-Learning

basquang said...

Great Article, Thanks