Credit Card Formatting Using IValueConverter In XAML

Credit Card Formatting Using IValueConverter In XAML

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

As I mentioned in my last article, when you are designing UI, sometimes you may find a scenario where you need to transform an user entered value to another form to improve the user experience and present it in a more friendly way.

For example, you may want to format the below credit card number:


to something like below to improve the user experience:


This article demonstrates how you can use a ValueConverter in XAML to achieve above formatting.

First, you will need to create a value converter which takes a string as input and then returns an auto-format credit card number string, as well as the other way around.

You can follow my below article for a guide on - how to create a Value Converter in C#:

Now, once you have created a value converter for e.g. CreditCardFormattingConverter.

You will need to add the above converter to the App.xaml (or you can add it to XAML page where you want to use).

I personally prefer to add inside the App.xaml for better handling of all converters at one place.

    <!--Value Converters-->    
    <converters:CreditCardFormattingConverter x:Key="AppCreditCardFormattingConverter" />    

Now, you can use the above converter in any XAML page where you want to format a credit card number by adding below converter to the control:

Converter={StaticResource AppCreditCardFormattingConverter}

See below example of a textbox with converter:

<TextBox x:Name="CreditCardTextBox"
          Text="{Binding CreditCardNumber, Mode=TwoWay, Converter={StaticResource AppCreditCardFormattingConverter}}" >

Here's the sample running: credit-card-formatting-using-valueconverter.png Note: I added two more fields (Expiration and CVV) in my demo app which is not using value converter.

You can modify this converter for formatting a telephone number or for any other formatting as per business need.

For e.g. when user enter 123456789 you can show it like this in the screen +91-12345-67890

Similarly, you can also use a value converter to set visibility of some control based on the user input.

For e.g. you can create a StringToVisibilityConverter and check if the input string is empty or null then hide some control (like a TextBlock) in the UI and only show that TextBlock when the input string holds some value.

I hope, this example is helpful in understanding how to use value converter in XAML.

Share this