Post
Ask Question

Data Binding and it's Modes in WPF

Introduction 

 
We all know WPF is UI designing framework that has an enhanced way of displaying and manipulating data.
 
The concept is known as Data Binding, we can get data from 'N' number sources such as API, entity framework or any other ORM tools, or static data.
 
Here, data binding is a layer between UI elements & data.
 
It shows dynamic data changes: meaning if the data source is updated so is your UI.
 
In WPF, there are 4 types of binding:
  1. One-Way Binding,
  2. Two-Way Binding,
  3. One-Way To Source,
  4. One_Time Binding,
  5. Default.
Let's learn them one by one.
 

One-Way Data-binding

 
One way allows changes from the source-destination meaning, data can only flow from one direction.
 
Create a WPF app with the following controls,
 
A grid with 2 labels & 2 textboxes in XAML might look something like this, 
  1. <Window x:Class="A.MainWindow"    
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    
  4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    
  5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    
  6.         xmlns:local="clr-namespace:A"    
  7.      mc:Ignorable="d"    
  8.   
  9.         Title="MainWindow" Height="150" Width="500">    
  10.     <Window.Resources>    
  11.         <Thickness x:Key="MarginTop">0 5 0 0</Thickness>    
  12.     </Window.Resources>    
  13.     <Grid x:Name="MainGrid">    
  14.         <Grid.RowDefinitions>    
  15.             <RowDefinition Height="Auto"/>    
  16.             <RowDefinition Height="Auto"/>    
  17.         </Grid.RowDefinitions>    
  18.         <Grid.ColumnDefinitions>    
  19.             <ColumnDefinition Width="Auto"/>    
  20.             <ColumnDefinition Width="Auto"/>    
  21.         </Grid.ColumnDefinitions>    
  22.         <Label Content="Source"      
  23.                  Margin="0 30 0 0"/>    
  24.         <TextBox x:Name="SourceTextBox"    
  25.                  Width="150"    
  26.                  Height="25"    
  27.                  Margin="0 30 0 0"    
  28.                  Grid.Column="1"/>    
  29.         <Label Content="Destination"    
  30.                Margin="0 5 0 0"    
  31.                Grid.Row="1"/>    
  32.         <TextBox x:Name="DestinationTextBox"    
  33.                  Text="{Binding ElementName=SourceTextBox, Path=Text, Mode=OneWay}"    
  34.                  Margin="{StaticResource MarginTop}"    
  35.                  Width="150"    
  36.                  Height="25"    
  37.                  Grid.Column="1"    
  38.                  Grid.Row="1"/>    
  39.     </Grid>    
  40. </Window>     
The first textbox will take an input and second textbox will display same text that you entered in first textbox.
 
the second textbox will update itself as you with every single keystroke you entered in the first textbox.
 
As you can see in the second textbox which is named as DestinationTextBox we have Text Property: which is bound with a first textbox(SourceTextBox) & it has set
Mode = OneWay
 
This is how output would look like: Note: watch the complete gif to understand One-way binding's behavior.
 
Data Binding And it's Modes In WPF 
 
Explanation
 
As you can see, whatever I type in source textbox it gets reflected in destination textbox. But it doesn't work vice-versa. because our destination textbox has one-way binding. it will not let the source know if it has updated itself.
 

Two-Way Binding

 
Data can flow bi-directionally, from source to destination and from destination to source.
 
Keep the same example, but make changes in DestinationTextBox as follows:
  1. <TextBox x:Name="DestinationTextBox"    
  2.          Text="{Binding ElementName=SourceTextBox, Path=Text, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"    
  3.          Margin="{StaticResource MarginTop}"    
  4.          Width="150"    
  5.          Height="25"    
  6.          Grid.Column="1"    
  7.          Grid.Row="1"/>    
This is how output would be...
 
Again, watch the complete gif.
 
Data Binding And it's Modes In WPF
 
Explanation
 
Now we have Mode = TwoWay in Destination textbox. Also, see we have UpdateSourceTrigger=PropertyChanged which updates source textbox with every keystroke.
 

One-Way To Source

 
Now we have seen data flow from source to destination & from destination to source. now, 3rd mode is in the middle of these 2 modes. what if I wanted to flow data from destination to source & don't want data to flown back from the source. i.e. data flow in one way to the source.
 
Just change Mode = OneWayToSource in xaml as follows,
  1. <TextBox x:Name="DestinationTextBox"    
  2.          Text="{Binding ElementName=SourceTextBox, Path=Text, Mode=OneWayToSource, UpdateSourceTrigger=PropertyChanged}"    
  3.          Margin="{StaticResource MarginTop}"    
  4.          Width="150"    
  5.          Height="25"    
  6.          Grid.Column="1"    
  7.          Grid.Row="1"/>     
This is the output:
 
Data Binding And it's Modes In WPF
 
Explanation
 
As you can see, we can update source from the destination but the source is unable to do the same!
 
Hence, OneWayToSource.
 

One_Time Binding

 
Data flow from any direction but only one time. Data is bound when control is created or when the data context is changed. after that, any changes to either the bound property or the data source are not transmitted.
 
We will assign some text in the constructor to understand its behaviour.
 
Update MainWindow.xaml.cs as follows:
  1. using System.Windows;  
  2.   
  3. namespace A  
  4. {  
  5.     /// <summary>  
  6.     /// Interaction logic for MainWindow.xaml  
  7.     /// </summary>  
  8.     public partial class MainWindow : Window  
  9.     {  
  10.         public MainWindow()  
  11.         {  
  12.             InitializeComponent();  
  13.             this.DataContext = new MainWindowViewModel();  
  14.             SourceTextBox.Text = "One Time Mode";  
  15.             DestinationTextBox.Text = SourceTextBox.Text;  
  16.         }  
  17.     }  
  18. }  
Make 1 line change in xaml: Mode=OneTime in DestinationTextBox
  1. <TextBox x:Name="DestinationTextBox"  
  2.          Text="{Binding ElementName=SourceTextBox, Path=Text, Mode=OneTime, UpdateSourceTrigger=PropertyChanged}"  
  3.          Margin="{StaticResource MarginTop}"  
  4.          Width="150"  
  5.          Height="25"  
  6.          Grid.Column="1"  
  7.          Grid.Row="1"/> 
See the output:
 
Data Binding And it's Modes In WPF
 
Explanation
 
Data loaded only once when the constructor is loaded, After that no changes are reflected in the destination if source data is changed. Hence OneTime.
 

Default Data-binding

 
It just defines which is the default binding mode for the control's property. In WPF different controls has different default data-binding modes.
 
For example, TextBlock's Text property has one-way as default binding mode but a TextBox's Text property has a two-way binding mode.
 
This is because the control behaviors differs from one another.
 
As textblock is readonly control, the user can't make changes by clicking on it, that's why it has one-way as default.
 
As a user can make changes in the textbox so it has two ways as the default binding mode.
 
I hope this article has cleared the confusion you might had about different binding modes in WPF.
 
Feel free to apply them in your project to understand their behavior.
 
Thank you for visiting this article.
 
If you have any doubt, you can connect me @
Happy Coding!


Similar Articles