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.
The TextBlock element provides a simple way to output text to the screen using XAML syntax. Windows Presentation Foundation (WPF) first introduced the TextBlock element with the release of .NET 3.0; Silverlight 1.0 added support, as well, when it was released.
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.
About the Author
Dan Wahlin (Microsoft MVP for ASP.NET and XML Web Services) is the founder of The Wahlin Group which specializes in .NET and SharePoint onsite, online and video training and consulting solutions. Dan also founded the XML for ASP.NET Developers Web site, which focuses on using ASP.NET, XML, AJAX, Silverlight and Web Services in Microsoft's .NET platform. He's also on the INETA Speaker's Bureau and speaks at conferences and user groups around the world. Dan has written several books on .NET including "Professional Silverlight 2 for ASP.NET Developers," "Professional ASP.NET 3.5 AJAX, ASP.NET 2.0 MVP Hacks and Tips," and "XML for ASP.NET Developers." Read Dan's blog here.