Introduction
As you all know, MVVM is the widely used design pattern nowadays. Basically, MVVM is used in device-based development such as WPF, Xamarin, Silverlight, etc. In this article, we will try to understand how we can use the MVVM design pattern in Xamarin Form applications using the MvvmCross third-party library.
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 -Version 6.4.2
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.
1. Open Visual Studio and click on create a new project, as shown in the below screenshot:
2. When you click on the 'create a new project' option, it navigates to the next screen where you must choose the type of project you want to create. Type “mvvmcross” in your search and you should see two types of projects. If you do not see these two options, it means that you have not installed the visual studio extension for MVVM cross. Above, I have explained how to install it.
3. Now, click on the first option, “MvvmCross Multi-Page Xamarin Forms Application”. Give the name of your project and the location as per your requirements.
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:
Now build the solution. It should build successfully. If it doesn’t, than you can ping me the errors and I will help you to solve them.
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.
You can create a Model folder and keep your business logic there.