When you design UI, sometimes you may find a scenario where you need to transform a value before it reaches its destination or back to its source again, you likely need a converter.
For example, while using WPF you may be binding the text property of a textbox with a property called 'CreditCardNumer'. When user inputs their credit card number in the screen, it will show something like:
4111111111111111
which is difficult to read if you want to check, you have entered correct credit card number.
To improve readability, you may want to show something like:
4111-1111-1111-1111
In WPF, we can achieve this conversion goal by implementing the IValueConverter interface.
Create a value converter
Let's implement a simple converter which takes a string as input and then returns an auto-format credit card number string, as well as the other way around.
public class CreditCardFormattingConverter: IValueConverter
{
public Object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
var builder = new StringBuilder(Regex.Replace(value.ToString(), @ "\D", ""));
foreach(var i in Enumerable.Range(0, builder.Length / 4).Reverse())
{
builder.Insert(4 * i + 4, " ");
}
return builder.ToString().Trim();
}
public Object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
return Regex.Replace(value.ToString(), @ "\D", "");
}
}
Code explanation
This requires you to implement two methods: Convert() and ConvertBack(). As the name implies, these methods were used to convert the value to the destination format and then back again respectively.
You can see my below article for how to implement above value converter for credit card formatting in XAML:
