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
  1. namespace MVVMDataBinding.Model  
  2. {  
  3.     public class TaskModel  
  4.     {  
  5.         public string Title { getset; }  
  6.         public int Duration { getset; }  
  7.         public string State { getset; }  
  8.     }  
  9. }  
 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
  1. using MVVMDataBinding.Model;  
  2.   
  3. namespace MVVMDataBinding.ViewModel  
  4. {  
  5. public class HomeViewModels  
  6.     {  
  7.         public TaskModel TaskModel { getset; }  
  8.         public HomeViewModels()  
  9.         {  
  10.             TaskModel = new TaskModel  
  11.             {  
  12.                 Title = "Create India",  
  13.                 Duration = 2,  
  14.                 State = "Tamil Nadu",  
  15.             };  
  16.         }  
  17.     }  
  18. }  
 Step 6

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

 
 
XML Code 
  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
  4.              xmlns:local="clr-namespace:MVVMDataBinding"  
  5.              x:Class="MVVMDataBinding.MainPage">  
  6.   
  7.     <StackLayout VerticalOptions="Center">  
  8.         <Label Text="Title of the task"/>  
  9.         <Entry Text="{Binding TaskModel.Title}}"/>  
  10.         <Label Text="Duration of the task"/>  
  11.         <Entry Text="{Binding TaskModel.Duration}}"/>  
  12.         <Label Text="State of Country"/>  
  13.         <Entry Text="{Binding TaskModel.State}}"/>  
  14.      </StackLayout>  
  15. </ContentPage>  
 Step 7

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

 
 
C# Code 
  1. using MVVMDataBinding.ViewModel;  
  2. using Xamarin.Forms;  
  3.   
  4. namespace MVVMDataBinding  
  5. {  
  6.     public partial class MainPage : ContentPage  
  7.     {  
  8.         public MainPage()  
  9.         {  
  10.             InitializeComponent();  
  11.             BindingContext = new HomeViewModels();  
  12.         }  
  13.     }  
  14. }  
 Step 8

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

 

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


Similar Articles