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>