Binding Control To Control In Xamarin.Forms

Introduction

Data binding is a mechanism in Xamarin Forms Applications. Binding is a common context. It is the process of mapping a property on a page, to a property in a view or ViewModel. In this article, I will show you how to bind Control property to Control property binding in Xamarin. Forms.

Create New Xamarin. Forms Application

Let's start with creating a new Xamarin Forms Project in Visual Studio.

Open Run - Type Devenev.Exe and enter - New Project (Ctrl+Shift+N) - select Blank XAML app (Xamarin.Forms Portable) template.

You can refer to my previous article to create new Xamarin forms Application at http://www.c-sharpcorner.com/article/how-to-create-first-xamarin-form-application/

Binding control to control, using XAML

Data bindings can be defined to link properties of two controls on the same page. In this case, you set the BindingContext of the target object, using the x: Reference markup extension.

In the sample given below, add one Entry control and Label control to print the text.

<StackLayout>
    <Entry x:Name="txtname"></Entry>
    <Label Text="Welcome Mr.." VerticalOptions="Center" HorizontalOptions="Center" />
    <Label BindingContext="{x:Reference Name=txtname}" Text="{Binding Path=Text}" VerticalOptions="Center" HorizontalOptions="Center" /> </StackLayout>

Entry Control Name : txtname.

Label control adding Binding Context and Binding the value.

While assigning binding Context, we can use two ways, which are given below.

BindingContext="{x:Reference Name=txtname} OR BindingContext="{x:Reference txtname} // Name attribute is not required

Similarly while assigning the value to property, we can use two ways given below.

Text="{Binding Path=Text}" OR Text="{Binding Text}" // Path attribute is not required

Binding control with String Builder

All the database data or other storage data is not a formatted data, so you can bind property with the string or any type, as shown below. 

<Label BindingContext="{x:Reference Name=txtname}" Text="{Binding Path=Text, StringFormat='Welcome Mr {0}'}" />
<StackLayout>
    <Entry x:Name="txtname"></Entry>
    <Label BindingContext="{x:Reference Name=txtname}" Text="{Binding Path=Text, StringFormat='Welcome Mr {0}'}" VerticalOptions="Center" HorizontalOptions="Center" /> </StackLayout>

Binding control in C#

You can do it effectively in the same way as XAML example is simply by setting your view's BindingContext or Source to the other view.

label.SetBinding(Label.TextProperty, new Binding("<Property Name>", stringFormat: "Welcome Mr {0}", source: <BindingContext Control name>));

or

var label = new Label{ BindingContext = <Control Name> };
label.SetBinding(Label.TextProperty, new Binding("<Property Name>", stringFormat: "Welcome Mr {0}"));

StackLayout layout = new StackLayout();
var editor = new Editor();
Children.Add(editor);
var label = new Label();
SetBinding(Label.TextProperty, new Binding("Text", stringFormat: "Welcome Mr {0}", source: editor));
Children.Add(label);
Content = layout;

Binding User Control

Xamarin Forms doesn’t have a control called as User Control. However, we can make any VisualElement or a combination of Visual elements into a reusable control i.e. to use on different pages, just like a User Control.

Create User Control

Right click on PCL project > Select Forms XAML View and click Add.

In XAML and C# file, change the content's view to any layout control like Grid, Stack layout

In XAML page, it is given below.

<?xml version="1.0" encoding="UTF-8"?>
<Grid xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MVVMXamarin.MyControl">
    <Label Text="{Binding Text, Source={x:Reference this}}" /> </Grid>

In the code backend file, you might want to make your control, have a bindable property to pass the data through to it. On the each page, it is used. First, create a Bindable property in your UserControl. It doesn’t have to be a bindable property, if you just want to pass a static value through, however if you want to bind to it, you must make it bindable.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
namespace MVVMXamarin {
    public partial class MyControl: Grid {
        public MyControl() {
            InitializeComponent();
        }
        public static readonly BindableProperty TextProperty = BindableProperty.Create(nameof(Text), typeof(string), typeof(MyControl));
        public string Text {
            get {
                return (string) GetValue(TextProperty);
            }
            set {
                SetValue(TextProperty, value);
            }
        }
    }
}

Going to your MainPage, you can now assign a value to the Text property. You can also use {Binding PropertyName}, if you want, as this is a Bindable property.

<StackLayout>
    <Entry x:Name="txtname"></Entry>
    <local:MyControl BindingContext="{x:Reference Name=txtname}" Text="{Binding Path=Text, StringFormat='Welcome Mr {0}'}"> </local:MyControl>
</StackLayout>