WPF MultiValue Converter

Introduction

In my previous blog we have discussed what is converter and the various type of converters in available WPF. This blog describes about the second converter that is WPF MultiValue Converter with code example.

WPF MultiValue Converter

WPF MultiValue Converter

Getting Started

A Multivalue Converter is required when your target is bound to multiple sources and if the source and targets have different data formats or need some conversion. Assume you have three text box controls and a button control and you want to enable the button control when all the text of the text boxes are filled.

For this case, we need to create a Multivalve Converter class that inherits the IMultiValueConverter interface of the System.Windows.Data namespace that will check all the text of the textboxes to determine whether it is filled or not, if it is filled then it will return true otherwise return false and that will enable or disable the button control.

Declaration of WPF MultiValue 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();   
     }   
   }   
 }   

WPF MultiValue Converter

In the preceding code, the convert function checks all the bound data, if any of them is null or empty then it will return false to disable the button control otherwise it will return true to enable the button control. In this example, if the text of the two textboxes is found to be empty then the convert function will return false otherwise true.

I have another example for the convertback function. Let's say you have three textboxes, the first TextBox is for taking the first name of a person, the second is for taking the last name and the third one is for displaying the text of the preceding two textboxs jointly with a space between them and vice-versa. In this case the convert back function of IMultiValueConverter interface must be usde. In the following code example of the fullnameconverter class I have used both the convert and convertback functions to do it.

Declaration of WPF MultiValue 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;   
     }   
   }   
 }   

WPF MultiValue Converter

The convert function in the preceding code concatenates the two data items coming from the two sources with a space between them and returns the concatenated data to the target. The convert back function splits the concatenated string with space to an array of strings and returns the items of the array to the corresponding source.

In the preceding scenario, the convert back function takes the text of both the first name TextBox and the last name TextBox and concatenates the text with a space between the two texts and returns that to the third TextBox.

Again, when you fill in the data in the third TextBox, the convert back function takes the text and splits it into an array string using space and returns that to the source textboxes (first name TextBox and last name TextBox).

Use of WPF MultiValue Converter

To use a converter you need to create the object of converter class in resource. After declaring the resource it is necessary to use it with binding. See the following XAML code example.

 <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>   

WPF MultiValue Converter

Related Articles

1. Resource in WPF
2. UpdateSourceTrigger
3. WPF Binding
4. WPF Style
5. WPF Converters
6. WPF Value Converters
7. WPF INotifyPropertyChanged Interface
8. WPF DEPENDENCY PROPERTIES

Summary

In this blog MultiValue Converter we have discussed WPF MultiValue Converter, how to use it with Textbox. Here I have demonstrated the use of WPF Multivalue Converter only with Textbox, you can use with other WPF controls as well. I hope you have enjoyed it a lot.

Thanks