Tips: Formatting 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 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."/>
</StackPanel>

 

Now, in this Tip I will show you a different option to do the same thing in more proficient way. Instead of using 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"/>
</TextBlock>

 

What's more? There are more other option's too. You can directly use <Bold />, <Italic />, <Underline /> tags to format the text in 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:

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

 

 

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

 

image

 

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


9 comments

  1. Hi DHoney Chamba,

    Stay tuned for my upcoming post. There I will show one more better way to do this and you will like that too.

    Regards,
    Kunal

    ReplyDelete
  2. Text property of Run is not a dependency property, you can not data bind to Run.Text.

    ReplyDelete
  3. Hello @021cb7d4340fe225c9db8ff3ec565b7e,
    Try it out. It will work for you. "Run" inherits from "Inline", which inherits from "TextElement". TextElement has it's base class as "DependencyObject". Hence, you will be able to data bind in Run element. Try with a sample code and let me know.
    Cheers,
    Kunal

    ReplyDelete
  4. May be specifying which version of Silverlight you'r using will be great ! Binding Run.Text is not possible in 3

    ReplyDelete
  5. Hey! Just wanted to say a quick thanks for your blog... I've stumbled across a few great tips of yours whilst googling for solutions to some WP7 development problems.

    Cheers!

    ReplyDelete
  6. Thank you so much Fabian. Glad to hear that, my posts were helpful to you.

    ReplyDelete
  7. if we want to have a multiple display in a single text block....which is not known in the front end that is told in the input and coded in the c#
    example: v 2 create textboxs in which output is given and v need the output in a single textblock just like multiplication table
    inputs are: 2 and 10 output should be: 2*1=2
    2*2=4
    2*3=6.....
    ....
    2*10=20
    in a single textblock

    ReplyDelete


 
© 2008-2014 Kunal-Chowdhury.com | Designed by Kunal Chowdhury
Back to top