Friday, July 5, 2013

WPF - MultiBinding with IMultiValueConverter

MultiBinding is an excellent new development in WPF, helping us to bind multiple items and return a single new value using the principal of converters.

IMultiValueConverter interface provides a way to apply custom logic in MultiBinding.

Let see how to create MultiBinding in WPF.

Step 1
Create a WPF application and give the solution name as SolMultiBinding_IMultiValueConverter.

Step 2
 Add the Following Controls in Window,it is look like this
<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="40*"/>
            <RowDefinition Height="40*"/>
            <RowDefinition Height="40*"/>
            <RowDefinition Height="40*"/>
            <RowDefinition Height="40*"/>
            <RowDefinition Height="120*"/>
        </Grid.RowDefinitions>

        <TextBlock Grid.Row="0" Grid.Column="0" Text="First Name" VerticalAlignment="Center" Margin="10,0,0,0"></TextBlock>
        <TextBox x:Name="txtFirstName" Grid.Row="1" Grid.Column="0" Height="25" Width="150" HorizontalAlignment="Left" Margin="10,0,0,0"></TextBox>

        <TextBlock Grid.Row="2"  Text="Last Name" VerticalAlignment="Center" Margin="10,0,0,0"></TextBlock>
        <TextBox x:Name="txtLastName" Grid.Row="3" Grid.Column="0" Height="25" Width="150" HorizontalAlignment="Left" Margin="10,0,0,0"></TextBox>

        <TextBlock Grid.Row="4" Text="Full Name" VerticalAlignment="Center" Margin="10,0,0,0"></TextBlock>
        <TextBlock x:Name="tbFullName" Grid.Row="5" Margin="10,0,0,0">
            
        </TextBlock>
    </Grid>



Click on Image for Better View

First understand the concept,User will enter the values in Textbox control and TextBlock display the combination of these two values with the help of IMultiValueConverter Interface.

Step 3
Implement IMultiValueConverter Interface to display Full Name,it is look like this 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows.Data;

namespace SolMultiBinding_IMultiValueConverter
{
    public class FullNameIMultiValueConverter:IMultiValueConverter
    {
        public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            String StringConvert = String.Empty;
            try
            {
                if (values != null)
                {
                    if (values.Count() > 0)
                    {
                        // For Display Full Name 
                        // values[0] - First Name
                        // values[1] - LastName
                        StringConvert= String.Format("{0} {1}", values[0], values[1]);
                    }
                }
            }
            catch (Exception ex)
            {
                throw new Exception(ex.Message); 
            }

            return StringConvert;
        }

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

In the Convert function, values[0] is the first name while values[1] is the last name.Basically we are concatenating the first and second values using String.Format() Method.

Step 4
Add the following namespace reference in window tag,it is look like this 
xmlns:Local="clr-namespace:SolMultiBinding_IMultiValueConverter"

Using this we can access FullNameIMultiValueConverter class from this above namespace in XAML

Finally it is look like this
<Window x:Class="SolMultiBinding_IMultiValueConverter.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:Local="clr-namespace:SolMultiBinding_IMultiValueConverter"
        Title="MultiBinding" Height="350" Width="525">

</Window>

Step 5
Create an instance of FullNameIMultiValueConverter class in Window.Resources,it is look  like this
<Window.Resources>
        <Local:FullNameIMultiValueConverter x:Key="FullNameConverter"></Local:FullNameIMultiValueConverter>
</Window.Resources>

Step 6
Now apply MultiBinding in TextBlock control,it is look like this
<TextBlock x:Name="tbFullName" Grid.Row="5" Margin="10,0,0,0">
            <TextBlock.Text>
                <MultiBinding Converter="{StaticResource FullNameConverter}">
                    <Binding ElementName="txtFirstName" Path="Text"></Binding>
                    <Binding ElementName="txtLastName" Path="Text"></Binding>
                </MultiBinding>
            </TextBlock.Text>
        </TextBlock>

Here, the value for TextBlock tbFullName is dependent on two elements i.e txtFirstName and txtLastName.The Path property defines the actual property from which to get the data which is Text here.

Full XAML Code
<Window x:Class="SolMultiBinding_IMultiValueConverter.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:Local="clr-namespace:SolMultiBinding_IMultiValueConverter"
        Title="MultiBinding" Height="350" Width="525">

    <Window.Resources>
        <Local:FullNameIMultiValueConverter x:Key="FullNameConverter"></Local:FullNameIMultiValueConverter>
    </Window.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="40*"/>
            <RowDefinition Height="40*"/>
            <RowDefinition Height="40*"/>
            <RowDefinition Height="40*"/>
            <RowDefinition Height="40*"/>
            <RowDefinition Height="120*"/>
        </Grid.RowDefinitions>

        <TextBlock Grid.Row="0" Grid.Column="0" Text="First Name" VerticalAlignment="Center" Margin="10,0,0,0"></TextBlock>
        <TextBox x:Name="txtFirstName" Grid.Row="1" Grid.Column="0" Height="25" Width="150" HorizontalAlignment="Left" Margin="10,0,0,0"></TextBox>

        <TextBlock Grid.Row="2"  Text="Last Name" VerticalAlignment="Center" Margin="10,0,0,0"></TextBlock>
        <TextBox x:Name="txtLastName" Grid.Row="3" Grid.Column="0" Height="25" Width="150" HorizontalAlignment="Left" Margin="10,0,0,0"></TextBox>

        <TextBlock Grid.Row="4" Text="Full Name" VerticalAlignment="Center" Margin="10,0,0,0"></TextBlock>
        <TextBlock x:Name="tbFullName" Grid.Row="5" Margin="10,0,0,0">
            <TextBlock.Text>
                <MultiBinding Converter="{StaticResource FullNameConverter}">
                    <Binding ElementName="txtFirstName" Path="Text"></Binding>
                    <Binding ElementName="txtLastName" Path="Text"></Binding>
                </MultiBinding>
            </TextBlock.Text>
        </TextBlock>
    </Grid>
</Window>

Run the Project.

If your don't want use IMultiValueConverter then you can used directly StringFormat in XAML.

<TextBlock x:Name="tbFullName" Grid.Row="5" Margin="10,0,0,0">
            <TextBlock.Text>
                <MultiBinding StringFormat="{} {0} {1}">
                    <Binding ElementName="txtFirstName" Path="Text"></Binding>
                    <Binding ElementName="txtLastName" Path="Text"></Binding>
                </MultiBinding>
            </TextBlock.Text>
        </TextBlock>


Output

Click on Image for Better View

Download
Download Source Code

No comments:

Post a Comment