Silverlight 5’s New RichTextBoxOverflow Control

Silverlight 5 boasts a lot of big new features, but sometimes it’s the little things that count. A case in point is the new RichTextBoxOverflow control, which simplifies the process of implementing newspaper-style layouts in Silverlight applications. It may not be as sexy as the new 3D graphics API, but RichTextBoxOverflow will be your best friend if you want to build readers for newspapers, magazines, books, or other richly formatted content, and you want text to flow between columns as the size of the text (or the text container) changes.

To demonstrate, I built a simple example that you can download and try for yourself if you have the Silverlight 5 beta installed on your development machine. When it first comes up, it looks something like this:

Now grab the slider that’s directly underneath the text and move it to the right. The text in the article will increase in size and automatically flow from column 1 to column 2:

Next, use the bottom slider to change the text leading – that is, the spacing between characters:

This, too, is new in Silverlight 5, and changing the character spacing causes text to flow between columns as the volume of the text changes. You can also make the text flow by resizing the browser window. All of this would have been incredibly difficult to do in Silverlight 4, but in Silverlight 5, it’s a piece of cake.

So how does it work? How do you create multi-column text displays and flow text from one column to another? And how do you adjust the leading for added control over how your text is displayed? Here’s the key markup from MainPage.xaml:

<RichTextBox x:Name="Column1"

  OverflowContentTarget="{Binding ElementName=Column2}"

  FontFamily="Georgia" FontSize="{Binding Value, ElementName=FontSizeSlider}"

  CharacterSpacing="{Binding Value, ElementName=CharacterSpacingSlider}">

    .

    .

    .

</RichTextBox>

<RichTextBoxOverflow x:Name="Column2" />

First you declare a RichTextBox control for column 1. Then you declare a RichTextBoxOverflow control for column 2, and you connect the two together by pointing the RichTextBox control’s OverflowContentTarget property to the RichTextBoxOverflow control. Now any text that won’t fit inside the RichTextBox will automatically spill over into the RichTextBoxOverflow control, and if you want to add a third column, you can simply declare another RichTextBoxOverflow control and chain the first RichTextBoxOverflow to the second using the former’s OverflowContentTarget property.

As for character spacing, you control that with the new CharacterSpacing property. In this example, I simply bound the RichTextBox’s CharacterSpacing property to a Slider control, just as I bound FontSize to a Slider. Also note that I didn’t have to set FontFamily, FontSize, and other font-related properties on the RichTextBoxOverflow control, because these property values flow from the RichTextBox just like the text itself.

Hard to imagine how it could be any easier. It’ll be interesting to see how developers use these features to richen up their UIs.