Xamarin.Forms - Create MVVM Data Binding Application

Introduction

This article demonstrates how to create MVVM Data Binding Application using C# and XML in Xamarin.Forms.

Let’s start.

Step 1

Open Visual Studio. Go to New Project >> Installed >> Visual C# >> Cross-Platforms >> Cross-Platform App (Xamarin).

Select Cross-Platform App, then give project name and project location.

Step 2

Next, go to Solution Explorer >> Project Name (Portable), then right-click to Add >> New Folder. It opens a new dialog box; give the name to your Model.

Go to Project Name >> Model. Right-click to Add >> Class. This opens a new dialog box. Give a name to TaskModel.cs.

Step 3

Next, open Solution Explorer >> Project Name >> Model >> TaskModel.cs. Click to open C# code. Then, give the following code.

C# Code

namespace MVVMDataBinding.Model
{
public class TaskModel
{
public string Title { get; set; }
public int Duration { get; set; }
public string State { get; set; }
}
}

Step 4

Similarly, add a new folder under Class page, then give the name for ViewModel and HomeViewModels.cs.

Step 5

Next, open Solution Explorer >> Project Name >> ViewModel >> HomeViewModel then click open C# code. Give the following code.

C# Code

using MVVMDataBinding.Model;
namespace MVVMDataBinding.ViewModel
{
public class HomeViewModels
{
public TaskModel TaskModel { get; set; }
public HomeViewModels()
{
TaskModel = new TaskModel
{
Title = "Create India",
Duration = 2,
State = "Tamil Nadu",
};
}
}
}

Step 6

In this step, go to MainPage.xaml and open Design View. Paste the following code.

XML 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:MVVMDataBinding"
x:Class="MVVMDataBinding.MainPage">
<StackLayout VerticalOptions="Center">
<Label Text="Title of the task"/>
<Entry Text="{Binding TaskModel.Title}}"/>
<Label Text="Duration of the task"/>
<Entry Text="{Binding TaskModel.Duration}}"/>
<Label Text="State of Country"/>
<Entry Text="{Binding TaskModel.State}}"/>
</StackLayout>
</ContentPage>

Step 7

Next, open Mainpage.axml.cs Page, then add namespace MVVMDataBinding.ViewModel, and give the following C# code.

C# Code

using MVVMDataBinding.ViewModel;
using Xamarin.Forms;
namespace MVVMDataBinding
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
BindingContext = new HomeViewModels();
}
}
}

Step 8

Finally, Debug and Run the app to see a working MVVMDataBindding.

Finally, we have successfully created Xamarin.Forms MVVMDataBinding application.