Click here to Skip to main content
14,036,452 members
Click here to Skip to main content
Add your own
alternative version


1 bookmarked
Posted 13 May 2011
Licenced CPOL

What is Character Spacing in Silverlight 5 Controls

, 13 May 2011
Rate this:
Please Sign up or sign in to vote.
What is Character spacing in Silverlight 5 controls

There are many new features announced to support Text advancements in Silverlight 5 Beta. Among them, one is 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 help you understand better. Read it and start learning Silverlight 5 features.

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


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 on, you need to create a new Silverlight project.

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

  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 which discusses 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". This property is responsible for adding space between characters in the string. The higher the value you enter, the more the characters will be expanded. On the other hand, if you enter a lower value (let's say a negative value), the characters will be more condensed. Depending on your requirement, chose the desired value.

Remember: Character spacing is part of the base class "Control". So, it will be available to all controls which derive from "Control".

Let's start with a small example. We will add the character spacing to TextBlock control. It is the 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" 

<TextBlock Text="This is a text string with 250 character spacing" 

<TextBlock Text="This is a text string with 500 character spacing"

<TextBlock Text="This is a condensed text string using -100 character spacing" 


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 third and fourth TextBlock control will be expanded to a higher level depending on the entered value. In the fifth 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:


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 pixels and you provided character spacing of 500 pixels, 5 pixels 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 pixels.

I 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 class. Stay tuned for my next post where I will demonstrate other advancements in Silverlight 5 text.

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


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


About the Author

Kunal Chowdhury «IN»
Technical Lead
India India

Kunal Chowdhury is a former Microsoft "Windows Platform Development" MVP (Most Valuable Professional, 2010 - 2018), a Codeproject Mentor, Speaker in various Microsoft events, Author, passionate Blogger and a Senior Technical Lead 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 app development. He posts his findings, articles, tutorials in his technical blog ( and CodeProject.

Books authored:

Connect with Kunal on:

You may also be interested in...


Comments and Discussions

-- There are no messages in this forum --
Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web06 | 2.8.190424.1 | Last Updated 13 May 2011
Article Copyright 2011 by Kunal Chowdhury «IN»
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid