Basic Binding Concepts (Binding Context, Binding Context Inheritance)


Xamarin.Forms data binding is used for links a pair of properties between two objects. In this data binding, one object should act as a 'Target' and another object should act as a 'Source'. In some simple cases, data flows from source to target. This means the value of the target property set from the value of the source property. In some special cases, data flows will be changed, like data flow from target to source or either both directions.

Concepts of Bindings

Binding with a Binding Context
Here, we can see how the data bindings entirely in xaml using 'BindingContext'.
  1. <ContentPage  
  2.     xmlns=""  
  3.     xmlns:x=""  
  4.             x:Class="DataBindingDemos.BasicXamlBindingPage"  
  5.             Title="Basic XAML Binding">  
  6.     <StackLayout Padding="10, 0">  
  7.         <Label Text="TEXT"  FontSize="80" HorizontalOptions="Center" VerticalOptions="CenterAndExpand"  
  8. BindingContext="{x:Reference Name=slider}" Rotation="{Binding Path=Value}" />  
  9.         <Slider x:Name="slider" Maximum="360" VerticalOptions="CenterAndExpand" />  
  10.     </StackLayout>  
  11. </ContentPage>  
The main theme of the above code is rotate the label by changing the slider. Without data binding, to achive this is lenghy, but data binding automates and does the job shorter.
In the above code 'x:reference' markup extension is required to reference the source code, here the source is 'slider', and the 'Binding' markup extension links the rotation' property of the label to the 'Value' property of the slider.
The source property is specified with the 'Path' property of the Binding extension.
Once all settings are done and run the code, we can see the moving label with respect to the moving slider because here we are linking the value of the slider to a label rotation property with the help of the binding concept.
Binding Context Inheritance
Here we can see the inheritance concept used in a binding context.
  1. <ContentPage xmlns=""  
  2.    xmlns:x=""  
  3.    x:Class="DataBindingDemos.BindingContextInheritancePage"  
  4.    Title="BindingContext Inheritance">  
  5.       <StackLayout Padding="10">  
  6.          <StackLayout VerticalOptions="FillAndExpand" BindingContext="{x:Reference slider}">  
  7.          <Label Text="TEXT" FontSize="80" HorizontalOptions="Center" VerticalOptions="EndAndExpand" Rotation="{Binding Value}" />  
  8.          <BoxView Color="#800000FF" WidthRequest="180" HeightRequest="40" HorizontalOptions="Center" Rotation="{Binding Value}" />  
  9.       </StackLayout>  
  10.          <Slider x:Name="slider" Maximum="360" />  
  11.       </StackLayout>  
  12. </ContentPage>  
In the above code, the 'BindingContext' property of the 'StackLayout' is set to the slider object. This binding context is inherited by both the 'Lable' and 'BoxView', both of which have their rotation properties set to the 'Value' property of the slider. So once you run the code, both the label and box will rotate with respect to the slider movement.

Next Recommended Reading View To View Binding In Xamarin.Forms