Silverlight 5–Rich Text and Overflow

A Silverlight 5 Mini-Tutorial

In Silverlight 5 we introduce a new element, RichTextBoxOverflow.  This allows one Overflow 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.

Share

About Jesse Liberty

Jesse Liberty is an independent consultant and programmer with three decades of experience writing and delivering software projects. He is the author of 2 dozen books and multiple Pluralsight courses, and has been a Senior Technical Evangelist for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS. He is a Xamarin Certified Mobile Developer and a Xamarin MVP, Microsoft MVP and Telerik MVP.
This entry was posted in Mini-Tutorial, Silverlight 5 and tagged . Bookmark the permalink.

3 Responses to Silverlight 5–Rich Text and Overflow

  1. Pingback: Что почитать на выходных? Рекомендуем. | PROFICS

  2. Pingback: Silverlight 5 Analysis: features for Enterprise, businesses and game developers — BiGGTech

  3. jtard says:

    Neat, but for those of us who have limited imaginations….How is this useful?

Leave a Reply

Your email address will not be published.