Click here to Skip to main content
Click here to Skip to main content
Go to top

Multi Column Text support in Silverlight 5

, 17 May 2011
Rate this:
Please Sign up or sign in to vote.
Learn about Multi Column Text support in Silverlight 5 with a simple example

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:

image

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:

image

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.

image

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 controls there as shown below:

image

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

Have a look at the below screenshot:

image

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:

image

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

_ Kunal Chowdhury _
Technical Lead
India India
Kunal Chowdhury is a Microsoft "Client Development" MVP (Most Valuable Professional), a Codeproject Mentor, Telerik MVP, Nokia Developer Champion, Speaker in various Microsoft events, Author, passionate Blogger and a Software Engineer by profession.
 
He is currently working in an MNC located in India. He has a very good skill over XAML, C#, Silverlight, Windows Phone, WPF and Windows 8 (WinRT). He posts his findings, articles in his technical blog and CodeProject.
 
Technical Blog: http://www.kunal-chowdhury.com
Facebook: http://facebook.com/blog.kunal
Twitter : http://twitter.com/kunal2383
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
QuestionHelp required Pinmembersome1shamsi9-Jan-12 21:12 
GeneralMy vote of 5 PinmvpBrij28-May-11 21:28 
General5 from me PinmemberNick Polyak18-May-11 1:36 
GeneralRe: 5 from me PinmvpKunal_Chowdhury18-May-11 1:42 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140921.1 | Last Updated 17 May 2011
Article Copyright 2011 by _ Kunal Chowdhury _
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid