Converters In WPF

The source code is attached for download.

Converters provide substantial supremacy since they allow insertion of an object between a source and a target object. At a high level, converters are a chunk of custom code hooked up using the binding and the data will flow via that converter. So, whenever data is flown from a source to a target, one can change the value or can change the type of object that needs to be set on the target property.

So, whenever data travels from source to target, it can be transformed in two ways:

1. Data value: Here the transformation will be done with just the value by keeping the data type intact. For example, for number fields, you can transform a value from a floating point number to an integer by keeping the actual value as a float.
2. Data type: One can also transform the data type. For example, setting a style based on some Boolean flag. This is one of the most common examples, isn't it?

Defining a converter

Defining any converter requires implementation of an IValueConverter interface in a class. This interface has the following two methods:

1. Convert: Is called when data is flowing from a source to a target
2. ConvertBack: Is called when data is flowing from a target to a source. It is basically useful in two-way binding scenarios.

Where to place converters

To implement an IValueConverter one must create a class and then put the instance of that class in a ResourceDictionary within your UI.

How to use

Once your class is part of a ResourceDictionary, you can point to the instance of the converter using the Converter property of Binding, along with a StaticResource markup extension.

Using Code

Before digging into the code, let's discuss what I want to do with the following code snippet. Whenever the value entered by the user is negative, I want to display 0 with * as a final amount.

So, let's start by creating a class called RoundingOffConverter and inherit IValueConverter as shown below:



In the class above, the Convert method will be called when the direction of data flow is from a source to a target. The value object is the one that we will set here, the targetType will tell you the type of the target property, next is an optional parameter and the last one is for culture.

The ConvertBack method will be called when you have two-way data binding and the direction of data flow is from the target to the source object.

Code for using Data Value

So, to satisfy our requirements, let's replace the default convert methods to our own implementation as in the following:



To make this example simple, I am simply creating 2 properties in code behind as in the following:

Now coming to XAML, first I need to add a reference of my converter class and then need to add that as a resource. It goes, here:



Once the reference is added, I need to bind this converter to my TextBox object as in the following:



Once everything is in place, let's run this application. You will find the following output:

 

Code for using Data Type: Here the purpose is to select a style based on a Boolean property, or in other words, the user wants to change the color of a text box based on the checkbox status. So let's proceed to and write our BoolToStyleConverter.

As before, quickly create a class for this new converter as in the following:

 

The next step is to create styles in App.xaml. It can be done as in the following:

 

Now in order to use the styles above in an application, one must add these as a Window Resources as shown below:

 

Once the converter is added to resources, the next step is to use this converter in our UI. So, let's add:

 

We are done. Now quickly run this application and you will find the color change based on the text box as in the following:

 

I hope this tutorial on converters was useful.