11

I have a DataGrid in a WPF window. How can I display a phone number string column in the DataGrid in a format of "(999)999-9999"?

The Phone number column in the DataGrid uses a TextBlock in the CellTemplate and a TextBox in the CellEditingTemplate. The phone number is stored as a string with no formating such as "9995551234".

Is it possible to display the phone as:(999)555-1234 and edit it as (999)555-1234?

1
  • 1
    Why not put this directly into the model and add a ToFormattedString() or other property which you bind to? You could also use a Converter. Nov 10, 2011 at 19:37

3 Answers 3

12

Try using Text="{Binding PhoneNumber, StringFormat={}{0:(###)###-####}}"

Edit

If your PhoneNumber property is of type string, then there's not really a lot you can do with StringFormat to format it.

In the past when I've wanted to do something like this, I expose a property called FormattedPhoneNumber which returns the formatted phone number for display purposes, and the edit box just binds to plain old unformatted PhoneNumber

public string FormattedPhoneNumber
{
    get
    {
        if (PhoneNumber == null)
            return string.Empty;

        switch (PhoneNumber.Length)
        { 
            case 7:
                return Regex.Replace(PhoneNumber, @"(\d{3})(\d{4})", "$1-$2");
            case 10:
                return Regex.Replace(PhoneNumber, @"(\d{3})(\d{3})(\d{4})", "($1) $2-$3");
            case 11:
                return Regex.Replace(PhoneNumber, @"(\d{1})(\d{3})(\d{3})(\d{4})", "$1-$2-$3-$4");
            default:
                return PhoneNumber;
        }
    }
}
3
  • I tried this but the phone displays as '9995551234'. It does not use the StringFormat. here is my column of the datagrid: <DataGridTemplateColumn.CellTemplate> <DataTemplate> <TextBlock Text="{Binding PhoneNumber, StringFormat={}{0:(###)###-####}}" Width="100"/> </DataTemplate> </DataGridTemplateColumn.CellTemplate>
    – Jerry
    Nov 10, 2011 at 20:38
  • @Jerry Oh I just realized the PhoneNumber is a string, so updated my answer. If that doesn't work for you then you might have to look into building or finding your own MaskedTextBox to use
    – Rachel
    Nov 10, 2011 at 20:56
  • Yes, this works great! I added a Partial Class and added FormattedPhoneNumber as a public string. So in my DataGrid, I use FormattedPhoneNumber in the Celltemplate and PhoneNumber in the CellEditingTemplate. Works great thanks!
    – Jerry
    Nov 11, 2011 at 13:46
8

I would like to extend what already Rachel has responded. If a phone number is an integer, StringFormat would work just fine. In case a phone number is a string, I found Converter to be quite handy. This removes the need to create additional property for a class.

Here is an example:

public class StringToPhoneConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value == null)
            return string.Empty;

        //retrieve only numbers in case we are dealing with already formatted phone no
        string phoneNo = value.ToString().Replace("(", string.Empty).Replace(")", string.Empty).Replace(" ", string.Empty).Replace("-", string.Empty);

        switch (phoneNo.Length)
        {
            case 7:
                return Regex.Replace(phoneNo, @"(\d{3})(\d{4})", "$1-$2");
            case 10:
                return Regex.Replace(phoneNo, @"(\d{3})(\d{3})(\d{4})", "($1) $2-$3");
            case 11:
                return Regex.Replace(phoneNo, @"(\d{1})(\d{3})(\d{3})(\d{4})", "$1-$2-$3-$4");
            default:
                return phoneNo;
        }
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return value;
    }
}

xaml:

<TextBox Text="{Binding SelectedParticipant.PhoneNumber, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource StringToPhoneConverter}}" />
1
  • one thing you should add to your comment for the new devs, they should add <core:StringToPhoneConverter x:Key="StringToPhoneConverter"/> in <Window.Resources> were <core: is referring to the location of the Converter class we create after we add xmlns:core="clr-namespace:yourappName.Core" in the main Xaml
    – The Doctor
    Jun 12, 2022 at 1:38
2

after a short google search i found this two links the second one is in german

WPF – Masked Textbox Behavior http://marlongrech.wordpress.com/2007/10/28/masked-textbox/

Masked TextBox http://blindmeis.wordpress.com/2010/06/01/wpf-masked-textbox-behavior/

hope this helps

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.