.NET 4.0+

WPF Information Controls - TextBlock Inlines

by Richard Carr, published at http://www.blackwasp.co.uk/TextBlockInlines.aspx

The forty-second part of the Windows Presentation Foundation Fundamentals tutorial continues looking at the TextBlock control. This article shows how to use inlines to create text with varying formatting options.

TextBlock

In the previous instalment in the WPF tutorial we looked at the TextBlock control. This control is ideal for displaying small pieces of text, which can be formatted with different fonts, styles and colours. In the earlier article I described the basics of the TextBlock, including how you can format all of the text in the same manner. In this instalment we'll look at more complex formatting using inline content elements, or inlines.

An inline is a section of text within a TextBlock. You can add multiple inlines to a single TextBlock and format each differently. There are basic inlines that apply bold, italic or underline effects to their contents, and more complex ones that permit you to add all of the common text formatting styles. You can also use inlines to add line breaks or include interactive controls within the text flow.

To demonstrate, we need a sample project. Create a new WPF application in Visual Studio, naming the project, "TextBlockInlines". Once loaded, replace the XAML in the main window with that shown below.

<Window x:Class="TextBlockInlines.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="TextBlock Demo"
        Width="250"
        Height="200">
    <StackPanel>
        <TextBlock TextWrapping="Wrap">
            The Mermaid
            Far out at sea the water is as blue as the bluest cornflower,
            and as clear as the clearest crystal;
            but it is very deep, too deep for any cable to fathom,
            and if many steeples were piled on the top of one another
            they would not reach from the bed of the sea to the surface
            of the water. It is down there that the Mermen live.
        </TextBlock>
    </StackPanel>
</Window>

The window is similar to the examples from the previous article. It includes a single TextBlock that contains several lines of text. If you run the program you will see that the line breaks in the XAML do not correspond to line breaks in the resultant window. The text simply wraps at the edges of the control.

Adding Line Breaks

Sometimes you will want to insert a line break within a TextBlock. You can do this with a LineBreak inline, added as an XAML element within the text. A new line will be started at the position of this element. If you have configured the text to be justified, the final line before the line break will not be expanded to fill the available width.

To demonstrate, replace the TextBlock with the code below. Note the position of the LineBreak tag. Here it is placed on its own line to improve the readability of the code. However, it can be inserted into the text at any position.

<TextBlock TextWrapping="Wrap">
    The Mermaid
    <LineBreak/>
    Far out at sea the water is as blue as the bluest cornflower,
    and as clear as the clearest crystal;
    but it is very deep, too deep for any cable to fathom,
    and if many steeples were piled on the top of one another
    they would not reach from the bed of the sea to the surface
    of the water. It is down there that the Mermen live.
</TextBlock>

Run the program to see the results. You will see that a line break is added after the title, "The Mermaid".

Using Inlines for Basic Varying Formatting

There are three simple inlines that you can use to apply basic formatting effects to parts of the text in a TextBlock. You can embed one within another to nest the inlines and apply more than one style to the same text. The inlines are:

• Bold. Emboldens the text between the opening and closing tags of the inline.
• Italic. Italicises the text within the inline.
• Underline. Adds a single underline to the contents of the inline.

The updated TextBlock XAML below includes all three inlines. In this case the Bold and Underline tags are nested.

<TextBlock TextWrapping="Wrap">
    <Bold><Underline>The Mermaid</Underline></Bold>
    <LineBreak/>
    Far out at sea the water is as blue as the bluest cornflower,
    and as clear as the clearest crystal;
    but it is very deep, too deep for any cable to fathom,
    and if many steeples were piled on the top of one another
    they would not reach from the bed of the sea to the surface
    of the water. It is down there that the <Italic>Mermen</Italic> live.
</TextBlock>

The resultant window is shown below. Note the formatting of the title and the word, "Mermen" in the last line of the text.