Basic Binding Concepts (Binding Context, Binding Context Inheritance)

Here we know the two basic binding concepts that we used in Xamarin.Form.

Introduction 

 

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'.

<ContentPage
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            x:Class="DataBindingDemos.BasicXamlBindingPage"
            Title="Basic XAML Binding">
    <StackLayout Padding="10, 0">
        <Label Text="TEXT"  FontSize="80" HorizontalOptions="Center" VerticalOptions="CenterAndExpand"
BindingContext="{x:Reference Name=slider}" Rotation="{Binding Path=Value}" />
        <Slider x:Name="slider" Maximum="360" VerticalOptions="CenterAndExpand" />
    </StackLayout>
</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.

 

Note

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.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
   xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
   x:Class="DataBindingDemos.BindingContextInheritancePage"
   Title="BindingContext Inheritance">
      <StackLayout Padding="10">
         <StackLayout VerticalOptions="FillAndExpand" BindingContext="{x:Reference slider}">
         <Label Text="TEXT" FontSize="80" HorizontalOptions="Center" VerticalOptions="EndAndExpand" Rotation="{Binding Value}" />
         <BoxView Color="#800000FF" WidthRequest="180" HeightRequest="40" HorizontalOptions="Center" Rotation="{Binding Value}" />
      </StackLayout>
         <Slider x:Name="slider" Maximum="360" />
      </StackLayout>
</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.