Dot Net For All

Learning WPF – Using IValueConverter with Code Example

In this article I will discuss about the IValueConverter interface of the WPF framework which is present in the PresentationFramework assembly. I will discuss about the syntax of using the IValueConvertor with binding class in the XAML with code example. Moreover if you want to learn about the binding in WPF you can check my this article and for binding modes this article.

Why do we need value Converter or IValueConverter

There are chances that we get a value in one format but we want to bind the same value to a WPF control in some other format. For that we have to convert the value from the format which we have to the format which we want to bind. Though it can be done explicitly by creating our custom classes and properties. But WPF provides a simple way to achieve it by using the IValueConverter class. The binding class provides a Converter property of type IValueConvertor which internally calls the methods Convert and convert back while binding the values to WPF control.

Conversion Example

Suppose we have a occupation control in the View of our application and if we want to make this control visible or collapsed based on the Occupation property of the View Model class. If the proerpty is null or empty we have make this control as collpased.

IValueConvertor With Code Usage

Below is the implementation of the IValueConvertor class for the scenario I have discusses in the above example.

 public class ValueConvertor : IValueConverter
    {        
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            string localValue = System.Convert.ToString(value);

            if(string.IsNullOrEmpty(localValue))
            {
                return Visibility.Collapsed;
            }
            else
            {
                return Visibility.Visible;
            }

        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

 In the code above you can see that I have implemented the Convert and ConvertBack methods of the IValueConverter interface. Convert method is called while binding the value from the VIew-Model to the View of the class.

To use this converter we have include it in the resource dictionary as shown below.

In the above figure I have created a entry in the resource dictionary by providing a Key named valueConverter. In the below code snippet I have used this converter to make a textbox control Visible/Collapsed by providing the IValueConverter.

<TextBox Text="{Binding Occupation}" Visibility="{Binding Occupation, Converter={StaticResource ResourceKey=ValueConverter}}"
                 Grid.Row="0" Grid.Column="1"></TextBox>

 Using the ConverterParameter of the Value Converter

There are some cases where we want to pass an extra argument to the Convert function of the IValueConverter implementation in that case we can use the ConverterParameter property of the Binding class as shown below.

tBox Text="{Binding FirstName}" Visibility="{Binding TextBoxVisibility,
            Converter={StaticResource ResourceKey=ValueConverter},
            ConverterParameter={Binding IsEntryForm}}}" Grid.Row="0" Grid.Column="1"></TextBox>

and change the Convert method as shown below

 public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 
 {
        string localValue = System.Convert.ToString(value);
            if (!(bool)parameter)
            {
                if (string.IsNullOrEmpty(localValue))
                {
                    return Visibility.Collapsed;
                }
                else
                {
                    return Visibility.Visible;
                }
            }
            else
            {
                return Visibility.Visible;
            }
        }

As you can easily make out from the code that if the property IsEntryForm is true in that case we have to make the control visible otherwise it will depend on the Value of Occupation property.

ConvertBack Method

This method is used for converting back the views values to the appropriate property value for View Model. Though I have not implemented the method in my example but in case of two way bindings there are chances that we have to traverse back the value to View model in that case we have to appropriately implement this method.

 

 

Top career enhancing courses you can't miss

My Learning Resource

Excel your system design interview