Wahlin on .NET

Silverlight XAML Primer 15: Enhancing TextBlock with Runs and LineBreaks

Here's how to extend TextBlock's usability using two Silverlight elements.

• By Dan Wahlin
• 05/12/2008

Most applications use the TextBlock to output text, but there are more uses for it, particularly in cases where you need to output blocks of rich text with different formatting. In this article, I'll describe how the Silverlight Run and LineBreak elements can be used with the TextBlock element to gain more control over how text is formatted in a Silverlight application.

Using Run and LineBreak Elements
Most of the examples available on the Web that demonstrate how to use the TextBlock element use the Text attribute to assign the text that should be displayed. Here's a fairly typical example:

<TextBlock x:Name="tbFirstName"
   FontFamily="Arial" Text="First Name: " />

In the majority of cases, that's all that's needed to display text in a Silverlight interface. However, the TextBlock element supports two child elements -- Run and LineBreak -- that can be used to gain more control over text. The Run element provides a way to apply fonts, colors or styles to specific text characters while LineBreak adds a new line into the text.

Properties exposed by the Run element are shown in Table 1.

You can think of the LineBreak element as being analogous to the HTML br element. LineBreak supports similar properties as Run, although they're ignored at runtime since the overall goal of the LineBreak element is to output new lines. However, a Name can be given to a LineBreak element in cases where you'd like to dynamically show or hide a LineBreak at runtime through code to influence how text looks.

An example of using the Run element to make the first letter of a sentence larger is shown next. While two TextBlock elements can be used to create the same effect, by using the TextBlock with multiple Run children you can keep related text together in the same control. Figure 1 shows the output generated by the TextBlock and Run elements.

<TextBlock Name="tbParagraph"
  Canvas.Left="36" Canvas.Top="80" FontFamily="Arial">
  <Run FontWeight="Bold" FontSize="50" Foreground="Navy" 
        Text="S" />
  <Run FontSize="18" Text="ilverlight's great!" />
</TextBlock>

Run and LineBreak elements can be combined within a TextBlock to display rich text. By combining the elements you can supply different font colors, sizes, weights and families to different lines of text as needed. Text can be defined using the Run element's Text property (as shown earlier) or defined by nesting the text within the start and end tags.

<TextBlock x:Name="tbStyledText"
  Margin="10,10,10,10" FontFamily="Arial" 
  Width="500" Text="Using the TextBlock with runs...">
    <LineBreak/>
    <Run Foreground="Navy" FontFamily="Verdana" 
           FontSize="34">
       Second Line with Verdana
    </Run>
    <LineBreak/>
    <Run Foreground="Teal" FontFamily="Times New Roman" 
      FontSize="18" Text="3rd line with Times New Roman" />
</TextBlock>

The output generated by the previous TextBlock and associated Run and LineBreak elements is shown in Figure 2.

Although the TextBlock element is typically used to display basic text in a XAML file, by using Run and LineBreak elements, you can gain more control over how text is formatted and displayed in a Silverlight application.