How to use MvvmCross Library in Xamarin.Forms

Introduction

What is MvvmCross?

Basically, MvvmCross is the third-party library that enables your application to use the MVVM design pattern. We can install this third-party library using NuGet which we will see in the article as well. We all know about the MVVM design pattern, where you have three main important parts of your application. They are View (we call it UI as well), Model (we call it Business Logic as well), and viewModel (The bridge between View and Model). So, in short, when you do something on View, the viewModel learns your activity and it runs the model to fetch information if required. It comes back with the answers in its hand and notifies the view. You can imagine that the ViewModel bridge is the one responsible for all the right activities on the application. View has no idea from where or which model the date will be fetched, and Model has no idea to which view gets called. There is a separation in your application which is very important because you want your application to be loosely coupled and have less dependency over the objects, which slow down the performance.

How do we get MvvmCross in our application?

If you ask me, then there are two ways, one is NuGet, and the other is downloading the template.

Using NuGet

Use the below commands to install mvvmCross in your Xamarin.Forms application from Command Manager:

Install-Package MvvmCross.Forms -Version 6.4.2

Make sure you have below packages installed:

Using Template:

Using a template is the easiest way to use MvvmCross. So go on this Link and install the extension in your Visual Studio. Let it install the extension to your visual studio. I am using Visual Studio 2019 Enterprise edition.

How to Use MvvmCross in a Xamarin forms Project

So, I hope you have installed the extension from the above link. Now follow the below steps to configure your first application using mvvmcross.

4. Click on Create. It will now ask you the type of template of your app. For now, you can choose “Blank” like shown in the below image:

5. Once it creates the app, you should be able to see the below projects in your solutions:

How to create an Android Emulator

Once you successfully get the solution build, we need Android Emulator to deploy our first application using mvvmCross. Follow the below steps to create the Android Emulator:

1. You should see the below option in your visual studio (sorry for the weird arrow sign).

2. you should see the below configurations. You can always change it if you want, but I would suggest not to change anything and just click on the create button.

3. You should see the created simulator in the below list:

4. You can start it and see that it should be available on the deploy list:

How do I know that my app is using MvvmCross?

You know this because everything looks similar when you work with Xamarin with or without MvvmCross. However, to make sure you have enabled MvvmCross in your app, check the project structure, which by far is the simplest structure because .core defines your Xamarin forms project and native projects will have .Android and .iOS at the end of the project. You will notice the CoreApp class, which basically inherits the MvxApplication. That’s how you check if our application is mvvmCross enabled.

How do I know that I am following an MVVM Design Pattern?

When you create the project and get the .core project, that's the project that is mvvm design pattern enabled. Let’s look below the folder structure of the core project:

Pages folder is the View where you keep all your user interface.

ViewModel is the viewModel area where you keep all your viewmodels.