In this article, I will discuss how to write text and use fonts and its related elements in XAML.
<TextBlock /> element is used to write a text block in XAML. The FontSize, FontStyle, FontStretch, FontWeight, and FontFamily attributes of <TextBlock /> represents font size, stretch, weight, and name respectively. For example, following code write "Hello XAML" with font size 21 and font name "Times New Roman".
<TextBlock FontSize="21" FontFamily="Times New Roman">Hello XAML</TextBlock>
The output looks like Figure 1.
Figure 1. Text with font size and font family
Font Style
FontStyle attribute represents the style of the font. It's values are - Normal, Oblique, and Italic. The following code sets font styles.
<TextBlock FontSize="20" Foreground="Green">Font Style Sample</TextBlock>
<TextBlock FontSize="20" Foreground="Red">===========</TextBlock>
<TextBlock FontSize="14" FontStyle="Normal">Hello XAML</TextBlock>
<TextBlock FontSize="14" FontStyle="Oblique">Hello XAML</TextBlock> <TextBlock FontSize="14" FontStyle="Italic">Hello XAML</TextBlock>
The output looks like Figure 2.
Figure 1. Font styles
Font Weight
FontWeight attribute represents the weight of the font. It's values are - Normal, Thin, ExtraLight, Light, Medium, SemiBold, Bold, ExtraBold and Black. The following code sets font weights.
<TextBlock FontSize="20" Foreground="Blue">Font Weight Sample</TextBlock>
<TextBlock FontSize="20" Foreground="Red">============</TextBlock>
<TextBlock FontSize="14" FontWeight="Normal">Hello XAML</TextBlock>
<TextBlock FontSize="14" FontWeight="ExtraLight">Hello XAML</TextBlock>
<TextBlock FontSize="14" FontWeight="SemiBold">Hello XAML</TextBlock>
<TextBlock FontSize="14" FontWeight="Bold">Hello XAML</TextBlock>
The output looks like Figure 3.
Figure 3. Font weight
Font Stretch
FontStretch attribute represents the stretch of the font. It's values are - Normal, UltraCondensed, ExtraCondensed, Condensed, SemiCondensed, SemiExpanded, Expanded, ExtraExpanded, and UltraExpanded. The following code sets font weights.
<TextBlock FontSize="20" Foreground="Blue">Font Weight Sample</TextBlock>
<TextBlock FontSize="20" Foreground="Red">============</TextBlock>
<TextBlock FontSize="14" FontWeight="Normal">Hello XAML</TextBlock>
<TextBlock FontSize="14" FontWeight="ExtraLight">Hello XAML</TextBlock>
<TextBlock FontSize="14" FontWeight="SemiBold">Hello XAML</TextBlock>
<TextBlock FontSize="14" FontWeight="Bold">Hello XAML</TextBlock>
Note: Some of the font attributes may not be noticable on all font families.
Complete Sample
The following sample code shows use of various font attributes.
<Window xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005">
<StackPanel HorizontalAlignment="Center">
<TextBlock FontSize="20" Foreground="Green">Font Style Sample</TextBlock>
<TextBlock FontSize="20" Foreground="Red">===========</TextBlock>
<TextBlock FontSize="14" FontStyle="Normal">Hello XAML</TextBlock>
<TextBlock FontSize="14" FontStyle="Oblique">Hello XAML</TextBlock>
<TextBlock FontSize="14" FontStyle="Italic">Hello XAML</TextBlock>
<TextBlock FontSize="20" Foreground="Blue">Font Weight Sample</TextBlock>
<TextBlock FontSize="20" Foreground="Red">============</TextBlock>
<TextBlock FontSize="14" FontWeight="Normal">Hello XAML</TextBlock>
<TextBlock FontSize="14" FontWeight="ExtraLight">Hello XAML</TextBlock>
<TextBlock FontSize="14" FontWeight="SemiBold">Hello XAML</TextBlock>
<TextBlock FontSize="14" FontWeight="Bold">Hello XAML</TextBlock>
<TextBlock FontSize="20" Foreground="Blue">Font Stretch Sample</TextBlock>
<TextBlock FontSize="20" Foreground="Red">============</TextBlock>
<TextBlock FontSize="14" FontStretch="UltraCondensed">Hello XAML</TextBlock>
<TextBlock FontSize="14" FontStretch="SemiCondensed">Hello XAML</TextBlock>
<TextBlock FontSize="14" FontStretch="UltraExpanded">Hello XAML</TextBlock>
<TextBlock FontSize="21" FontFamily="Times New Roman">Hello XAML</TextBlock>
</StackPanel>
</Window>
Summary
In this article, I discussed font attributes in XAML and how to set them in XAML. Some of the attributes I covered are font name, font size, font style, font weight, and font stretch.