This topic provides an overview of MultiBinding and discusses the applicable scenarios and the guidance to implement MultiBinding in Silverlight and WPF application.

MultiBinding Basics

The MultiBinding concept was first introduced in Windows Presentation Foundation (WPF) as part of the data binding framework. MultiBinding enables you to specify more than one {Binding} declaration on a single dependency property, which is particularly useful for cross-UI communication. For instance, consider a form with a TextBlock showing the total value which should be updated when the Tax or Discount field changes. With MultiBinding, you can easily declare multiple {Binding} instances on the Text property of the TextBlock.

The benefit of using MultiBinding is the flexibility to define the data binding in XAML and leverage the native binding feature of the Silverlight and WPF without the need to write additional plumbing code. As the result, this approach also enables loosely-coupled user interface architecture that exposes a number of benefits, such as ability to change or define the binding on any UI elements without affecting application's code or other user interaction logic. 

The MultiBinding framework, unfortunately, is not available in Silverlight. ClientUI implements the MultiBinding framework and makes it available in Silverlight, and at the same time provides full compatibility with WPF platform in both XAML declaration and API.

Creating Multi Values Converter

At the core of MultiBinding framework is IMultiValueConverter, an interface that must be implemented by the converter class to provide a processed value based on the given raw values passed from the specified data binding. The interface exposes Convert and ConvertBack method, which you implement to provide two-way MultiBinding mechanism.

Unlike the single value converter in IValueConverter interface, the IMultiValueConverter passes-in an array of object to the first parameter of the Convert method. The order of the values are based on the physical order of the data binding declaration in the XAML.

As an example, consider a scenario with a TextBlock that shows the combination of FirstName and LastName input. You may want to have a specific formatting to merge the values for the FirstName and LastName. You implement the logic in the Convert method of your class that implements IMultiValueConverter.

The following code example shows how to create a multi-value converter class that implements IMultiValueConverter to provide conversion from FirstName and LastName into a single formatted value.

public class NameConverter : IMultiValueConverter
{

    #region IMultiValueConverter Members

    public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        string firstName = string.Empty;
        string lastName = string.Empty;
        string fullName = string.Empty;

        if (values == null || values.Length == 0)
            return string.Empty;

        if (values.GetValue(0) != null)
            firstName = values.GetValue(0).ToString();

        if (values.GetValue(1) != null)
            lastName = values.GetValue(1).ToString();

        if (!string.IsNullOrEmpty(firstName) && !string.IsNullOrEmpty(lastName))
            fullName = lastName + ", " + firstName;
        else if (!string.IsNullOrEmpty(firstName))
            fullName = firstName;
        else if (!string.IsNullOrEmpty(lastName))
            fullName = lastName;
        else
            fullName = "Please specify a name";

        return fullName;
    }

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

    #endregion
}

Declaring MultiBinding in XAML

Once the multi-value converters are readily available, you can consume them in the XAML pages and declare the MultiBinding in the elements.

The following XAML code shows how to declare the converter as a static resource in the XAML page, and declare the MultiBinding as well as the multiple {Binding} definition on the Text property on the Content property of a GlassLabel control.

<Intersoft:UXPage 
        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"
        mc:Ignorable="d"
        xmlns:Intersoft="http://intersoft.clientui.com/schemas"
          xmlns:Converters="clr-namespace:TestcaseMVVM.Converters"
        x:Class="TestcaseMVVM.Views.MultiBindings" 
        Title="MultiBindings Page"
        d:DesignWidth="640" d:DesignHeight="480">
    
    <Intersoft:UXPage.Resources>
        
        <Converters:NameConverter x:Key="NameConverter"/>
        
    </Intersoft:UXPage.Resources>

    <Grid x:Name="LayoutRoot">
        <Border VerticalAlignment="Center" HorizontalAlignment="Center"
                     Background="White" CornerRadius="4" Width="300" Height="200">

            <Intersoft:DockPanel>

                <Intersoft:GlassLabel Intersoft:DockPanel.Dock="Top" CornerRadius="4,4,0,0">
                    <Intersoft:BindingFramework.MultiBinding>
                        <Intersoft:MultiBinding TargetProperty="Content" Converter="{StaticResource NameConverter}">
                            <Intersoft:BindingCollection>
                                <Binding Path="Text" ElementName="FirstName_Input"/>
                                <Binding Path="Text" ElementName="LastName_Input"/>
                            </Intersoft:BindingCollection>
                        </Intersoft:MultiBinding>
                    </Intersoft:BindingFramework.MultiBinding>
                </Intersoft:GlassLabel>

                <Intersoft:UXItemsControl Margin="8">
                    <Intersoft:FieldLabel Header="First Name:" HeaderWidth="100">
                        <Intersoft:UXTextBox Name="FirstName_Input" Text="John" Width="150"/>
                    </Intersoft:FieldLabel>
                    <Intersoft:FieldLabel Header="Last Name:" HeaderWidth="100">
                        <Intersoft:UXTextBox Name="LastName_Input" Text="Smith" Width="150"/>
                    </Intersoft:FieldLabel>
                    <Intersoft:FieldLabel Header="Title:" HeaderWidth="100">
                        <Intersoft:UXTextBox Width="100" Text="Mr."/>
                    </Intersoft:FieldLabel>
                    <Intersoft:FieldLabel Header="Age:" HeaderWidth="100">
                        <Intersoft:UXNumericUpDown Width="50" Value="25"/>
                    </Intersoft:FieldLabel>
                </Intersoft:UXItemsControl>
            </Intersoft:DockPanel>

        </Border>
    </Grid>

</Intersoft:UXPage>

The MultiBinding implementation in ClientUI supports design-time preview and automatic binding resolution in the runtime. The XAML declaration such as described in the above example is consistently supported in both Silverlight and WPF platform.