Complete Guide to Windows Phone StringFormat Binding

I wrote a post on this for Silverlight way back in the day but thought it would be good to do an update for Windows Phone.

Are you tired of using two TextBlocks when you could be using just one? Are you tired of clumsily writing:

<StackPanel Orientation="Horizontal">
     <TextBlock Text="Your name is "/>
     <TextBlock Text="{Binding username}"/>
</StackPanel>

Then you should be using StringFormat in your XAML bindings.

StringFormat means that is we want to create a button that says “log out of <username>” we can do that right in the binding with:

<Button Content=”{Binding username, StringFormat=’Log out of {0}’}” />

The news gets even better for numbers and dates. We don’t need to manage a “Geoposition.Latitude” and a “LatitudeDisplay” property. We can just write

<TextBlock Text=”{Binding MyGeoposition.Latitude, StringFormat=\{0:F3\}}” />

and it will display our latitude to 3 decimal points.

Localization and StringFormat

If you’re writing an app and you want it to show

Monday, December 10, 2012

to a US audience and

lunes, 10 de diciember de 2012

to a Spanish audience, there is one little trick you need to implement. Go to the constructor of your view and add:

this.Language = XmlLanguage.GetLanguage(Thread.CurrentThread.CurrentCulture.Name);

Using Blend

Finally, if you’re exploring StringFormat, use Blend. I look at selecting bindings in Blend here and it really couldn’t be easier to select the binding you want from your ViewModel and just pick the StringFormat option that best fits your scenario from a list.

Download StringFormat Project

You can also download a project at github to see these bindings in action.

Samples

Below is a sampling of StringFormat options that I’ve verified work in all Windows Phone binding scenarios.

String

For a string with the value “WinPhone rocks”.

StringFormat=\{0,20\} : “ WinPhone rocks”
StringFormat=\{0,-20\} : “WinPhone rocks ”
StringFormat=’I just typed "\{0\}".’ : “I just typed “WinPhone rocks”.”

Numbers

For a double with the value : 18749.3574

StringFormat=\{0:C\} : $18,749.36

StringFormat=\{0:F\} : 18749.36

StringFormat=\{0:N\} : 18,749.36

StringFormat=\{0:E\} : 1.874936E+004

StringFormat=\{0:P\} : 1,874,936.74%

You can also use the format:

StringFormat=\{0:[letter][number]\} :

so that [letter] indicates why kind of formatting and [number] indicates the decimal place:

StringFormat=\{0:E5\} : 1.87494E+004

StringFormat=\{0:F3\} : 18,749.357

StringFormat=\{0:P0\} : 1,874,936%

StringFormat=’Amount available: \{0:C0\}” : Amount available: $18,749

Dates

Date formatting is extremely flexible with a large number of preset options and a custom formatting structure that gives a lot of options. If you implement the localization feature above, it is like its own special kind of magic.

For the date (with US localization): 1/25/2013 3:30:23 PM

StringFormat=\{0:d\} : 1/25/2013

StringFormat=\{0:D\} : Thursday, January 25, 2013

StringFormat=\{0:f\} : Thursday, January 25, 2013 3:30 PM

StringFormat=\{0:F\} : Thursday, January 25, 2013 3:30:23 PM

StringFormat=\{0:g\} : 1/25/2013 3:30 PM

StringFormat=\{0:G\} : 1/25/2013 3:30:23 PM

StringFormat=\{0:M\} : January 25

StringFormat=\{0:R\} : Thu, 25 Jan 2013 15:30:23 GMT

And if none of these formats suit you, you can define your own DateTime format:

StringFormat=’hh:mm:ss:fff tt’ : 03:30:23.423 PM

StringFormat=’MM/dd/yy’ : 01/25/13