Two-Way Binding Or MVVM In Xamarin.Forms Application

Introduction

In this article, we are going to learn how to apply two-way binding in Xamarin forms application with the help of InotifyPropertyChanged System component model.

Use of InotifyPropertyChanged

It's an interface which is used for notifying the clients and typically binding the clients that the value of the property has been changed.

Implementation

Open Visual Studio and select New Project.

Select "Cross Platform App" option and give the project a name.



Select Blank App template and PCL from code sharing.



Set the target and minimum platform version.



Create a 'Models' folder inside MvvmDemo(Portable) project and add the following model file.

Add EmployeeModel.cs

namespace MvvmDemo.Models {
    public class EmployeeModel {
        public string Name {
            get;
            set;
        }
        public string Designation {
            get;
            set;
        }
        public string Qualification {
            get;
            set;
        }
        public string Details {
            get;
            set;
        }
    }
}

Create 'ViewModels' folder inside MvvmDemo(Portable) project and add the following file.

Add EmployeeViewModel.cs 

using MvvmDemo.Models;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using Xamarin.Forms;
namespace MvvmDemo.ViewModels {
    public class EmployeeViewModel: INotifyPropertyChanged {
        private EmployeeModel _employeeModel;
        public EmployeeModel EmployeeModel {
            get {
                return _employeeModel;
            }
            set {
                _employeeModel = value;
                OnPropertyChanged();
            }
        }
        public EmployeeViewModel() {
            EmployeeModel = new EmployeeModel() {
                Name = "Irshad",
                    Designation = "SE",
                    Qualification = "MCA"
            };
        }
        private string _message;
        public string Message {
            get {
                return _message;
            }
            set {
                _message = value;
                OnPropertyChanged();
            }
        }
        public Command SaveCommand {
            get {
                return new Command(() => {
                    Message = "I am " + EmployeeModel.Name + ", My qualification is " + EmployeeModel.Qualification + " and working as a " + EmployeeModel.Designation;
                });
            }
        }
        public event PropertyChangedEventHandler PropertyChanged;
        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null) {
            PropertyChanged ? .Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

Open MainPage.xaml and modify the code as below.

<?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:MvvmDemo" x:Class="MvvmDemo.MainPage" BackgroundColor="Cyan">
    <StackLayout VerticalOptions="Center">
        <Label Text="Employee name : "></Label>
        <Entry Text="{Binding EmployeeModel.Name, Mode=TwoWay}"></Entry>
        <Label Text="Employee Designation : "></Label>
        <Entry Text="{Binding EmployeeModel.Designation, Mode=TwoWay}"></Entry>
        <Label Text="Employee Qualification : "></Label>
        <Entry Text="{Binding EmployeeModel.Qualification, Mode=TwoWay}"></Entry>
        <Button Text="Save Employee" Command="{Binding SaveCommand}"></Button>
        <Label Text="{Binding Message}"></Label> </StackLayout>
</ContentPage>

Open MainPage.xaml.cs and modify the code as below.

using Xamarin.Forms;
using MvvmDemo.ViewModels;
namespace MvvmDemo {
    public partial class MainPage: ContentPage {
        EmployeeViewModel evm;
        public MainPage() {
            InitializeComponent();
            evm = new EmployeeViewModel();
            BindingContext = evm;
        }
    }
}

Check the configuration manager. It should be checked with the build and deploy options for the platforms you require.

Folder structure for the portable project will be as below.

Note

I have attached only portable project. You have to create your own project and copy the portable project files from the attached one.

Run the application. You will get the following screen.

Modify the details as shown below.


Click on 'Save Employee' button.



You will get the updated binded value of Employee model details to the message label.

How it works

1. We have used PropertyChangedEventHandler, that will indentity the method which handles the event. If you want to associate the event with your handler, you have to add the instance of the delegate to the event. This event handler will be called whenever the event occurs.
   
   
2. We have done the binding of Entry View as two-way binding as {Binding EmployeeModel.Name, Mode=TwoWay}. This will set the property value of the binded model as soon as you unfocused the control.
   
   
3. OnPropertyChanged() method is responsible to return and reflect the latest updated value of the property so that it will reflect to the binded View.
   
   
4. SaveCommand: this command is simply used to get the latest value of the updated model that will tell what the updated model is and demonstrate MVVM that the ViewModel value has been changed by changing the value from UI.