Click here to Skip to main content
12,950,399 members (63,381 online)
Click here to Skip to main content
Add your own
alternative version


3 bookmarked
Posted 9 May 2011

Tips: Formatting Silverlight TextBlock Control

, 9 May 2011 CPOL
Rate this:
Please Sign up or sign in to vote.
How to format Silverlight TextBlock control

In general, we use multiple TextBlock controls inside a StackPanel to format a single line. In this post, I will show you a different way to format a single line. This is very useful if you want to bind any data in the middle of the text string. Also, this is useful if you want to format the line with multiple formatting option. Read to know more about it.

In general, if we want to bind a data in between text or want to style a single line with multiple text format, how do we design it? We use StackPanel with multiple TextBlock wrapped using proper orientation as shown below:

<StackPanel Orientation="Horizontal" 

DataContext="{StaticResource User}">
    <TextBlock Text="Welcome "/>
    <TextBlock Text="{Binding Name}"/>
    <TextBlock Text=" to our site."/>

Now, in this tip, I will show you a different option to do the same thing in a more proficient way. Instead of using a multiple TextBlock control, we will use a single TextBlock control now and in this case, we will not need any StackPanel too.

So, how to implement it? Add a TextBlock control in your XAML page and insert <Run /> tag to insert multiple text chunks. All the text formatting properties like FontFamily, FontSize, Foreground color, etc. are also part of the <Run /> tag.

In the below code snippet, I demonstrated the use of "Run" to insert a DataBinding at the middle of the string to add the User's name:

<TextBlock DataContext="{StaticResource User}">
    <Run Text="Welcome"/>
    <Run Text="{Binding Name}"/>
    <Run Text="to our site"/>

What's more? There are other options too. You can directly use <Bold />, <Italic />, <Underline /> tags to format the text in a proper fashion. If you want to add a single line break, you can do so by using the <LineBreak /> tag. If you don't use the LineBreak tag, the texts will place in a single line. Also, if you want to add more formatting to your text, you can use the <Span /> tag which has a set of properties to control your styling.

Check the below code for more details:

    <Bold>This is a Bold Text.</Bold>
    <Italic>It's an Italic Text.</Italic>
    <Underline>This Text has Underline.</Underline>
    <Span Foreground="Red">Spaned text with Color Red.</Span>

The above code will output the following text in the UI:


Hope this tip will help you next time while working with text formatting in Silverlight. There are many options there to customize the string style. Explore it more and who knows, it will help you in future.


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»
Software Developer (Senior)
India India
Kunal Chowdhury is a Microsoft "Windows Platform Development" MVP (Most Valuable Professional), a Codeproject Mentor, Telerik Developer Expert, Nokia Developer Champion, Windows 10 Champion, Microsoft Rockstar, 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 Store (WinRT) app development. He posts his findings, articles, tutorials in his technical blog and CodeProject.

Technical Blog:
Twitter :

You may also be interested in...


Comments and Discussions

GeneralMy vote of 3 Pin
janslodicka30-May-11 3:21
memberjanslodicka30-May-11 3:21 
GeneralRe: My vote of 3 Pin
Kunal_Chowdhury30-May-11 3:39
mvpKunal_Chowdhury30-May-11 3:39 
GeneralRe: My vote of 3 Pin
janslodicka30-May-11 4:20
memberjanslodicka30-May-11 4:20 
GeneralJoking? Pin
janslodicka30-May-11 3:01
memberjanslodicka30-May-11 3:01 
GeneralRe: Joking? Pin
Kunal_Chowdhury30-May-11 3:22
mvpKunal_Chowdhury30-May-11 3:22 
GeneralRe: Joking? Pin
janslodicka30-May-11 4:28
memberjanslodicka30-May-11 4:28 
GeneralMy vote of 5 Pin
Brij9-May-11 3:21
mvpBrij9-May-11 3:21 
GeneralRe: My vote of 5 Pin
Kunal_Chowdhury9-May-11 3:41
mvpKunal_Chowdhury9-May-11 3:41 
GeneralMy vote of 5 Pin
Abhishek Sur9-May-11 3:20
mvpAbhishek Sur9-May-11 3:20 
GeneralRe: My vote of 5 Pin
Kunal_Chowdhury9-May-11 3:37
mvpKunal_Chowdhury9-May-11 3:37 
GeneralNice job Pin
Shahriar Iqbal Chowdhury9-May-11 3:05
memberShahriar Iqbal Chowdhury9-May-11 3:05 
GeneralRe: Nice job Pin
Kunal_Chowdhury9-May-11 3:12
mvpKunal_Chowdhury9-May-11 3:12 

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

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

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170525.1 | Last Updated 9 May 2011
Article Copyright 2011 by Kunal Chowdhury «IN»
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid