Data Binding Modes in WPF

This article discuss ‘Modes’ Property of Binding class in detail. Please read DataBinding in WPF also to understand the whole concept.

It is a property of Binding class which is set during the binding indicates the direction of the data flow.

Four type of Modes are there in WPF. They are:

  • OneWay : Target is updated when source changes
  • TwoWay : Target is updated when the source changes, and similarly, the source is updated when the target changes.
  • OneWayToSource : Only the source is updated when the target changes.
  • OneTime : Target is updated only the first time the source changes.

Modes




Let us take an example to demonstrate all the above modes.

<Grid Margin=”10,10″ Background=”AliceBlue”>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=”*” />
<ColumnDefinition Width=”*”/>
<ColumnDefinition Width=”*” />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height=”*” />
<RowDefinition Height=”*” />
<RowDefinition Height=”*” />
<RowDefinition Height=”*” />
<RowDefinition Height=”*” />
<RowDefinition Height=”*” />
</Grid.RowDefinitions>

<TextBlock Text=”Data Binding Modes” FontSize=”25″ FontWeight=”Bold” Grid.ColumnSpan=”3″ HorizontalAlignment=”Center” VerticalAlignment=”Center”/>
<TextBlock Text=”Modes” FontSize=”23″ Grid.Row=”1″ Grid.Column=”0″ HorizontalAlignment=”Center” VerticalAlignment=”Center”/>
<TextBlock Text=”Source” FontSize=”23″ Grid.Row=”1″ Grid.Column=”1″ HorizontalAlignment=”Center” VerticalAlignment=”Center”/>
<TextBlock Text=”Target” FontSize=”23″ Grid.Row=”1″ Grid.Column=”2″ HorizontalAlignment=”Center” VerticalAlignment=”Center” />

<!–TwoWay Binding–>
<TextBlock Text=”TwoWay” Grid.Row=”2″ Grid.Column=”0″ FontSize=”20″ HorizontalAlignment=”Center” VerticalAlignment=”Center”/>
<TextBox x:Name=”txt1″ Width=”100″ Height=”30″ Grid.Row=”2″ Grid.Column=”1″></TextBox>
<TextBox x:Name=”txt2″ Width=”100″ Height=”30″ Text=”{Binding ElementName=txt1,Path=Text,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}” Grid.Row=”2″ Grid.Column=”2″></TextBox>

<!–OneWay Binding–>
<TextBlock Text=”OneWay” FontSize=”20″ Grid.Row=”3″ Grid.Column=”0″ HorizontalAlignment=”Center” VerticalAlignment=”Center”/>
<TextBox x:Name=”txt3″ Width=”100″ Height=”30″ Grid.Row=”3″ Grid.Column=”1″></TextBox>
<TextBox x:Name=”txt4″ Width=”100″ Height=”30″ Text=”{Binding ElementName=txt3,Path=Text,Mode=OneWay,UpdateSourceTrigger=PropertyChanged}” Grid.Row=”3″ Grid.Column=”2″></TextBox>

<!–OneWayToSource Binding–>
<TextBlock Text=“OneWayToSource” FontSize=”20″ Grid.Row=”4″ Grid.Column=”0″ HorizontalAlignment=”Center” VerticalAlignment=”Center” />
<TextBox x:Name=”txt5″ Width=”100″ Height=”30″ Grid.Row=”4″ Grid.Column=”1″></TextBox>
<TextBox x:Name=”txt6″ Width=”100″ Height=”30″ Text=”{Binding ElementName=txt5,Path=Text,Mode = OneWayToSource,UpdateSourceTrigger = PropertyChanged}” Grid.Row=”4″ Grid.Column=”2″></TextBox>

<!–OneTime Binding–>
<TextBlock Text=”OneTime” FontSize=”20″ Grid.Row=”5″ Grid.Column=”0″ HorizontalAlignment=”Center” VerticalAlignment=”Center” />
<TextBox x:Name=”txt7″ Width=”100″ Height=”30″ Grid.Row=”5″ Grid.Column=”1″></TextBox>
<TextBox x:Name=”txt8″ Width=”100″ Height=”30″ Text=”{Binding ElementName=txt7,Path=Text,Mode=OneTime,UpdateSourceTrigger=PropertyChanged}” Grid.Row=”5″ Grid.Column=”2″></TextBox>

</Grid>

Modes