How to use IValueConverter in Binding of WPF

 In this article I am going to discuss about how we can use Converter to evaluate the Binding of elements in WPF. All of us are well aware of superior Binding Capabilities that is supported with WPF. I found it very exciting when I saw it for the first time. It seemed to me a great way to define everything in XAML rather than handling events so much in Code-Behind. Right now, I try everything that regards to UI level changes, I always try to do it using XAML first.

XAML comes with lots of Markup Extensions. Anything that is placed within the curl braces ( { } ) are defined as Markup Extensions. They are derived from the Class MarupExtension, and the properties are defined directly for them within the brackets. Binding is also a Markup Extension for which ElementName, Path, etc are members. Among the members, Converter and ConverterParameter is what we are going to discuss here in this article.

IValueConverter

Converter is actually a property within the Binding Markup Extension. Its type is defined as IValueConverter. Every time the bound data elements refreshes its value it passes through a method Convert which is defined inside the object Converter (if found). Thus Converter acts as an interface to manipulate the actual data before passing it to the property.

public class MyConverter : IValueConverter
{
        #region IValueConverter Members

        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            double passedValue = (double)value;
            double parameterValue = (double) parameter;
            return passedValue - parameterValue;
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            
            double passedValue = (double)value;
            double parameterValue = (double)parameter;
            return passedValue + parameterValue;
        }

        #endregion
}

Here in the code above I have defined a converter MyConverter, which does nothing but implements IValueConverter, which enables you to make use of it with Converter. The Converter here does nothing but implements two methods, Convert and ConvertBack. Convert is called when the value of the property is updated when the bound object value is changed. ConvertBack will only be called when the Binding Mode is set to TwoWay, and will be called only when the bound property changes its value.  The object value points to the value of the property passed in, TargetType is the type you have to return to the Target, parameter is defined from ConvertParameter and Culture is the UICulture.

To use the Converter you need to create a resource of the object. Thus in XAML you need to declare :

<local:myconverter x:key="resMyConverter">
</local:myconverter>

Where local is the namespace added which points to the Current Namespace. Finally to define the Converter, you need to use this as StaticResource in the Converter.

Height="{Binding ElementName=win, Path=ActualHeight, Mode=OneWay, Converter={StaticResource resMyConverter}, ConverterParameter=10}"  

Remember one thing, in the above line, you need to make sure you are clear about what you are sending. In this case, we are binding Height with the ActualHeight of the element win. So, in the arguments of Convert, you will receive a double value with current ActualHeight, and you are going to return the value that you want to be set to Height. So actually you are sending a double value and returning another.

The above figure demonstrates how you are going to send data to Convert method.The ActualWidth (Marked with Blue) is sent to object value, TargetType will be Double which is based on the Type of Width Property, parameter receives the value 50 passed with ConvertParameter, and the culture is the UICulture of the Current Thread.

The ConvertBack is used to be called only when you need the reverse. So if your Mode is defined as OneWay, your ConvertBack is not actually required.

You can try the sample application from here

Read the Full Article