Two-Way Databinding in WPF

This article kick starts your two way data-binding model in WPF.

As the name suggests, if either one of the property changes the other one automatically updates it.

In WPF, this is done using simple design time settings. This is achieved as follows

Use the System.Windows.Data.Binding mark-up extension :

1. Set the Mode attribute to System.Windows.Data.BindingMode.TwoWay
2. Use UpdateSourceTrigger attribute to specify when the binding source should be updated. Set this value to "PropertyChanged".This updates the binding source immediately whenever the binding target property changes.

This is best explained with example below.

I have list box with list of colour names in it. I have a Textbox which shows selected Item Text of list box in Text property.

Requirement is, textbox Text is in synch with list box selected Item.

When you select "red" item in list box - textbox responds With Text and background colour.

Similarly, when you type another colour in Textbox, list box shows the relevant item as selected item in list box. Of course that also changes textbox Background colour.

I pasted the XAML design code below:

<Window x:Class="TwoWayBinding.Window1"

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

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

    Title="Window1" Height="300" Width="300">

    <Grid Height="54" Width="165">

        <TextBox  Name="textBox" Margin="0,-77,0,0" Height="23" VerticalAlignment="Top"

                Text ="{Binding ElementName=listBox,

                        Path=SelectedItem.Content,

                        Mode=TwoWay,

                        UpdateSourceTrigger=PropertyChanged}"

                Background="{Binding ElementName=listBox, Path=SelectedItem.Content, Mode=OneWay}">

        </TextBox>

      <ListBox Name="listBox" >

            <ListBoxItem Content="Green"/>

            <ListBoxItem  Content="Yellow" IsSelected="True"/>

            <ListBoxItem Content="Orange" />

        </ListBox>

       

    </Grid>

</Window>

Next article on WPF:  M-V-VM is on the way.