Data Binding in WPF

This article provides a basic overview of WPF data binding.

Binding allows you to link a source object to some control. There are the following two types of bindings:

  • One-Way Binding: Binds a source to the interface.
  • Two-Way Binding: Binds a source to the interface and back to the source.

INotifyPropertyChanged interface allows sources to interact with the interface and update it as the values change.

  • To bind an object or a list to an element you must set the DataContext property.
  • It is possible to bind an object or a list of objects and you can bind one element to another.
  • To customize how bound data will be displayed you can set the DataTemplate from a control.
  • It is possible to set Data Converters to convert the source type to another type.

DataContext

DataContext is the property that defines the data a control holds. A model is often assigned to the Window's data context on a MVVM pattern.

DataContext

Or:

MVVM

One-Way Binding

Binds the values from the code to the screen, but not from the screen back to the code.

code

A label control is not an input control so it takes OneWayBinding by default.

OneWayBinding

Two-Way Binding

Binds the values from the code to the screen and from the screen back to the code.

Binds

A TextBox control is an input control so it takes TwoWayBinding by default.

textbox

By default the source property will be updated when the TextBox loses focus. This behavior can be changed by setting the UpdateSourceTrigger.

UpdateSourceTrigger

INotifyPropertyChanged

Calls an event called PropertyChanged informing which property had its value changed. Required to inform when the code changes and the interface should update.

In .NET 4.5+ it is possible to use the parameter attribute "[CallerMemberName]". In other words, the parameter will receive the name of the caller by default. With that you can just call the method without writing the string name of the property you are changing.

property

Without .NET 4.5 you need to send the name of the property as "NotifyPropertyChanged(“Title”)".

And as a workaround to writing hard-coded strings there is the lambda approach where the member name is extracted from an expression as in:

lambda approach

There is another option, IL injection. There is a Nuget Packaged called Fody and it has a module called Fody PropertyChanged. You can decorate a class with the attribute [PropertyChanged.ImplementPropertyChanged] and in the build process Fody will inject code to notify of the property changes on the properties of your class.

Element Binding

Binds the values from another control rather than the values from the Data Context.

Element Binding

List Binding

Binds a collection to a control. The collection used is often ObservableCollection<T> since it notifies the interface of any changes.

List Binding

Data Templates

Can be overwritten to display data in a custom format.

The default way a ListBox renders its items is by calling ToString. However if you are binding a list of objects you may want to customize how results are displayed. By default you will get the following result:

Data Templates

But you can change the data template to show the values you want, For example:

Visibility

Data Conversion

Can convert a value from one type to another. A common use is when you need to convert a Boolean value to set the control's visibility.

By simply binding a Boolean value to the visibility it will work because the property expects the type “Visibility”.

converter

So we can create a converter and apply it to the bindings.

apply to the bindings

create a converter

That then shows the following expected result:

result