Silverlight 5 : Improvements in Text

I hope you must have installed Silverlight 5 Beta bits on your machine and wondering what’s new you got in those bits.Well, there are lots of new things hidden inside which are worth exploring.I am doing the same with equal passion and enthusiasm.

Today in this little blog post I am going to talk about some smart improvements for Text.

Character Spacing :

CharacterSpacing is a property of type Integer (System.Int32),If you refer official Silverlight 5 documentation,you will find the definition of CharacterSpacing as :

Gets or sets the distance between characters of text in the control measured in 1000ths of the font size

Let me add some more information here as well since we are talking about stuff from Document. For those who are new to Silverlight 5 documentation you will see following icon :

In front of many properties you will see such icons, well left side of the icon represents the property as Public property and right side of the icon represents that the property is supported by Silverlight on Windows Phone. Well,coming back to the topic, I hope you got the idea what CharacterSpacing does for you. Its basically help you to manage and have full control over character space of your text in your Silverlight application. Here is how it looks like :

You can see how the Text gets compressed and expand on varying the CharacterSpacing. Here is a piece of XAML which you can play and checkout how exactly it will look in your application when you implement CharacterSpacing.

XAML :

<Grid.RowDefinitions>
            <RowDefinition Height="20"/>
            <RowDefinition Height="20"/>
</Grid.RowDefinitions>
<TextBlock FontSize="12" x:Name="myTxt" Grid.Row="0" >
            Silverlight हे सर्व वेब-ब्राउजर वर चालणारे Plug-in आहे, तसेच हे विविध Operating Systems वर ही वापरता येते.
</TextBlock>
<Slider x:Name="mySlide" Grid.Row="1" Maximum="400" Minimum="-400" SmallChange="50" ValueChanged="mySlide_ValueChanged" />

C# Code :

private void mySlide_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
    myTxt.CharacterSpacing = Convert.ToInt32(mySlide.Value);
}

Note : CharacterSpacing property can be set from XAML as well.

..and here is the output :

In each of the output shot you can see how the character spacing varies and thus gives you full control over text in your Silverlight 5 Application.Well how you are going to use in your business scenario it upto you only.

RichTextBoxOverflow,Multi-column and Linked text :

Many times we see that inside application for TextBoxes or RichTextBoxes we have massive scrollers since the content is big and there is no facility to handle overflow of the content in the given Text container. So if you see our normal Multicolumn magzines, its sometimes becomes difficult to put Text in that Multicolumn magazine kind of fashion since its difficult to manage flow of text.

With Silverlight 5 you can create wonders, All you need is to set OverflowContentTarget Property and you will be able to handle all linked,multicolumn text without any much heavy efforts.The official Silverlight 5 documentation describes OverflowContentTarge as :

Gets or sets the RichTextBoxOverflow that will consume the overflow content of this RichTextBox.

Let me show you this via piece of XAML here :

<StackPanel Width="400">
        <RichTextBox x:Name="MasterRTB" Width="300" Height="50" OverflowContentTarget="{Binding ElementName='overflowContainer'}">
            <Paragraph>
                    Silverlight हे सर्व वेब-ब्राउजर वर चालणारे Plug-in आहे, तसेच हे विविध Operating Systems वर ही वापरता येते, गेली अनेक वर्षे Microsoft ASP.NET च्या मदतीने आपण अनेक प्रकारचे प्रकल्प कार्यान्वित करत आलो आहोत, काही वर्षांपूर्वी त्याला AJAX ने ही चांगलाच हातभार लावला आहे, आता त्याच धर्तीवर Microsoft आपल्याला Silverlight बरोबर एक पाउल पुढे नेत आहे.
             </Paragraph>
        </RichTextBox>
<RichTextBoxOverflow x:Name="overflowContainer"/>
</StackPanel>

As you can see that I have big chunk of data in <Paragraph> tag and if I look at Dimensions of RichTextBox, there is a fear that either I will loose some of my Text just because it will not fit in or I need to put scrollbar and other stuff. Instead of that now what we can do in this particular example is to add one more control <RichTextBoxOverflow> (You can have multiple RichTextBoxOverflow Controls or even you might want to form chain of those controls which is possible) and set OverflowContentTarget of the base Rich Text box. This will point at where your extra overflow Text should go and then it will flow freely in another text container. Hence with such implementations you can achieve Multicolumn text requirements as well. Here is a small output of above XAML where you can clearly see how text is flowing smoothly across those Rich Text containers.

Well, I hope you got these two small features introduced in Silverlight 5 Beta. With this you can move ahead and create PoCs where you can test the capability and power of these features with high design quality keeping in mind. With this I end this post here and by the time you finish exploring this feature I will be back with more new features of Silverlight 5. In coming articles we will also discuss the pain points of each features and how we can address those issues. So see you very soon !

Vikram.