BlackWaspTM

This web site uses cookies. By using the site you accept the cookie policy.This message is for compliance with the UK ICO law.

Windows Presentation Foundation
.NET 4.0+

WPF Information Controls - TextBlock Inlines

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.

Using Runs

If you were to examine the Inlines property of the TextBlock at runtime, you would find that it contained a collection of inline content elements. For the previous example this includes an instance of the Italic class for the word, "Mermen" and a Bold inline that contains an Underline instance. You would also see that the unformatted elements of the text are held in Run objects.

In the example, the Run items are generated automatically using the plain text from the XAML. However, you can define Runs explicitly. If you do, you can add styling attributes within each Run element, permitting more flexible formatting.

To demonstrate, modify the XAML for the control as follows. Here there are two Runs. The first defines the style for the title, increasing the size and adding a bold effect. The second run is the remaining text, which will be blue.

<TextBlock TextWrapping="Wrap">
    <Run FontWeight="Bold" FontSize="20">The Mermaid</Run>
    <LineBreak/>
    <Run Foreground="Blue">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.</Run>
</TextBlock>

Run the program to see the new styles.

TextBlock Runs

Inline Controls

The final inline that we'll consider in this article allows you to insert any control into the text. Such inlines use the InlineUIContainer class, which can be added to the XAML with the control as its child. Once inserted, the control will be placed according to its position in the text, and will move as the text flow is updated.

To demonstrate, let's add a ComboBox to the text. This will allow the user to select a description for the clarity of the sea.

<TextBlock TextWrapping="Wrap">
    <Run FontWeight="Bold" FontSize="20">The Mermaid</Run>
    <LineBreak/>
    <Run>Far out at sea the water is as blue as the bluest cornflower,
    and as clear as </Run>
    <InlineUIContainer>
        <ComboBox Padding="0" Margin="0 0 0 -2">
            <ComboBoxItem IsSelected="True">the clearest crystal</ComboBoxItem>
            <ComboBoxItem>glass</ComboBoxItem>
            <ComboBoxItem>a very clear thing</ComboBoxItem>
        </ComboBox>
    </InlineUIContainer>
    <Run>; 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.</Run>
</TextBlock>

When you run the program you will see a drop-down list. If you change the selection, you should see that following text is moved accordingly. If you resize the window, you will see the layout of the text change, with the ComboBox being moved to remain in the flow of the text.

TextBlock Inline Controls

6 January 2014