WPF data binding data flow direction using binding mode

+1 vote
asked Jul 12, 2014 in WPF by Susan

What are the different kinds of data binding direction modes are there? When should I use OneWay vs TwoWay and how they are working internally in WPF framework.

Share

1 Answer

+1 vote
answered Jul 13, 2014 by Vikas
selected Jul 13, 2014 by administrator
 
Best answer

In WPF application whenever you want to display data that comes from different data sources, then the data binding concept will be used. When we do that data binding, we will map the property of a particular control (Text property of the TextBox) to a property of POCO class (FirstName property of Customer class) or XML. In this data binding concept, there are some important information we need to provide to the WPF engine to display the data at right place at right time. One of the information we need to provide is called “Mode”.

Mode is used to specify the direction in which the data is going to flow between the Binding Source and Binding Target. Here, property of the control will called as Binding Target, where as the property of the POCO class will be called as Binding Source. Binding Targets controls are basically Dependency objects and the properties of the Binding Targets are called Dependency Property. For complete detail about dependency object, take a look at the article Dependency Object in WPF and where should I use
Usually there will be a default mode of binding for content controls. Those controls will by default uses those binding mode unless you change it.

For example, TextBox will have default binding mode as “Two Way” where as TextBlock will be using default mode as “OneWay”.

OneWay Binding:

wpf onway binding

OneWay binding mode will be used when the changes from SourceProperty(FirstName) to update the target property (Text property of TextBox) automatically whenever the value of the Source property is changed. But, to make it automatic, we need to implement an interface called “INotifyPropertyChanged”. This interface has an event called “PropertyChanged” event.

As I explained earlier, the Text property is a Dependency Property. Dependency properties are by default listen to the “PropertyChanged” event i.e when you bind the Text property of the TextBox to FirstName property of the CustomerViewModel, .net framework by default listen for the event PropertyChanged. Property changed event accepts the argument called PropertyChangedEventArg where we need to send the name of the property which has been modified.

Consider that, you have 5 TextBox control in your window and each one is bound with the different properties of the ViewModel. In this case, when a particular property is changed, then the property should raise PropertyChanged event with the name of that property. Ex: Whenever the value of FirstName is changed, it should raise Property Changed Event by passing the property name as “FirstName”. When the event is raised, all textbox’s text property will be listening to that event. But when the event reach the textbox’s, it will check for the name of the property which raised that particular event. Since the “FirstName” property will be bound only with First Name Textbox, only that textbox will accept that change. Rest all textboxes will omit that change. So, only First Name textbox will be updated.

In this OneWay binding, when the value of the FirstName textbox is changed will not be reflected to the FirstName property of the CustomerViewModel

<Grid>
            <TextBox Name="txtFirstName" Text="{Binding Path=FirstName, Mode=**OneWay**}"
                     Height="23" Width="148"/>
            <TextBox x:Name="txtLastName"  Text="{Binding LastName, Mode=**OneWay**}"
                Height="23" Width="148"/>
    </Grid>

public class CustomerViewModel : **INotifyPropertyChanged**
    {
        private string firstName;
        public string FirstName 
        { 
            get
            {
                return firstName;
            }
            set
            {
                firstName = value;
                **OnPropertyChanged("FirstName");**
            }
        }

        private string lastName;
        public string LastName
        {
            get
            {
                return lastName;
            }
            set
            {
                lastName = value;
                OnPropertyChanged("LastName");
            }
        }

        public event PropertyChangedEventHandler **PropertyChanged**;

        private void OnPropertyChanged(string property)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged.Invoke(this, new PropertyChangedEventArgs(property));
            }
        }
    }

OneWayToSource Mode:

This mode is just direct opposite to OneWay mode. Because in this mode, the changes of FirstName textbox will be reflected to the FirstName property of the CustomerViewModel. But the changes of FirstName property will not reflect the changes to FirstName textbox. But the changes will reflect only when you move focus out of the textbox.

wpf onewaytosource binding

<Grid>
            <TextBox Name="txtFirstName" Text="{Binding Path=FirstName, Mode=**OneWayToSource**}"
                     Height="23" Width="148"/>
            <TextBox x:Name="txtLastName" Text="{Binding LastName, Mode=**OneWayToSource**}"
                Height="23" Width="148"/>
    </Grid>

TwoWay Mode:

wpf twoway binding

This mode is the combination of both OneWay and OneWayToSource. In this mode, the changes will traverse in both the direction. But there is a trick to push the changes in both the direction. When the changes to be pushed from Binding Source to Binding Target, same as OneWay binding, INotifyPropertyChanged interface must be implemented in the ViewModel. So that, the WPF engine knows when the Source Property got changed.

Same like that, WPF engine needs to know, when the Binding Target property got changed. i.e Whenever the value of Text property of the TextBox is changed, the textbox should notify the WPF engine to push the changes to Source property. To do that, we need to use the property called “UpdateSourceTrigger” . This property will tell WPF engine about the change, also it will direct the engine for when to update the Source.
You can set any one of the value in following list.

Default (LostFocus) – Default is LostFocus.

PropertyChanged – Changes will be pushed whenever the character changed in the Textbox

LostFocus – Changes will be pushed whenever the focus taken out from the control.

Explicit – When the value is set to Explicit, the changes will NOT be pushed to the source until the “UpdateSource” method is called explicitly.

wpf twoway binding explicit

In the below example, I have not specified the Mode as “TwoWay” because, by default the textbox will be set will “TwoWay” mode. So, I do not need to specify that explicit.

<Grid>
            <TextBox Name="txtFirstName" Text="{Binding Path=FirstName,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
                     Height="23" Width="148"/>
            <TextBox x:Name="txtLastName" Text="{Binding LastName, UpdateSourceTrigger=LostFocus}"
                Height="23" Width="148"/>
            <Button Content="Change View Model"  Width="140" Click="Button_Click_1"/>
    </Grid>

OneTime mode: This is final mode of databinding which is used to initialize the Binding Target only once from the binding source. Once it is done, thereafter no more changes from Source will be pushed to target.

Your answer

Preview

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.
Anti-spam verification:
To avoid this verification in future, please log in or register.
site design / logo / content © 2013 - 2015 pinfaq.com
...