WPF Binding Mode

WPF Binding Mode

Apart from the default binding, which is one way, you can also configure binding to be two way, one way to source, and so forth. This is done by specifying the Mode property.

OneWay: Causes changes to the source property to automatically update the target property but the source does not get changed

TwoWay: Changes in the source or target automatically cause updates to the other

OneWayToSource: Causes changes to the target property to automatically update the source property but the target does not get changed

OneTime: Causes only the first time change to the source property to automatically update the target property but the source does not get changed and subsequent changes do not affect the target property

Two way binding with TextBox

Let us now consider an example that demonstrates two-way data binding with a TextBox. In this example, a ListBox containing a set of routes is created in XAML. A TextBox control is bound to this ListBox using the following code:

        <TextBox Text="{Binding ElementName=Routes, Path=SelectedItem.Content, Mode=TwoWay}">

Here, we have specified the binding source, the path to bind to, and the binding mode. Because the binding mode is set to two way, any changes made to the TextBox are automatically reflected in the ListBox. Two way binding means that changes made to the bound control result in updates to the source and vice versa.

The complete XAML code for this example is listed below:

<Window x:Class="UpdateDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="210" Width="298">
    <Grid Width="231">
        <Grid.RowDefinitions>
            <RowDefinition Height="52*" />
            <RowDefinition Height="52*" />
            <RowDefinition Height="52*" />
            <RowDefinition Height="33*" />
            <RowDefinition Height="71*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <ListBox x:Name="Routes" Grid.Row="0" Grid.Column="1" Grid.RowSpan="2" Background="Azure">
            <ListBoxItem Content="LA"/>
            <ListBoxItem Content="Mexico"/>
            <ListBoxItem Content="SF"/>
            <ListBoxItem Content="Au"/>
        </ListBox>
        <TextBox Text="{Binding ElementName=Routes, Path=SelectedItem.Content, Mode=TwoWay}" Background="LightSteelBlue" Grid.Column="1" Margin="0,13,-1,0" Grid.Row="2" Grid.RowSpan="2">
        </TextBox>
     </Grid>
</Window>
Posted on Sunday, July 4, 2010 9:33 AM WPF | Back to top