Silverlight 5–Rich Text and Overflow

A Silverlight 5 Mini-Tutorial

In Silverlight 5 we introduce a new element, RichTextBoxOverflow.  This allows one RichTextBox to have its contents “overflow” into another – excellent for multi-column presentation.

[Click on image for full size]

What is particularly nice here is that as you adjust the size of the browser window, the text reflows freely between the two RichTextBoxes, with the Overflow box picking up the extra.

To create this, start a new Silverlight 5 application, [ download Silverlight 5 here ] and create three rows and two columns. Create a label for the heading,

 <Grid
    x:Name="LayoutRoot"
    Background="White">
    <Grid.ColumnDefinitions>
       <ColumnDefinition
          Width="1*" />
       <ColumnDefinition
          Width="1*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
       <RowDefinition
          Height="1*" />
       <RowDefinition
          Height="2*" />
       <RowDefinition
          Height="3*" />
    </Grid.RowDefinitions>
    <sdk:Label
       Grid.ColumnSpan="2"
       Height="35"
       HorizontalAlignment="Center"
       Margin="0"
       Name="label1"
       VerticalAlignment="Center"
       Width="187"
       Content="Overflow Text"
       FontSize="24"
       HorizontalContentAlignment="Center" />

Now comes the crucial part. Create a RichTextBox and a RichTextBoxOverflow, and bind the OverflowContentTarget property of the former to the latter

<RichTextBox
   x:Name="RichTextBoxLeft"
   VerticalAlignment="Stretch"
   HorizontalAlignment="Stretch"
   Grid.Column="0"
   Grid.Row="1"
   Margin="30"
   OverflowContentTarget=
      "{Binding ElementName=RichTextBoxRight}">
   <Paragraph>
   </Paragraph>
</RichTextBox>
<RichTextBoxOverflow
   x:Name="RichTextBoxRight"
   Grid.Column="1"
   Grid.Row="1"
   VerticalAlignment="Stretch"
   HorizontalAlignment="Stretch"
   Margin="20" />

Inside the Paragraph block of the first RichTextBox we place a substantial piece of text (in the case shown above, an excerpt from the documentation for the RichTextBox).  This text will start in the original RichTextBox but will overflow into the RichTextBoxOverflow element as needed.

Note that this is all handled in the Xaml and there is no need for additional code in the code-behind to make this work.