Data Binding in WPF

What is Databinding?

WPF introduced data binding concept which provides simple and easy way to represent data in application. Data binding establish link between source and target.

As illustrated in above diagram, Binding establish link between source object and target object. When source object updates it notifies target object and when target object updates it notifies source object if binding is set to twoway.

Binding object has four major components Source object, Target object, Source Property and Path. You also specify other properties of binding like Binding Mode, Name etc. While binding target property must be a dependency property.  Almost all UI elements/controls are derived from Dependency object so you can set an element's property as target property of data binding. You can define Binding in XAML file as well in code behind. 


Let’s have a look on simple binding in XAML.

<StackPanel>

   <TextBox Name="MyTextBox" Width="150" Height="35" Text="" />

   <Label Content="{Binding ElementName=MyTextBox, Path=Text}"

          Width="150" Height="35" />

</StackPanel>

Above example demonstrates simple element to element data binding in WPF which one of the simple way to achieve data binding. I bound Label’s Content Property with Textbox’s Text property. Here both properties are dependency properties.  In above example TextBox’s Text property is source of data and Label’s content property is target. Whenever users types something in textbox it will automatically update label’s content.

Let’s have a look on another example here.

<Window x:Class="WpfApplication1.DataBindingDemo"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:local="clr-namespace:WpfApplication1"

        Title="Data Binding Demo" Height="150" Width="300">

<Window.Resources>

    <local:CustomerData x:Key="MyCustomerData"
           CustomerName="Mitesh Sureja"  CustomerAddress="Mumbai"/>

</Window.Resources>

<Grid>

    <Grid.ColumnDefinitions>

        <ColumnDefinition />

        <ColumnDefinition />

    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>

        <RowDefinition Height="0.15*"/>

        <RowDefinition Height="0.15*"/>

    </Grid.RowDefinitions>

    <TextBlock Text="Customer Name:" Margin="5"

               Grid.Row="0" Grid.Column="0"

               VerticalAlignment="Center" />

    <TextBox Name="CustomerName" Height="30" Margin="5"

        Text="{Binding Source={StaticResource MyCustomerData},

        Path=CustomerName, Mode=TwoWay}" Grid.Row="0" Grid.Column="1" />

    <TextBlock Text="Customer Address:" Margin="5"

               Grid.Row="1" Grid.Column="0"

               VerticalAlignment="Center"/>

    <TextBox Name="CustomerAddress" Height="30" Margin="5"

        Text="{Binding Source={StaticResource MyCustomerData},

        Path=CustomerAddress, Mode=TwoWay}" Grid.Row="1" 
        Grid.Column="1" />

</Grid>

</Window>

public class CustomerData : INotifyPropertyChanged

{

    private string customername;

    public string CustomerName

    {

        get

        {

            return customername;

        }

        set

        {

            customername = value;

            OnPropertyChanged("CustomerName");

        }

    }

    private string customeraddress;

    public string CustomerAddress

    {

        get

        {

            return customeraddress;

        }

        set

        {

            customeraddress = value;

            OnPropertyChanged("CustomerAddress");

        }

    }

    //Implementation of INotifyPropertyChanged Interface

    public event PropertyChangedEventHandler PropertyChanged;

    public void OnPropertyChanged(string name)

    {

        if (PropertyChanged != null)

            PropertyChanged(this, new PropertyChangedEventArgs(name));

    }

}

In above example I have bound two properties of CustomerData class to two different TextBox controls. CustomerData class implements InotifyPropertyChanged interface. So whenever CustomerName and CustomerAddress value changed it will notify target control similarly if user changes text in textboxes it will updated CustomerData’s respective properties because of two way binding mode.



You might also like
Dependency Property
Attached Property
WPF Architecture