Multi Column Text support in Silverlight 5

Silverlight 5 now has support for Multi Column Text. By using this feature, you will be able to show your text content column wise. If you are working for a news publisher company or want to publish your text content in column format, this feature will definitely help you. If you implemented this in your application, your text content will automatically position itself in the next column if the user resizes the application.

So, want to learn about it? Let's discuss it with a simple example. Read to know more.

Background

Let's take a real world scenario to understand it better. Suppose you are working in a newspaper company and your job is to create a web application in Silverlight for them where all the news will be available in a column format as you see in the newspaper. Another requirement is, when user resizes the application, it should arrange its content in the columns properly. So, how to do it?

Silverlight 5 Beta has the support for Multi Column text to use with RichTextBox. Using it, you will be able to implement the same behaviour. Let's describe it in depth.

Below is a screenshot of our demo app where we will have three column layout. The content will start rendering in the first column. If the content size increases more than the size of the column, it will start rendering it in the second column. Once the second column become full, it will start rendering in the third column, as shown below:

Note: The example shown here was created using Silverlight 5 Beta 1, which was released during MIX11. In the final release, the APIs mentioned here may change. Refer to the documentation before using it.

Playing with the Code

Hope you understood our problem statement by now. Let's start making our hands dirty with the code. To start with, let's divide the LayoutRoot Grid of our MainPage into three columns. Now add a RichTextBox control in the first column and set its height. By default, it has Horizontal and Vertical scrollbar visibility to "Auto". If you set it to "Auto", the content will have a scrollbar and hence you will not be able to play with this feature.

So, set both the Horizontal and Vertical ScrollBarVisibility to Disabled. Now, you will have a fixed size RichTextBox control. In the second column, add another control called RichTextBoxOverflow. This control displays the content that doesn't fit in the RichTextBox control. Give it a name and disable both the scrollbar visibility as we need for the RichTextBox control. Your code will look as below:

Now to implement the automatic arrangement of text in multiple columns, we need to bind the OverflowContentTarget to the next RichTextBoxOverflow control. As shown below, we mentioned the RichTextBox control to push the content to the RichTextBoxOverflow control named "column2Content", if the content is more than the actual control size.

Similarly, we will add another RixhTextBoxOverflow control in the third column and bind it to the OverflowContentTarget property of the 2^nd column control.

Find the full XAML code of the implementation here:

<RichTextBox HorizontalScrollBarVisibility="Disabled"
                VerticalScrollBarVisibility="Disabled"
                Height="300" Grid.Column="0" Margin="5"
                OverflowContentTarget="{Binding ElementName=column2Content}">
           
</RichTextBox>
<RichTextBoxOverflow x:Name="column2Content"
                        HorizontalScrollBarVisibility="Disabled"
                        VerticalScrollBarVisibility="Disabled"
                        Height="300" Grid.Column="1" Margin="5"
                        OverflowContentTarget="{Binding ElementName=column3Content}"/>
<RichTextBoxOverflow x:Name="column3Content"
                        HorizontalScrollBarVisibility="Disabled"
                        VerticalScrollBarVisibility="Disabled"
                        Height="300" Grid.Column="2" Margin="5"/>

Remember, you can chain it as long as you can and every RichTextBoxOverflow control can bind with the other to make your content flow in all the columns.

Actual Result

Once our coding part is done, build the project and run it inside the browser. You will see three different input controls there as shown below:

All the three controls are arranged in three columns as directed. Let's copy some text strings from somewhere and paste it in the first RichTextBox control. If the content size is more than the actual control size, you will see that some text moved to the 2^nd column automatically. If you add more text and once the content size increases more than the column size, it will overflow to the 3^rd one.

Have a look at the below screenshot:

It not only overflows the content, but you will be able to select text flown over multiple columns. Let's try it out. Start selecting text from the first column and move your mouse to the next column, you will see the text selected from both the columns, as shown below:

What Next?

Hope, this helped you to understand the feature very easily. Try it out and if you have further queries, let me know. I will try to reply as early as possible.

I also tweet @kunal2383, if you are a Twitter user follow me to know about my next posts. I also collect various articles from the net and post them at Silverlight-Zone.com. If you are a Silverlight and/or WP7 application developer, follow us @SilverlightZone. We will keep you updated on the latest daily article news.

Stay tuned for my next article. Enjoy exploring the new features of Silverlight 5 Beta. Happy coding.