Search for a command to run...
I create scalable software, help clients to design and develop dynamic applications as well as provide consultation for the business optimization solutions and integration services.
I am a people-person and I especially value humour, being able to communicate, respect for culture, staying healthy, and the freedom to think out of the box.
My interests range from technology to photography. I am also interested in travel, design and food.
No comments yet. Be the first to comment.
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 o...
New Features, Price, System Requirements & Release Date - Everything You Need To Know About Windows 11
As I mentioned in my last article, there is no direct way to set Watermark/Placeholder Text to WPF TextBoxes. However, many times we may need to add a Watermark to improve the user experience. For example, you may want to add Watermark to below credi...
As we know in WPF there is no direct way to set Watermark to a TextBox. However, many times we may need to add a watermark to improve the user experience. In WPF, we can create a watermark using System.Windows.Interactivity.Behavior<T> Here, the pla...
⏺ Doing too much multi-tasking ⏺ Skipping breakfast and morning hydration ⏺ Not prioritizing calm ⏺ Starting the day in 'reactive mode' rather than 'proactive mode' ⏺ You think you can do everything by yourself ⏺ You overestimate how m...
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:
4111111111111111
to something like below to improve the user experience:
4111-1111-1111-1111
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.
<Application.Resources>
<!--Value Converters-->
<converters:CreditCardFormattingConverter x:Key="AppCreditCardFormattingConverter" />
</Application.Resources>
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}}" >
</TextBox>
Here's the sample running:
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.