Value Converter In WPF

WPF provides with binding using which we can bind two elements to each other. For example, a textbox is been bind to some other textbox, when you change the text of any of the two textboxes it will reflect on the other textbox too(“The default mode is Two-way”).



This case is for the similar attributes where the object formats is similar (Text for the above example), but when you need to bind two different elements like a textBox and a checkBox where the textBox accepts text while checkBox accepts a boolean value whether isChecked true/false. For this case we require to convert the text to boolean type, and that's where we need a Value Converter.



A Value Converter is a class where we can write the required conversion logic. The value converter class should implement an interface named “IValueConverter” which provides two methods:

1. Convert(object value)
   
   The convert method will convert the value from Target to Source.
   
   
2. ConvertBack (object value)
   
   The convert method will convert the value from Source to Target.

Let us take an example where we have a textbox and a checkbox, when the user types “Check” in the textbox the checkbox gets checked and when he types “Uncheck” the checkbox gets unchecked, and vice versa.

{ Creating a Value Converter: }

Step 1: In your WPF Project, create a value converter class:



Step 2: Implement the IValueConverter interface in the created class:

For IValueConverter we need the System.Windows.Data namespace.



Step 3: Implement the two methods Convert and ConvertBack:



Step 4: Write the logic for convert method and the convert back method:



XAML part: Now in the xaml section we need to add a textbox and a checkbox and bind the checkbox to the textbox and specify the converter we want to use.

Step 5: Adding the textbox and the checkbox.

<Window x:Class="valueConverterDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:valueConverterDemo"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
     <Grid>
            <TextBox Name="txt1" Margin="171,35,170,250" ></TextBox>
            <CheckBox Name="chkbox1" Margin="194,97,184,195"></CheckBox>
    </Grid>
</Window>

Step 6: For binding we need to map the namespace of your converter to the XAML namespace. Later you can create an instance of the value converter and then you can refer it by using {Static Resource}.

 

<Window x:Class="valueConverterDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:valueConverterDemo"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <local:TextToCheckboxValueConverter x:Key="myConverter">
    </Window.Resources>
        <Grid>

            <TextBox Name="txt1" Margin="171,35,170,250" ></TextBox>
            <CheckBox Name="chkbox1" Margin="194,97,184,195"
                IsChecked="{Binding Text,
                Converter={StaticResource myConverter},
                ElementName=txt1}" ></CheckBox>
    </Grid>
</Window>

In the above step we have created the instance in the Windows.Resource tag with the key as “myConverter”. This can be referred in the checkbox using the StaticResource as myConverter and the element name as the name of the control to bind.

Output: