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.
Example
- <Label Text="{Binding MainText}" VerticalOptions="Center"
-
- HorizontalOptions="Center" />
-
- BindingContext = this;
- MainText = "Hello Welcome";
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:
- Which object will Xaml look for in the binding object?
- Where is the relation happening (Source and Target)?
- 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.
- BindingContext = this;
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.
- public partial class DataBind: ContentPage, INotifyPropertyChanged
- {
- public event PropertyChangedEventHandler PropertyChanged;
-
- protected virtual void OnPropertyChanged(string propertyName)
- {
- PropertyChanged ? .Invoke(this, new PropertyChangedEventArgs(propertyName));
- }
-
- private string _maintext;
-
- public string MainText
- {
- get
- {
- return _maintext;
- }
- set
- {
- _maintext = value;
- OnPropertyChanged(nameof(MainText));
- }
- }
- }
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
- The source object must be derived from INotifyPropertyChanged
- The target object must follow BindingContext property
- 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.
- private string _maintext;
-
- public string MainText
- {
- get
- {
- return _maintext;
- }
- set
- {
- _maintext = value;
- OnPropertyChanged();
- }
- }
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:
Oneway or Default: In this default mode, the value updates from the source to target (Target to source is not possible)
OneWayToSource: Changes the value target to source.
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
- <Label Text="{Binding Mode=OneWay,Path=MainText,StringFormat='Date Time : {0}'}"
- x:Name ="LblDemo"
- VerticalOptions="Center"
- HorizontalOptions="Center" />
Code behind the page is shown below:
MainText = DateTime.Now.ToString(); // Only assign the Time.