WPF TextBlock

The WPF TextBlock control is a lightweight text editor control for displaying and formattting small amount of text flow content. The code examples in this tutorial demonstrates how to use a TextBlock control in WPF using XAML and C#.

Creating a TextBlock

The TextBlock element represents a WPF TextBlock control in XAML.

The Width and Height attributes of the TextBlock element represent the width and the height of a TextBlock. The Text property of the TextBlock element represents the content of a TextBlock. The Name attribute represents the name of the control, which is a unique identifier of a control. The Foreground property sets the foreground color of contents. This control does not have a Background property.

The code snippet in Listing 1 creates a TextBlock control and sets the name, height, width, foreground and content of a TextBlock control. Unlike a TextBox control, the TextBlock does not have a default border around it.

Listing 1

The output looks like Figure 1.

Figure 1

As you can see from Figure 1, by default the TextBlock is place in the center of the page. We can place a TextBlock control where we want by using the Margin, VerticalAlignment and HorizontalAlignment attributes that sets the margin, vertical alignment, and horizontal alignment of a control.

The code snippet in Listing 2 sets the position of the TextBlock control in the left top corner of the page.

Listing 2

Creating a TextBlock Dynamically

The code listed in Listing 3 creates a TextBlock control programmatically. First, it creates a TextBlock object and sets its width, height, contents and foreground and later the TextBlock is added to the LayoutRoot.

Listing 3

Setting Fonts of TextBlock Contents

The FontSize, FontFamily, FontWeight, FontStyle, and FontStretch properties are used to set the font size, family, weight, style and stretch to the text of a TextBlock. The code snippet in Listing 4 sets the font properties of a TextBlock.

Listing 4

The new output looks like Figure 2.

Figure 2

The FontSource property allows loading custom fonts dynamically. The following code snippet sets the FontSource property.

Wrapping, Alignment and Padding

The TextWrapping property sets the wrap of no wrap text. The following code snippet sets the wrapping text option.

The TextAlignment property sets the text alignment in a TextBlock, which is of type TextAlignment enumeration. A text can be aligned left, center, or right.