Multi Column Text support in Silverlight 5

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

So, want to learn about it? Let's discuss on 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 it's 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 columns 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:

Playing with the Code

Hope you understood our problem statement by now. Let's start doing our hand 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 it's height. By default, it has Horizontal and Vertical scroll bar 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 2nd 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 control there as shown below:

All the three controls are arranged in three column 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 2nd column automatically. If you add more text and once the content size increases than the column size, it will overflow to the 3rd one.

Have a look into 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 column, 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 answer you 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 latest daily article news.

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