Follow Me on Instagram Subscribe via RSS Feed

4th Day of Silverlight: Linked and Multi-Column Text

December 14, 2011

So it’s day four, and we are moving right along with the 12 Days of Silverlight series.  There has been a lot of text changes added to Silverlight 5 to help address some layout needs that have been expressed.  So I thought we would take a look at one of these additions today.

On the fourth day of Silverlight, the team delivered to me… linked and multi-column text.

If you have ever tried to get the magazine multi-column look in Silverlight, you know that it can be quite difficult.  Trying to flow text from one point to the next has not been supported in previous versions of Silverlight.  Silverlight 5 introduces a new control, the RichTextBlockOverflow, that when combined with the existing RichTextBlock control can produce this exact behavior.

Let’s start up a new Silverlight application and take a look at how this works.  First we will add a simple RichTextBlock to our MainPage XAML.  Of course, what would a text example be without a little Latin?  I surrounded the RichTextBlock, as I will all of the RichText controls in this post, with a Border control so you could see the bounds.  It will come in handy in a little while.

<Grid x:Name="LayoutRoot" Background="White">
    <Border BorderBrush="Gray" BorderThickness="1" 
            Width="300" Height="Auto">
    <RichTextBlock Width="300">
        <Paragraph>
            Lorem ipsum dolor ...
        </Paragraph>
        <Paragraph> 
            Ut id elementum felis. Etiam...
        </Paragraph>
        <Paragraph>
            Pellentesque blandit feugiat elit...
        </Paragraph>
        <Paragraph>
            Nulla tempor consectetur hendrerit...
        </Paragraph>
    </RichTextBlock>
    </Border>
</Grid>

If you run your project, you should get something like this:

image

Yep, that looks like Latin to me.  But what if we wanted to flow the text to a second column to give it that magazine look?  Enter our new RichTextBlockOverflow control.  All this control does is binds to your original RichTextBlock control and displays any overflow (thus the name) in it’s container.  To add this control, we will add a RichTextBlockOverflow to our XAML.  Then we need to bind the OverflowContentTarget property of our RichTextBlock to the new control.  In this case a simple ElementName binding will do the trick.  So the new XAML will look something like this :

<Grid x:Name="LayoutRoot" Background="White">
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Border BorderBrush="Gray" BorderThickness="1" 
                Width="300" Height="Auto" 
                HorizontalAlignment="Right"
                Margin="0,20,10,20">
        <RichTextBlock Width="300"
         OverflowContentTarget="{Binding ElementName=overflow1}">
               ...
            </Paragraph>
        </RichTextBlock>
    </Border>
    <Border BorderBrush="Gray" BorderThickness="1" 
            Width="300" Height="Auto" 
            Grid.Column="1"
            HorizontalAlignment="Left"
            Margin="10,20,0,20">
        <RichTextBlockOverflow x:Name="overflow1"
            Width="300"/>
    </Border>
</Grid>

Running the application will now give you two columns of text with the first overflowing to the second.  A nice feature of this is that it is dynamic.  If you resize your browser window you will notice that the amount of text in the overflow will automatically adjust to the give size.

image

Pretty cool stuff if you ask me.  But wait, there’s more.  You will notice that the RichTextBlockOverflow control also has a OverflowContentTarget property.  This allows you to link multiple controls together to give you more control over the flow of text.  Below is an example of how this can be used.

<Grid x:Name="LayoutRoot"
    HorizontalAlignment="Center"
    VerticalAlignment="Center"
    Width="660"
    Height="Auto"
    Background="LightGray">
    <Border BorderBrush="Gray" BorderThickness="1" 
            Width="300" Height="200"
            VerticalAlignment="Top"
        HorizontalAlignment="Left"
            Margin="20,20,10,0">
        <RichTextBlock 
         OverflowContentTarget="{Binding ElementName=overflow1}">
          ...
        </RichTextBlock>
    </Border>
    <Border BorderBrush="Gray" BorderThickness="1" 
        Width="200" Height="200" 
        VerticalAlignment="Top"
        HorizontalAlignment="Left"
            Margin="20,220,10,0">
        <RichTextBlockOverflow x:Name="overflow1"
        OverflowContentTarget="{Binding ElementName=overflow2}"/>
    </Border>
    <Border BorderBrush="Gray" BorderThickness="1" 
        Width="300" Height="Auto" 
        VerticalAlignment="Top"
        HorizontalAlignment="Left"
            Margin="20,420,10,20">
        <RichTextBlockOverflow x:Name="overflow2"
         OverflowContentTarget="{Binding ElementName=overflow3}"/>

    </Border>
    <Border BorderBrush="Gray" BorderThickness="1" 
        Width="300" Height="200" 
        VerticalAlignment="Top"
        HorizontalAlignment="Left"
            Margin="340,20,20,0">
        <RichTextBlockOverflow x:Name="overflow3"
         OverflowContentTarget="{Binding ElementName=overflow4}"/>

    </Border>
    <Border BorderBrush="Gray" BorderThickness="1" 
        Width="200" Height="200" 
        VerticalAlignment="Top"
        HorizontalAlignment="Left"
            Margin="440,220,20,0">
        <RichTextBlockOverflow x:Name="overflow4"
         OverflowContentTarget="{Binding ElementName=overflow5}"/>

    </Border>
    <Border BorderBrush="Gray" BorderThickness="1" 
        Width="300" Height="Auto" 
        VerticalAlignment="Top"
        HorizontalAlignment="Left"
            Margin="340,420,20,20">
        <RichTextBlockOverflow x:Name="overflow5"/>

    </Border>
</Grid>

image

As you can quickly see, this gives you a lot of options when displaying text in your applications.  You can download the source (yep with all of the Latin) here : DaysOfSilverlight_Linked.zip

Four down and eight to go.  We will continue the 12 Days of Silverlight series tomorrow.  See you then…

Series Navigation<< 3rd Day of Silverlight: Databinding Debugging5th Day of Silverlight: Text Improvements >>
Filed in: Silverlight, Silverlight 5 • Tags:

Leave a Reply