Update: this blog has been moved to http://brandonzeider.me/2010/microsoft-net/silverlight-phone-number-formatter-with-ivalueconverter/

Databinding in Silverlight is extremely powerful, and is one of the top reasons to use Silverlight in your line of business application. At some point, you're going to want to format the data you're displaying in your view (XAML). Simple formatting can be done via the StringFormat property of the binding expression, however, for more complex formatting, you need to use a value Converter. A converter is any class that implements the IValueConverter interface. This is a very simple interface with only two methods: Convert and ConvertBack that, you guessed it, convert your data for display, and then convert back for utilization.

For example, if you want a TextBlock to display a formatted phone number, a simple way to accomplish this is to create a phone number converter, and then specify that converter in your binding expression. There are other ways to accomplish this of course, but this is a very clean and reusable way to accomplish the task. Here is a sample implemenatation that formats 555-1234 and 123-555-1234 phone number formats:

public sealed class PhoneNumberFormatter : IValueConverter
{
	#region IValueConverter Members

	public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
	{
		string phoneNumber = System.Convert.ToString(value);

		if (!string.IsNullOrEmpty(phoneNumber))
		{
			switch (phoneNumber.Length)
			{
				case 7:
					phoneNumber = phoneNumber.Substring(0, 3) + "-" + phoneNumber.Substring(3, 4);
					break;

				case 10:
					phoneNumber = phoneNumber.Substring(0, 3) + "-" + phoneNumber.Substring(3, 3) + "-" + phoneNumber.Substring(6, 4);
					break;
			}
		}

		return phoneNumber;
	}

	public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
	{
		return System.Convert.ToString(value).Replace("-", "");
	}

	#endregion IValueConverter Members
}

That's all there is to it. You can modify the implementation to specify your own phone number formatting. Now that we have created a converter, we can utilize it in our binding expression. First, we need to reference the converter namespace and assembly:

xmlns:converters="clr-namespace:Framework.Converters;assembly=Framework"

Next we need to create a local resource to specify the converter class:

<UserControl.Resources>
         <converters:PhoneNumberFormatter x:Key="phoneNumberFormatter"/>
</UserControl.Resources>

And finally we specify the converter in our TextBlock's binding expression:

<TextBlock Text="{Binding ElementName=InputTextBox, Path=Text, Converter={StaticResource phoneNumberFormatter}}" />

That's it! Now we have a reusable phone number formatter that we can use throughout all of our views. For a full working example, see the download link below.

FormatPhoneNumberExample.zip (104.04 kb)

This work is licensed under a Creative Commons Attribution 3.0 Unported License.