Converters in WPF

Introduction 

This article explains and demonstrates a little bit about WPF converters. It explains the types of converters available in WPF and the uses of them. In WPF binding, is the great feature that helps to flow data between two WPF UI objects. The object that emits the data is called the source and the object that accepts the data is called the target.

The WPF converters acts as a bridge between the source and the target if the source and target have different data formats or need some conversion. For example, sometimes we need to convert data from one format to another format, when it flows from the source to the target or vice-versa the conversion is required.

There are two types of Value Converters in WPF, Value Converters and MultiValue Coverters.

Value Converters

A Value Converter is required when a target is bound with one source, For instance you have a text box and a button control. You want to enable or disable the button control when the text of text box is filled or null.

 

MultiValue Coverters

A MultiValue Coverter is required when your target is bound with multiple sources and the source and targets have different data formats or need some conversion.

For Example-1, let's say you have three text box controls and one button control and you want to enable the button control when all the text of the text boxes are filled.

Code Example-1

Declaration of Value Converter

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Data;

namespace ValueConverters
{
   public class ValueConverter:IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            bool isenable = true;
            if (string.IsNullOrEmpty(value.ToString()))
            {
               isenable = false;
            }
            return isenable;
        }


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

Code Example-2

Declaration of Value Converter 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Data;

namespace ValueConverters
{
    class CheckBoxCheckConverter:IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            if (value.ToString().ToUpper() == "MARRIED")
            {
                return true;
            }
            else
            {
                return false;
            }
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            bool married = System.Convert.ToBoolean(value);
            if (married == true)
                return "Married";
            else
                return "Unmarried";
        }
    }
}

Code Example-3

Declaration of Multi Value Converter 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Data;

namespace ValueConverters
{
   public class MultivalueConverter:IMultiValueConverter
    {
        public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            if (values.Count() >= 2)
            {
                if (string.IsNullOrEmpty(values[0].ToString()) || string.IsNullOrEmpty(values[1].ToString()))
                    return false;
                else return true;
            }
            else
                return false;
        }

        public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}

Code Example-4

Declaration of Multi Value Converter

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Data;

namespace ValueConverters
{
    public class FullNameConverter : IMultiValueConverter
    {
        public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            if (values != null)
            {
                return values[0] + " " + values[1];
            }
            return " ";
        }

        public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)
        {
            string[] values=null;
            if (value != null)
                return values = value.ToString().Split(' ');
            return values;
        }
    }
}

Code Example-5 

Implimentation of Value Converter 

<Window x:Class="ValueConverters.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:ValueConverters"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <local:ValueConverter x:Key="valueconverter"></local:ValueConverter>
        <local:CheckBoxCheckConverter x:Key="checkBoxCheckConverter"></local:CheckBoxCheckConverter>
    </Window.Resources>
    <Grid>
        <TextBlock Text="Value Converter Exampkle" HorizontalAlignment="Stretch" VerticalAlignment="Top" TextAlignment="Center"></TextBlock>
        <TextBox Name="txtFirstName" HorizontalAlignment="Left" VerticalAlignment="Top" Height="36" Width="255" Margin="136,38,0,0" ></TextBox>
        <Button Content="Click" HorizontalAlignment="Left" VerticalAlignment="Top" Height="23" Width="50" Margin="230,101,0,0" IsEnabled="{Binding Path=Text, ElementName=txtFirstName,Converter={StaticResource valueconverter}}"></Button>
        <CheckBox Content="Married" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="307,108,0,0" IsChecked="{Binding Path=Text, ElementName=txtFirstName,Converter={StaticResource checkBoxCheckConverter}}"></CheckBox>
        <TextBlock Text="MultiValue Converter Exampkle" HorizontalAlignment="Stretch" VerticalAlignment="Top" TextAlignment="Center" Margin="10,146,-10,0"></TextBlock>
    </Grid>
</Window>

Code Example-6

Implimentation of Multi Value Converter

<Window x:Class="ValueConverters.MultiValueConverter"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:ValueConverters"
        Title="MultiValueConverter" Height="300" Width="448.872">
    <Window.Resources>
        <local:MultivalueConverter x:Key="multivalueConverter"></local:MultivalueConverter>
        <local:FullNameConverter x:Key="fullNameConverter"></local:FullNameConverter>
    </Window.Resources>
    <Grid>
        <TextBlock Text="Value Converter Exampkle" HorizontalAlignment="Stretch" VerticalAlignment="Top" TextAlignment="Center"></TextBlock>
        <TextBlock Text="First Name" HorizontalAlignment="Left" VerticalAlignment="Top" TextAlignment="Center" Margin="10,38,0,0"></TextBlock>
        <TextBox Name="txtFirstName" HorizontalAlignment="Left" VerticalAlignment="Top" Height="25" Width="255" Margin="91,29,0,0" ></TextBox>
        <TextBlock Text="Last Name" HorizontalAlignment="Left" VerticalAlignment="Top" TextAlignment="Center" Margin="11,68,0,0"></TextBlock>
        <TextBox Name="txtLastName" HorizontalAlignment="Left" VerticalAlignment="Top" Height="25" Width="255" Margin="91,59,0,0" ></TextBox>
        <TextBlock Text="Full Name" HorizontalAlignment="Left" VerticalAlignment="Top" TextAlignment="Center" Margin="14,105,0,0"></TextBlock>
        <TextBox Name="txtFullName" HorizontalAlignment="Left" VerticalAlignment="Top" Height="25" Width="332" Margin="14,126,0,0" >
            <TextBox.Text>
                <MultiBinding Converter="{StaticResource fullNameConverter}">
                    <Binding ElementName="txtFirstName" Path="Text" Mode="TwoWay" UpdateSourceTrigger="PropertyChanged"></Binding>
                    <Binding ElementName="txtLastName" Path="Text" Mode="TwoWay" UpdateSourceTrigger="PropertyChanged"></Binding>
                </MultiBinding>
            </TextBox.Text>
        </TextBox>
        <Button Content="Click" HorizontalAlignment="Left" VerticalAlignment="Top" Height="23" Width="50" Margin="165,171,0,0">
            <Button.IsEnabled>
                <MultiBinding Converter="{StaticResource multivalueConverter}">
                    <Binding ElementName="txtFirstName" Path="Text"></Binding>
                    <Binding ElementName="txtLastName" Path="Text"></Binding>
                </MultiBinding>
            </Button.IsEnabled>
        </Button>

    </Grid>

</Window>

Summery

I hope you now have some understanding of converters and the type of converters in WPF.