Xamarin Forms and MVVM Pattern: Building Cross-Platform Apps

Xamarin provides the developers with the whole range of tools which can be used for the development of the cross-platform mobile application.

We are going to cover the step-by-step process to work with Xamarin forms. We will also touch on MVVM Pattern which is very critical in using Xamarin.

1. A quick Introduction to Xamarin
2. Installation Xamarin
3. Introduction to Xamarin forms
4. Explaining MVVM Design Pattern

1. A quick introduction to Xamarin?

It is a framework to develop a cross platform mobile application using C#. It uses HTML and JavaScript. Using these frameworks, we can develop apps like a website for mobile app using JS libraries, the website is packed in a container which gives the feel of a native app.

Xamarin is different because it offers a single language C# and runtime, which works on three mobile platforms (Android, iOS, and Windows). Through Xamarin, we develop a mobile app whose look and feel are completely native. In Xamarin, we write one C# codebase which has access to all the features which is available for native SDK.

Xamarin tools are easily available to download with Visual Studio. To use Xamarin on Windows, we need to install Visual Studio, which could be a free version or a premium license. After it, we need to configure it.

2. Installation of Xamarin

Here, we will learn how to install Xamarin on our PC. Microsoft Visual Studio allows us to build native mobile apps for iOS and Android using C# and .Net. Development is done using Xamarin. Xamarin apps are created using Visual Studio.

Firstly, make sure that your computer is installed with visual studio. If not download and install visual studio from https://visualstudio.microsoft.com/downloads.

If you already installed visual studio, click on modify and install Mobile development with .Net on workloads.

Just select Mobile development with .net and click on install. That’s it xmarin will be installed in your machine.

3. Xamarin.Forms (Cross Platform)

Pre-requisite for Xamarin.Forms (Cross Platform)

1. Basic Knowledge of C#
2. Some Knowledge about Xaml

3.1 Introduction

Xamarin.Forms is an open-source UI framework. Xamarin.Forms allows developers to build Xamarin.Android, Xamarin.iOS, and Windows applications from a single shared codebase.

Xamarin.Forms allows developers to create user interfaces in XAML with code-behind in C#. These interfaces are rendered as performant native controls on each platform.

We use Xamarin.Forms built-in Pages, layouts, and controls to build and design mobile apps from a single API that is highly extensible. Subclass any control to customize the behavior or to define our controls, layouts, pages, and cells to make our apps pixel perfect.

Xamarin.Forms is for developers with the following goals:

1. Share UI layout and design across platforms.

2. Share code, test and business logic across platforms.

3. Write cross-platform apps in C# with Visual Studio.

3.2 Xamarin Form Structure

In the beginning, when we open any device, any mobile phone whatever we see on the screen, the visible area is called a Page. All the visible area on the screen we consider it as a page, and we can compare that just like a ROM. And then how do we structure the things on the page, and how do we plan the things is known as Layout. The view is the actual item which we will put on the places, either we will stack them, put them on the left side, right side, etc.

3.3 Visual Elements

In Xamarin, elements shown on the device, the screen is called Visual Element. In a device like a Cell Phone, those are visible, or we can see are known as Visual Element.

In Xamarin there are 4 Visual Element.

3.3.1 Page

In a device, from the navigation bar to the end of the screen known as a page.

Pages are used to design the screen of the application. There are multiple types of “Pages” in Xamarin. Pages are a type of Parent Object which further contains a child, that can be another Page or Layout. A page occupies the entire screen.

1. A page cover the whole area of the screen.
2. A page contains the layout and views.
3. The app can have single or multiple pages.

1. ContentPage : Content Page contains a single view.
2. MasterDetailPage : MasterDetailPage has two panes for the page. Master Page contains the Menu and detail page contains the content.
3. NavigationPage : NavigationPage contains the navigation bar. In NavigationPage, we kept the page on a stack and can jump from one page to another. The navigation bar can have navigation buttons as well as the title.
4. TabbedPage : TabbedPage is a container page. The tabbed page acts as a container which holds the content page associated with each tab.
5. CarousalPage :  CarousalPage  is a page that users can swipe from side to side to navigate through pages of content, like a gallery.
6. Template Page : This page displays full-screen content with a control template, and is the base class for contentpage.

3.3.2 Layout

The child element in the page known as Layout

3.3.3 Views

The layout contains lots of elements are known as Views. Different types of views are as follows

1. Listview : A Listview is a user interface element that displays lists of items that are scrollable.
2. GridView : A gridView is a view group that allows applications to lay out content in a two-dimensional way, scrollable grid.
3. Label : The label is used to show the text in a single or multi-line text. Here, we can show the text with multiple formatting options in the same line.
4. Entry : To enter the text in a one-line uses the Entry. The entry has password mode.
5. Editor : To enter the text, which can take more than one line.
6. Image : Image displays the Bitmap. In the common project,Bitmaps can be downloaded over the web and can embedd as a resource . We can share the images across platforms with Xamarin.Forms. 
7. BoxView : BoxView is a simple rectangle of specified width, height, and colour. We can use BoxView for decoration, rudimentary graphics, and interaction with the user through touch.
8. Button : When we click on a button, it responds and will perform a particular task in an application. In all the Xamarin.Forms button plays an important role. The button displays the short text string when it follows the command. Button can also display a bitmap image or a combination of text and image. To initiate the command user presses the button with a finger or with the mouse.=

3.3.4 Cell

The child element of Views is known as Cell. There are different type of cells available they are : Entry Cell,Switch Cell,Text Cell,Image cell.

4. What is MVVM Design Pattern :

MVVM stands for Model-View-ViewModel. MVVM stands as a separation of code into the domain-relevant data (the model) and the representation of the data (View) and, finally, the logic (called the business logic) of our program (ViewModel). The responsibility of ViewModel is visibility.

The Model-View-ViewModel (MVVM) pattern helps to separate the business and presentation logic of an application from its user interface. Maintaining a clean separation between the application logic and the UI helps to address the different issues and can make an application easier to test, maintain, and evolve. It can also improve the code re-use opportunity and allows the developers and UI designers to collaborate easily when we develop the respective parts of the app.

MVVM contains the three core components: The Model, the View, and the view model. Each serves different functionality.

Here we will show the different relationship between the three components:

4.1 Benefits of MVVM Pattern

Benefits of using the MVVM pattern are:

1. If there is an existing model implementation that encrypts current business logic, changing it can be difficult or risky.
2. In this scenario, the view model acts as an adapter for the model classes and enables us to avoid making any significant changes to the model code.
3. Developers can create visual models and unit tests for models without using Views. Unit tests for the view model can utilize the same functionality as used by the View.
4. The UI of the app can be redesigned without touching the code, provided that the View is implemented in XAML. Therefore, a new version of the View should work with the existing view model.
5. Designers and developers can work on their components independently and concurrently during the development process
6. Designers can focus on visualization, while developers can work on visual models and model components.

4.2 View

The View is responsible for defining the layout of the structure and the appearance of the screen. Each View is defined in XAML; it contains the limited code which doesn’t include the business logic. In some cases, code-behind might provide the UI logic, which implements the visual behavior, which is difficult to express in XAML, such as animation.

4.2 ViewModel

The view model implements the properties and commands to which the View can bind the data, and informs the View of any state to change through change notification events. The commands and properties of the view model define the functionality of the UI, but View determines how the functionality is displayed.

View Model is also responsible for coordinating the View’s interaction with any model classes which are required. View model might choose to expose the model classes directly to the View so that controls in the View can bind the data directly to them.

4.3 Model

Model classes are non-visual classes that encapsulate the app’s data. Therefore, the model can be thought of as representing the app’s domain model, which usually includes the data model along with business and validation logic.

4.4 Wrap UP

The Model-View-ViewModel(MVVM) pattern helps to separate the business and presentation logic of an application from its user interface (UI). Maintaining a clean separation between the application logic, and the UI which helps to address the numerous development issues and can make the application easier to test, maintain, and evolve. It can also improve the code re-use opportunity and allows the developer and UI designer to easily collaborate when we are developing their respective parts of the app.