What is Character Spacing in Silverlight 5 Controls


There are many new feature announced to support Text advancements in Silverlight 5 Beta. Among them, one is the character spacing. This feature adds spacing between characters inside a TextBlock, RichTextBox and other control elements.

 

In this post we will demonstrate the use of this new feature and also showcase a simple demo to make you understand better. Read it and start learning Silverlight 5 features.

 

 

If you are very new to Silverlight 5, you may want to read the other new features of it. I already blogged about them. You can find some of the features with step-by-step demonstration here:

 

Prerequisite

Before starting with the rest of the topic, you need to set up your development environment. You need Visual Studio 2010 with SP1, Silverlight 5 Beta Tools for Visual Studio 2010. Later you need to create a new Silverlight project.

 

Find the below posts, which will answer all your queries and help you to set up your prerequisite:

  1. Install Silverlight 5 Beta in your development environment. You can install it side-by-side with the existing Silverlight versions
  2. New to Silverlight 5? This post will help you to Create your first Silverlight 5 project.

Once your development environment is set up properly, jump to the next step to start discussing on the main topic. Don't forget to ask your queries at the end of the article.

 

 

Character Spacing

Every text element (including TextBlock, TextBox, Run, Bold, Italic, RichTextBox, button etc.) has a new property called "CharacterSpacing". It is actually part of the base class "Control" and "TextElement". This property is responsible for adding space between characters in the string. The higher value you enter, the characters will be more expanded. In the other hand, if you enter a lower value (let's say negative value), the characters will be more condensed. Depending on your requirement, chose the desired value.

 

Remember: Character spacing is part of base class "Control" and "TextElement". So, it will be available to all controls which derives from those base class.

 

Let's start with a small example. We will add the character spacing to TextBlock control. It is same for all other controls too. Hence, we will just demonstrate with a simple TextBlock. Let us discuss it with the following code:

 

 
<TextBlock Text="This is a normal text string without any character spacing"/>
<TextBlock Text="This is a text string with 100 character spacing" 
           CharacterSpacing="100"/>
<TextBlock Text="This is a text string with 250 character spacing" 
           CharacterSpacing="250"/>
<TextBlock Text="This is a text string with 500 character spacing"
           CharacterSpacing="500"/>
<TextBlock Text="This is a condensed text string using -100 character spacing" 
           CharacterSpacing="-100"/>

 

In our first TextBlock, we didn't add any character spacing and hence it will render as normal with the default zero character spacing. In the next TextBlock we added character spacing as 100, so the string will be little expanded. Similarly, the 3rd and 4th TextBlock control will be expanded in higher depth depending on the entered value. In the 5th TextBlock, as we provided a negative value to the character spacing property, the string will be more condensed. If we reduce it more you will see more condensed string in the UI.

 

The above XAML code will produce the below output in the string:

 

image

 

 

How Character Spacing works?

The distance between characters of text in the control measured in 1000ths of the font size. If you have a font size of 10 pixel and you provided character spacing of 500 pixel, 5 pixel will be the actual spacing between each character.

 

The simple calculation logic is as below:

 

Actual Spacing between Characters = (Font Size * Provided Character Spacing ) / 1000;

 

In our case, it is: (10 * 500) / 1000 = 5 pixel.

 

Hope, this post was clear and to the point to demonstrate you the basic of this feature in terms of the new property in the Control and TextElement class. Stay tuned for my next post where I will demonstrate you other advancements in Silverlight 5 texts.

 

I also tweet. Follow me on twitter @kunal2383 for article update and/or any other news announcements. Appreciate your feedback and vote. Happy Coding.


If you have come this far, it means that you liked what you are reading. Why not reach little more and connect with me directly on Twitter , Facebook , Google+ and LinkedIn . I would love to hear your thoughts and opinions on my articles directly. Also, don't forget to share your views and/or feedback in the comment section below.

2 comments

  1. Though I didn't get a time to explore Silverlight 5 yet, but I will say that all the features are very nice. Character Spacing was most wanted one there for text advancement. Thank you for sharing.

    ReplyDelete


 
© 2008-2016 Kunal-Chowdhury.com - Microsoft Technology Blog for developers and consumers | Designed by Kunal Chowdhury
Back to top