Binding Modes in WPF with Example

Introduction:

     In this article will see purpose of Mode property in Data Binding, What are the different Data Binding Modes available in WPF, When to use each of these binding modes etc.

Description:

       Mode is the one of the property of the Binding Element. Mode attribute defines the Data Binding Mode which determines how data flows between source and target. 

Four Types of Data Binding Modes available.

• OneWay
• OneTime
• OneWayToSource
• TwoWay

For understanding Binding Modes briefly let us take an example which contains a ListBox, a TextBlock, a TextBox. ListBox contains List of Colors, Selected value of ListBox is binded to Background and Text dependency properties of TextBlock, and Text property of TextBox.

XAML Code Looks like below.

<grid> <label Content="Colors" FontWeight="Bold" FontSize="20" Height="37" HorizontalAlignment="Left" Margin="26,3,0,0" Name="label1" VerticalAlignment="Top" Width="85" /> <listbox Height="99" HorizontalAlignment="Left" Margin="34,46,0,0" Name="listColors" VerticalAlignment="Top" Width="149"> <listboxitem Content="Black" /> <listboxitem Content="Blue" /> <listboxitem Content="Green" /> <listboxitem Content="Yellow" /> <listboxitem Content="Olive" /> <listboxitem Content="Pink" /> </ListBox> <textblock Height="23" Text="{Binding ElementName=listColors, Path=SelectedItem.Content, Mode=OneWay}" Background="{Binding ElementName=listColors, Path=SelectedItem.Content,Mode=OneWay}" HorizontalAlignment="Left" Margin="35,158,0,0" Name="textBlock1" VerticalAlignment="Top" Width="240" /> <textbox Height="23" Text="{Binding ElementName=listColors, Path=SelectedItem.Content,Mode=OneWay}" Background="{Binding ElementName=listColors, Path=SelectedItem.Content,Mode=OneWay}" HorizontalAlignment="Left" Margin="37,190,0,0" Name="textBox1" VerticalAlignment="Top" Width="238" /> </Grid>

OneWay:

                If Binding Mode is OneWay means whenever the Source Data is changed then that data is reflected in Target UI. Suppose in the above example we binded the listbox's  SelectedValue.Content to TextBox and TextBlock's Background and Text Properties. So whenever we select another ListBoxItem then that value is Update in Target i.e in TextBox and TextBlock.

OneWay Binding

  Note: If Source Changes then only UI will Updated. Use this only when you want to display read only data in the UI.

OneTime:

       If Binding Mode is OneTime, then it sends data from source to target, but it does this only  when application started or DataContext changes. So in our example change the Mode Attribute value to OneTime and set the ListBox's SelectedIndex to 0 then run the example you will notice that only default value is shown in targets, eventhough we select another color then target's value can not change.

OneTime Binding Mode

           We can use this to show read only data in control as it was loaded. We can use this to compare the changes occurred in the UI with Default values. This is best when source Doesn't Implement INofityPropertyChanged Interface.

OneWayToSource:

         This mode is reverse to OneWay Mode, When Mode is set to OneWayToSource then if target value is changed by user then that value is updated to source.  In our example change the Mode to OneWayToSource and run the example you will notice that target's can not have any values, Now write any color in TextBox, when focus leaves then source will be updated for default selectedindex not the current selected index. But here Changed Data in Source can not be updated in target.

OneWayToSource Binding Mode

       We have to use this Binding Mode when user can able to change the source data and changed data can not be updated in Target UI.

TwoWay:

       If you set Mode to TwoWay then Whenever Source Property Changed then Target will be udpated, similarly if target values changes, changes will be updated in source property. Set the Mode two way in our example run it, You will notice that whenever  ListBox selection changes it will be updated in TextBlock and TextBoxes. If we change the value in TextBox then Source is Updated and also target updated with these values.

TwoWay Data Binding

   Use this binding when user can able to change data source and that changes will be updated to targets.

Default: In addition to these four Binding Modes Default Binding Mode exist. If you don't specify any binding Mode in Binding element then Default will take place. Defualt binding mode choose binding mode depending upon the target controls Dependency Property. For Example TextBox control Text property has binding mode as TwoWay in the same it will take for other controls.

UpdateSourceTrigger:

      It is the property of Binding element, indicates or defines when should be the target value updated in the source.

Conclusion:

        I hope you are clear about binding modes in wpf. So what do you thinking about binding modes now.

             Don't forget to Comment and Share for our friends if you like this post. Thank You.

Related Posts:

• DataContext Property Usage in WPF.
• Data Binding Basics.
• How to use UpdateSourceTrigger Property while Binding in TwoWay Mode.
• INotifyPropertyChanged Interface Usage.
• How to Bind XML Data to ListView Using XmlDataProvider.