How to use MVVMCross Library in Xamarin Forms?

Basically, MVVMCross is the third-party library that permits your application to use the MVVM design pattern. We can install this third-party library using NuGet which we will see in this blog as well.

We all realize the MVVM design pattern, where you will acquire three main important parts of your application. They are View (View for User Interface), Model (Model use for Business logic), and ViewModel (Connection between View and Model). In short, when you do something in the View, the ViewModel learns your activity and runs the model to get the information when needed.

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. The view has no idea from where or which model the data will be fetched, and the 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 slows down the performance.

As per Xamarin goes it's a few options to create cross-platform applications. That includes xamarin. ios, xamarin. android, and xamarin. forms. Usually, if you would like a cross-platform app with one UI code behind then xamarin. forms might be what you want. But today we will be going to use xamarin. android with a PCL (Portable Class Library) behind. We usually tend to stay our UI apart for various platforms and thus this route feels very nice.

There are two approaches to install the MVVM cross library in the project.

1)Using NuGet

2)Using Template

1) Using NuGet install the MVVM Cross library.

Use the following commands to install MVVMCross into your Xamarin.Forms application from Command Manager:

Command

2) Using Template

Using a template is the easiest method to use MVVMCross. So go to this Link and install the extension in your Visual Studio.

Advantages of MVVMCross Library

MVVMCross is a fully customizable code such as developer control servers that allow you to switch from ViewModel platform to ViewModel navigation with support for forwarding and returning built-in Reverse Control objects, dependency injection, and building add-on applications to drop and work with wizards and classes.

MVVM Life Cycle

When a ViewModel is loaded a couple of events and methods will be triggered. You can use those to execute code that needs to happen in different situations. It will offer you more refined control of the ViewModel and therefore the state of its lifecycle. There could also be binding that you simply want to update or resources to wash up, and these lifecycle events can help thereupon.

                
                        public class MvvmLifecycleViewModel: MvxViewModel
                        {
                        public override void ViewAppearing(){}
                        public override void ViewAppeared(){}
                        public override void ViewDisappearing(){}
                        public override void ViewDisappeared(){}
                        }
                    

Now see an example of how to use MVVMCross Library in your application?

First, you have to install the MVVM Cross library extension install in your visual studio to follow these steps below:

Step 1: First create a new project for MVVMCross library to follow the steps below.

1) First you have to search the MVVM Cross library in your project type and click MVVMCross library application.Then you have defined the project name and press the ok button to create a project.

Step 2: After creating the project you will see the solution below:.

Step 3: We are creating the project for UWP using this example. Create a new page for the user interface in the view folder.

File Name:FirstView.xaml

Code:

                
                
                <views:mvxwindowspage d:designheight="300" d:designwidth="400" mc:ignorable="d" x:class="MvvmCross_Application1.UWP.Views.FirstView" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="using:MvvmCross_Application1.UWP.Views" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:views="using:MvvmCross.Uwp.Views" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
                <grid>
                <stackpanel>
                <textblock text="{Binding Hello, Mode=OneWay}">
                <textbox text="{Binding Hello, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
                                            </textbox>
                                        </textblock>
                                    </stackpanel>
                                </grid>
                            </views:mvxwindowspage>
                        
                    

Class FIle:FirstView.xaml.cs

Code:

                
                        using System;
                        using System.Collections.Generic;
                        using System.IO;
                        using System.Linq;
                        using System.Runtime.InteropServices.WindowsRuntime;
                        using Windows.Foundation;
                        using Windows.Foundation.Collections;
                        using Windows.UI.Xaml;
                        using Windows.UI.Xaml.Controls;
                        using Windows.UI.Xaml.Controls.Primitives;
                        using Windows.UI.Xaml.Data;
                        using Windows.UI.Xaml.Input;
                        using Windows.UI.Xaml.Media;
                        using Windows.UI.Xaml.Navigation;
                        using MvvmCross.Uwp.Views;
                        namespace MvvmCross_Application1.UWP.Views
                        {
                        public sealed partial class FirstView :MvxWindowsPage
                        {
                        public FirstView()
                        {
                        this.InitializeComponent();
                        }
                        }
                        }
                    

Step 4:> Run the project to define the page in the Starup.cs file below.

Code:

                
                        using Windows.UI.Xaml.Controls;
                        using MvvmCross.Core.ViewModels;
                        using MvvmCross.Uwp.Platform;
                        namespace MvvmCross_Application1.UWP
                        {
                        public class Setup :MvxWindowsSetup
                        {
                        public Setup(Frame rootFrame) : base(rootFrame)
                        {
                        }
                        protected override IMvxApplicationCreateApp()
                        {
                        return new Core.App();
                        }
                        }
                        }
                    

Step 5: You can initialize and register the model in this file.

Code:

                
                        namespace MvvmCross_Application1.Core
                        {
                        public class App :MvvmCross.Core.ViewModels.MvxApplication
                        {
                        public override void Initialize()
                        {
                        CreatableTypes()
                        .EndingWith("Service")
                        .AsInterfaces()
                        .RegisterAsLazySingleton();
                        RegisterAppStart
                            ();
                            }
                            }
                            }
                        
                    

Step 6: > Output of the project below:

Everything looks similar once you work with Xamarin or without MVVMCross. However, to form sure you have got enabled MVVMCross in your app, check the project structure, which is far away the simplest structure because core defines your Xamarin forms project and native projects will haveAndroid and iOS at the top of the project. Basically, you will notice the CoreApp class inherited from MvxApplication. This is how you will have to check if your application has MVVMCross enabled.