Read the previous parts of the series here,

This article explains an overview of the Binding concept in XAML.

Data Binding

Data binding: communication between the two objects. One of the fantastic concepts in Xaml is once the communication takes place, there is no need to worry about the future assignment. Binding updates the data automatically, whenever source or target updates. Data binding says two objects are required; where one is the source and the other one is the Target.
Binding
Example
  1. <Label Text="{Binding MainText}" VerticalOptions="Center"
  3. HorizontalOptions="Center" />
  5. BindingContext = this;
  6. MainText = "Hello Welcome";
example

Source object is the main text as a string, and the Target Object: Label text is the target property. Generally, three questions will arise, which are:
  1. Which object will Xaml look for in the binding object?
  2. Where is the relation happening (Source and Target)?
  3. Whenever source object is changed; it updates the target property -- how is this magic happening?

Let's see:

BindingContext

BindingContext: Assign the view model object to this property. XAML will understand; i.e, where to look into the binding object.

In two way, we can assign this property specific to the control or the XAML BindingContext.

Control BindingContext

This is an option only based on the controls.

Ex: Label LblDemo;

LblDemo.BindingContext = this;
XAML BindingContext

If assigning to the xaml is (parent class) based, default it as applicable to all the controls.

  1. BindingContext = this; // Applicable to all the child controls
INotifyPropertyChanged (Update)
This interface job is applicable whenever the source object value is changed; it will notify the target object.

All the source objects must be derived from the INotifyPropertyChanged interface.
  1. public partial class DataBind: ContentPage, INotifyPropertyChanged
  2. {
  3. public event PropertyChangedEventHandler PropertyChanged;
  5. protected virtual void OnPropertyChanged(string propertyName)
  6. {
  7. PropertyChanged ? .Invoke(this, new PropertyChangedEventArgs(propertyName));
  8. }
  10. private string _maintext;
  12. public string MainText
  13. {
  14. get
  15. {
  16. return _maintext;
  17. }
  18. set
  19. {
  20. _maintext = value;
  21. OnPropertyChanged(nameof(MainText));
  22. }
  23. }
  24. }
Whenever the value is assigned to MainText variable, in the set function OnPropertyChanged, the function is called and it updates into the target property.

Databinding three thumb rule
  1. The source object must be derived from INotifyPropertyChanged
  2. The target object must follow BindingContext property
  3. Communication between the source and target via Binding Extension

Tip

If the class is derived from the BindableObject class, there is no need to implement the INotifyPropertyChanged. This BindableObject class is by default, implementing the INotifyPropertyChanged and you have to call the OnPropertyChanged function.

Page class is derived from the BindableObject class, so there is no need to implement INotifyPropertyChanged in our example, just rewrite the code, given above.

  1. private string _maintext;
  3. public string MainText
  4. {
  5. get
  6. {
  7. return _maintext;
  8. }
  9. set
  10. {
  11. _maintext = value;
  12. OnPropertyChanged();
  13. }
  14. }
We can assign the binding in the code, behind the page also, which is using the SetBinding function

LblDemo.SetBinding(Label.TextProperty,new Binding("MainText"));

Binding Mode

Binding mode uses the direction to update the value (Source to Target or Target to Source).

The different types of modes are available:

Mode

Oneway or Default: In this default mode, the value updates from the source to target (Target to source is not possible)

type

Binding

OneWayToSource: Changes the value target to source.

bind

Twoway: The value is updated in both the directions

Path

This property is used to assign the source object and declare. This is a property and an optional only “path” string.

StringFormat in Xaml
This function is used to format the string which assigns the target property, there is no need to format each time in the code in the backend file.

Example
  1. <Label Text="{Binding Mode=OneWay,Path=MainText,StringFormat='Date Time : {0}'}"
  2. x:Name ="LblDemo"
  3. VerticalOptions="Center"
  4. HorizontalOptions="Center" />
Code behind the page is shown below:

MainText = DateTime.Now.ToString(); // Only assign the Time.

 format