Explain multi binding and multivalue converters in WPF?

Answer

MultiBinding” helps you bind multiple sources to a target while multi-converters acts like bridge if the source and targets have different data formats or need some conversion.

For example let’s say you have two textboxes which has “FirstName” and “LastName”. You want that as soon as users type on these two textboxes, the other text box should get updated with “FirstNameLastName” ( As shown in the below figure).

Also vice versa if we type in the third text box “FirstNameLastName” it should display “FirstName” and “LastName’ in the other two textboxes respectively.

So the first thing is to create a multivalue converter class which will join “FirstName” and “LastName” in to source and split “FirstNameLastName” back to target. For the same we need to implement “IMultiValueConverter” and implement “Convert” and “ConvertBack” methods.
“Convert” helps to do conversion from “Target” to “Source” and “ConvertBack” helps to convert from “Source” to “Target”.

public class NameMultiConverter : IMultiValueConverter
{
public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{   
// Conversion logic from Target to Source 
}

}
public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)
{
// Conversion logic from Source to Target.
}
}

Below is the “Convert” ( Target to Source) implementation where we get the “textbox” value in a array and we have concatenated the array values and returned the same in a single string. This single string will be displayed in the third textbox.

public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            string x = "";
            foreach (object y in values)
            {

                x = x + " " + y.ToString();
            }
            return x;
        }

“ConvertBack” helps to implement conversion logic from “Source” to “Target”. So when someone types “Shiv Koirala” in the third text box we would like to split “Shiv” in one string and “Koirala” in other string.
So you can see in the below code we have used the “Split” function to create a string array. So the first array index ( array[0]) will go to the first textbox and the second array index (array[1]) will go to the second text box.

public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)
        {
            string str = (string)value;
            string[] val = str.Split(' ');

 
            return val;

        }

Now once we are done with the converter next thing is to apply multi-binding. Below is the XAML code where we have the three text boxes “txtFirstName” , “txtLastName” and “txtFirstAndLast”.

You can see how the “txtFirstAndLast” textbox “Text” is binded using multibinding element which binds to “txtFirstName” and “txtLastName” textbox . So now if you make changes to multiple target the single source gets updated and if you update the source multiple target gets updates.

<TextBox x:Name="txtFirstName" HorizontalAlignment="Left" Height="26" Margin="42,67,0,0" TextWrapping="Wrap" Text="" 

VerticalAlignment="Top" Width="152"/>

<TextBox x:Name="txtLastName" HorizontalAlignment="Left" Height="26" Margin="41,135,0,0" TextWrapping="Wrap" Text="" 

VerticalAlignment="Top" Width="153"/>

<TextBox x:Name="txtFirstAndLast"  Height="28" HorizontalAlignment="Left" Margin="239,103,0,0" Name="label1" 

VerticalAlignment="Top" Width="117">
<TextBox.Text>
<MultiBinding Converter="{StaticResource NameMultiConverter}">
<Binding ElementName="txtFirstName" Path="Text" />
<Binding ElementName="txtLastName" Path="Text" />
</MultiBinding>
</TextBox.Text>
</TextBox>