WPF Data Binding (The quick guide)

Here is a quick and brief guide to WPF data binding, hope it helps those new to WPF.

Most applications have some sort of internal data which they want to show in the UI for the user to view. So for example let’s say we have a sales systems which holds data about its customers. So I would expect a customers class that would hold the details of each individual customer, and this would be mapped to the UI somehow so when the users wants to see information about a particular customer they can.

class Customer
{
   public string Name { get; set;}
   public string Address { get; set; }
   public string Phone { get; set; }
}

In the WPF world the mapping to the UI is done using data bindings, as this is a good way for the UI to be mapped to actual objects, and to enable the UI to be refreshed when data is changed either through the user or the system.
Below is an example of how we can create a binding through code between a text box and our customer object above and show the name of the customer in that text box.

Customer customer = new Customer("Bob", ...);
...
Binding binding = new Binding();

//set the source for the data binding.
binding.Source = customer;

//set the property which will provide the value to the ui.
binding.Path = new PropertyPath("Name");

//set the control object and its property to be populated in the ui.
nameTextBox.SetBinding(TextBox.TextProperty, binding);

• source = is the object where the data is coming from.
• path = establishes the property to retrieve the value from.
• target = identifies the instance and property data is going to. 

Things to remember about binding:

Target property must be a DependencyProperty 

Source can be any object, the named property must be a valid property that returns a value.

How to update the UI when the source object changes.

The object should implement the INotifyPropertyChanged interface. This interface fires an “PropertyChangedEvent” event when the property has changed; usually through the property setter. The WPF engine is notified of the change through this event and updates the UI accordingly, by re-evaluating the binding.

Here is our Customer class updated to implement that interface.

public class Customer : INotifyPropertyChanged
{
  private string _name;
  public string Name
  {
    get { return _name; }
    set { _name = value; OnPropertyChanged("Name"); }
  }

  public event PropertyChangedEvent PropertyChanged;

  private void OnPropertyChanged(string property)
  {
    PropertyChanged temp = PropertyChanged;
    if (temp != null)
    {
       temp(this, new PropertyChangedEventArgs(property));
    }
  }
}

Flow of Information

In bindings it is possible to set the binding mode which determines the direction of data transfer. We have four modes, “One Time”, “One   Way”, “TwoWay”, “OneWayToSource”

When data exchange happens

We can also set when changes should be applied to the source, so this when the user is entering data on the UI, let’s say for example a text box, we can dictate when the data actually gets copied to the source object that the text box is binded to.  This can be done through the UpdateSourceTrigger property. You can set three values.

• LostFocus: when we copy when the user moves off the control.
• PropertyChanged: when target value changes.
• Explicit: copy only when asked.

Creating Bindings in XAML

<StackPanel>
  <StackPanel.Resources>
   <me:Customer x:Key="customer" Name="Bob" .../>
  </StackPanel.Resources>

 <label>Name</label>

 <TextBox x:Name="nameTextBox">
  <TextBox.Text>
    <Binding Source="{StaticResource customer}" Path="Name" />
  </TextBox.Text>
 </TextBox>
</StackPanel>