If you have ever used Windows Presentation Foundation (WPF) then you might have been impressed by the binding features of it.

Part one of this tutorial will show how to bind properties of the same type while the second one will also anlyse type conversion.

Using data binding you can synchronize object properties. The source of the binding is the object or property that is changing the value and the destination is the one who receives it (the new value).

There are two types of binding:

  • one way binding – there is only one source that updates the information and as many destinations who receive the update.
  • two way binding – every binding element can update and can receive updates so there is no distinction between source and destination.

The central element of binding is the Observer. It manages the process – chooses whether to send or not the notifications, performs type conversions and keeps the list of subscribers.

The diagrams below illustrate the two binding situations (one way and two way) when the source and destination have the same data type.

One Way Same TypeTwo Way Same Type

In the first diagram, the arrows suggest that the information comes from the source object and the Observer distributes is to all subscribers. In the second one every subscriber is also a source. “Update” is the process of informing the Observer that one source changed its value and “notify” is the process of sending, to all subscribers, the new value. Even though in the first diagram is not suggested, the source performs an update and the observers performs three notifications.

All we need to do is to create the observer. As seen in the diagrams this will have an Update method and a mechanism of notifying the subscribers about the new value. The notification can be implemented as an event and the update like a method.

Because we don’t know what data type will be used for binding and we want type safety, the observer will be generic.

class Observer
{
}

The event sends the new value and the source (class) of it. The source is needed because if the one who sent the information is also a subscriber it should not react to notification.

public delegate void ValueChangeDelegate(object sender, T value);
public event ValueChangeDelegate ValueChangeNotification;

The Observer holds the current value (last value sent) and if an update contains it there is no need of notification because no changes take place. The update method compares the new value with the current one and checks for subscribers. If the values are different and subscribers exist it raises the event.

public void Update(object source, T value)
{
    if (currentValue != null)
    {
        if (!currentValue.Equals(value) && ValueChangeNotification != null)
            ValueChangeNotification(source, value);
    }
    else
        if (value != null && ValueChangeNotification != null)
            ValueChangeNotification(source, value);
    currentValue = value;
}

Combining the code above and adding constructors we obtain the Observer.

class Observer
{
    public delegate void ValueChangeDelegate(object sender, T value);
    public event ValueChangeDelegate ValueChangeNotification;
    private T currentValue;
    public Observer()
    {
        currentValue = default(T);
    }
    public Observer(T initValue)
    {
        currentValue = initValue;
    }
    public void Update(object source, T value)
    {
        if (currentValue != null)
        {
            if (!currentValue.Equals(value) && ValueChangeNotification != null)
                ValueChangeNotification(source, value);
        }
        else
            if (value != null && ValueChangeNotification != null)
                ValueChangeNotification(source, value);
        currentValue = value;
    }
}

Let’s create a small test application that has two text boxes and syncronizes their texts.

  1. Create a new Windows Forms Application in Visual Studio and add two text boxes on the main form.
  2. Create events for text change (double click each text box).
  3. Now add the Binding class to your project and create a new Observer object for string as a member the form’s class. Let’s call it textObserver.
  4. Now create a method for the update event – a method with two parameter: an object and a string – and subscribe to the event.
  5. Update the observer when the text changes in one text box.

If you are having problems in creating the application you can download the final version from here. Change the text in one text box and it should also update the other one.

Part 2 of this tutorial will explain how to synchronize properties that have different values and need conversion. It will be posted soon.