Click here to Skip to main content
12,629,978 members (26,469 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


4 bookmarked

Formatting text in Silverlight XAML using StringFormat

, 13 May 2011 CPOL
Rate this:
Please Sign up or sign in to vote.
In my latest two tips we have seen that we can customize the string using Run, Span tags as well as StringFormat in the XAML page. What about if I want to format it for proper DateTime, Currency or Numeric style? As I told you in my last post that, we can achieve the same using the StringFormat...

In my latest two tips we have seen that we can customize the string using Run, Span tags as well as StringFormat in the XAML page. What about if I want to format it for proper DateTime, Currency or Numeric style? As I told you in my last post that, we can achieve the same using the StringFormat parameter in XAML too.

Here in this post, I will demonstrate you the process in depth. Read to know more about it and make your life more comfortable designing your Silverlight application.

If you didn't read my previous two tips, you can find them here:

Working with Strings

Let us first see what we can do using StringFormat for our strings? We can use various string formats mentioned here in MSDN document. Take reference from it if you want. So, start with a simple example.

At the first step, we will create a DependencyProperty of type string in our code behind called "Text". Then we will add the following code in our XAML page:

    <Run Text="Normal string: "/>
    <Run Text="{Binding Text, ElementName=userControl}"/>
    <Run Text="String with atleast 15 characters length: "/>
    <Run Text="{Binding Text, StringFormat=\{0\,15\}, ElementName=userControl}"/>
    <Run Text="String with atleast 25 characters length: "/>
    <Run Text="{Binding Text, StringFormat=\{0\,25\}, ElementName=userControl}"/>
    <Run Text="Text with quote: "/>
    <Run Text="{Binding Text, StringFormat='The string &quot;\{0\}&quot; inside a quot',

The first TextBlock will show a normal string in the UI. The 2nd one will have total 15 characters length and if our text is less than 15, it will show a blank space of the remaining length at the front. The 3rd example will show the same case but for 25 characters. In this case, it will have more space at the front. The 4th example will show a concatenated string in the UI with a quot. Remember that, you have to specify a valid ASCII value there.

The above code will render the following UI in the screen:


Working with Numbers

As shown above, you can format a number too. Read the MSDN document here to know more about the format of the same.

First of all, create a DependencyProperty for our example which will return a numeric value. Now, use the below example to learn about it's use in XAML:

    <Run Text="Normal Number: "/>
    <Run Text="{Binding Number, ElementName=userControl}"/>
    <Run Text="Above number with 2 decimal point: "/>
    <Run Text="{Binding Number, StringFormat=\{0:n2\}, ElementName=userControl}"/>
    <Run Text="Above number with 4 decimal point: "/>
    <Run Text="{Binding Number, StringFormat=\{0:n4\}, ElementName=userControl}"/>
    <Run Text="Above number with 10 Zero place holder: "/>
    <Run Text="{Binding Number, StringFormat=\{0:0000000000\}, ElementName=userControl}"/>

We used {0:nx} to format a numeric value where 'n' formats it as numeric and 'x' represents no. of decimal point.

In this example, we will 1st see the number in normal format. The 2nd example will show the same number in two decimal point. The 3rd example showcases it with 4 decimal point. The 4th one puts zero as place holder of 10 digits. If the number is less than the specified length, it will show zero's preceding the original no.

Let's have a demo of the above code here:


You can see here that, as the original no. is of 4 digits, it adds 6 zeros in front of the no. to make it a 10 digit number.

Working with Currencies

Let's have a demo on currency too. This will localize the currency based on the rule already set in the client system. We will use the same property used in the previous point.

We will use the following XAML code to format our currency value, to demonstrate the example:

    <Run Text="In Currency with zero decimal point: "/>
    <Run Text="{Binding Number, StringFormat=\{0:c0\}, ElementName=userControl}"/>
    <Run Text="In Currency with two decimal point: "/>
    <Run Text="{Binding Number, StringFormat=\{0:c2\}, ElementName=userControl}"/>

We will format the Number as Currency by specifying the StringFormat as {0:cx} where 'c' defines the currency format and 'x' represents the decimal point. In the 1st TextBlock, we will have a currency with zero decimal point and in the 2nd one will have a two decimal point.

Let's see the demo of the above example here:


As the above example was run in my machine (in India), hence you can notice that it shows the value in Indian currency format (Rs.). If you run it in different location having a different localization, it will show the currency in that format only.

Working with DateTime

Working with DateTime is also similar to that. If you are familiar with the formats mentioned in MSDN documentation, you can easily format your DateTime accordingly. Find the valid formats for DateTime here. I am not going to discuss more on the format but will give you some example which you can use to apply different styles.

Let us use the following XAML code:

    <Run Text="Full date/time pattern (short time): "/>
    <Run Text="{Binding DateTime, StringFormat=f, ElementName=userControl}"/>
    <Run Text="Full date/time pattern (long time): "/>
    <Run Text="{Binding DateTime, StringFormat=F, ElementName=userControl}"/>
    <Run Text="Short date/time pattern (short time): "/>
    <Run Text="{Binding DateTime, StringFormat=g, ElementName=userControl}"/>
    <Run Text="Short date/time pattern (long time): "/>
    <Run Text="{Binding DateTime, StringFormat=G, ElementName=userControl}"/>

The 1st example will show the DateTime in full date and short time format, the 2nd example show both of them in long format. 3rd example will show both the date and time in short format and the 4th one will format the date in short pattern and the time in long pattern.

See the demonstration of the above code here:


All these values depends on your machine configuration. Hence, you may notice a different thing based on your localization settings in your computer.

End Note

Hope this post is helpful to you and you understood how to format a string in XAML using the StringFormat parameter while binding the data. Download the full solution from here if you want to run it and use the code.

Don't forget to leave your feedback at the end of the post. Suggestions are always welcome. I also tweets. Follow me on twitter @kunal2383. Thanks for reading this post. 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_
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

QuestionWhat about how to add a space after a resource String? Pin
Deb Kumar Ghosal18-Feb-14 1:41
memberDeb Kumar Ghosal18-Feb-14 1:41 
GeneralMy vote of 5 Pin
Nick Polyak25-Apr-13 12:05
memberNick Polyak25-Apr-13 12:05 
GeneralMy vote of 4 Pin
Member 374705827-Nov-12 3:42
memberMember 374705827-Nov-12 3:42 
GeneralMy vote of 2 Pin
SercanOzdemir13-May-11 4:17
memberSercanOzdemir13-May-11 4:17 
GeneralRe: My vote of 2 Pin
Kunal_Chowdhury13-May-11 6:39
mvpKunal_Chowdhury13-May-11 6:39 
GeneralRe: My vote of 2 Pin
Jani Giannoudis15-May-11 11:37
memberJani Giannoudis15-May-11 11:37 
GeneralRe: My vote of 2 Pin
Member 1113244918-Nov-14 3:42
memberMember 1113244918-Nov-14 3:42 

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.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.161205.3 | Last Updated 13 May 2011
Article Copyright 2011 by _Kunal Chowdhury_
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid