Data Binding And Types Of Data Binding In Xamarin

Introduction

At the end of the article, you will be able to bind data in Xamarin in various ways.

Tools

Visual Studio with Xamarin installed.

What is Data Binding? 

Data binding is a concept that you see in most UI frameworks like:

1. Windows Presentation Foundation (WPF)
2. Silverlight
3. Angular
4. Knockout

Data binding is the process of binding the property of the user interface element with another property of an object. It is the relation of the source and an object. The source provides the data and the target takes it from the source. For example, the picture below shows the binding of text property of a label with a value property of a slider.

 

So, when the value of the slider changes, the text of the label is automatically updated. We use a special syntax for this. So far, all the attribute values you have seen are strings. At run time, these string values are converted into a primitive type or an object using a type converter. In the case of data binding, we cannot convert the string values to the binding context. That’s why we use XAML markup extension,i.e., curly braces “{}” for that purpose. Let’s see how to do this using XAML code.

View To View Binding

1. Give x:Name to the Source Object.
2. First, set the text of the label to binding context.
3. Give source which is also a binding expression and set x:Reference
4. Give path which shows which property of the object you want to bind with.

XAML Code

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:PracApp1"
             x:Class="PracApp1.MainPage">

    <StackLayout VerticalOptions="Center" HorizontalOptions="Center">
        <Label Text="{Binding Source={x:Reference Slider},Path=Value}"></Label>
        <Slider x:Name="Slider" Minimum="0" Maximum="100"></Slider>
    </StackLayout>
</ContentPage>

The result will be something like this on UWP.

 

This is a view-to-view binding and it requires no C# code. As you move the slider, the value will change. You can bind different properties of the label with the slider. Like in the example below, we bind the opacity of label with the value of a slider and also add a BoxView to bind its opacity with it. As we move the slider, the label shows the current value of the slider. Its opacity also increases or decreases the same as the BoxView.

 

XAML Code

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:PracApp1"
             x:Class="PracApp1.MainPage">
<StackLayout BindingContext="{x:Reference Slider}"
                 VerticalOptions="Center"
                 HorizontalOptions="Center">

        <BoxView Color="Green" Opacity="{Binding Value}"></BoxView>
        <Label x:Name="Label"
               Text="{Binding Value,
               StringFormat='Value is: {0:F2}'}"
               Opacity="{Binding Value}"/>
        <Slider x:Name="Slider" Minimum="0" Maximum="100"></Slider>
    </StackLayout>
</ContentPage>

Model To View Binding

When you have to bind data from the code to your View, you have to use a totally different technique which is called Model-To-View Binding. For example, you have a list of data and you want to show it in your application; you cannot connect it directly from the View. So, you have to bind it from the back-end in the C# code. The example below shows the binding through Model.

For the results above, you just have to create a property in the code and set its value to a text. Add a label in a StackLayout and bind it with that property just like the below code.

XAML Code

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:PracApp1"
             x:Class="PracApp1.MainPage">

<StackLayout VerticalOptions="Center" HorizontalOptions="Center">
        <Label x:Name="Label1" Text="{Binding MyProperty, Mode=TwoWay}"></Label>
    </StackLayout>
</ContentPage>

C# Code

using PracApp1.Models;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace PracApp1
{
    public partial class MainPage : ContentPage
    {
        private string myVar;
        public string MyProperty
        {
            get { return myVar; }
            set { myVar = value; }
        }

        public MainPage()
        {
            InitializeComponent();
            this.BindingContext = this;

            MyProperty = "Label Text";
        }
    }
}

Don’t forget to add this.BindingContext in the code. It specifies that the binding is allowed with the current page not from another C# file so it is necessary. Also  there are several types of binding Modes.

1. Default
2. OneWay – allows binding from source to target
3. OneWayToSource – allows one way binding from target to source
4. TwoWay – allows both way from target to source or source to target

Summary

Data Binding is one of the most important things in XAML and many other platforms to create a data connection between source and object. This article tells you about the basics of view to view and model to view binding.