There are primarily 3 patterns to choose when developing mobile applications. They are MVC, MVVM and MVP. For a detailed discussion about them check Xamarin application architecture.

The focus of this post will be around MVVM pattern. One of the earliest and most stable MVVM libraries for Xamarin has been the MVVM Cross library Like most libraries, this also followed a ViewModel-first approach. What this means, that the focus of the developer is always on the ViewModel and the data in the application. All transitions and animations are also data dependent, which means a user moves from one ViewModel to another and not from one screen to another. It’s quite a capable library but suffered from certain limitations, such as no preview in Android layouts due to embedded binding information in ‘.axml’ files, no header view for listviews etc. Also, to use this, developer requires native UI development experience as well. That being said, it is still quite a capable library and most applications can be written using this.

Xamarin forms, on the other hand, allows better preview of UI, even live updates (using live player). Most developers with and XAML experience and without any mobile experience can start writing mobile applications targeting Android, iOS and Windows. However, it is a UI-first approach, which means, the developer is concerned more about UI and data becomes secondary.

Below we will look at a way of ViewModel-first approach in Xamarin Forms, allowing developers with XAML experience to quickly start writing mobile apps. The complete application can be downloaded from here ViewModel-first xamarin forms sample

First is our BaseViewModel

ViewModel-first navigation

Next is our main contract for navigation within the application

The implementation of this contract will allow transition from one screen to another, by only providing the ViewModel’s type and optional parameter.

In the sample application, Autofac is being used for IoC. For more information check it out here.

For implementing the ViewModel-first approach, we will use an anti-pattern, that is Service Locator. It is labelled as such because of the complexity of resolving dependencies when the code base is quite large, and it only works well in simple scenarios. This is exactly the case with a View and it is ViewModel. In most applications, each view will only have one view model, and each view model only caters to one view. Thus, this pattern becomes a perfect candidate for this situation.

Service Container with IoC

Below is the code for AppContainer.cs, where we register all services. Note the mocked services used for Automation. For more discussion about Automation in Xamarin check out Enterprise testing in Xamarin.

The LoadViewModel method is utilised for locating view model for a view.

A BaseView class is created, which acts as the parent for all views inside the application and takes care of loading its view model as shown below. This is where we use Service locator pattern to load ViewModel for the view.

Implementation of ViewModel-first contract

Below is the NavigationService class that implements INavigationService contract.

UI transition using ViewModel

In the sample application, we have search screen and a result screen. Using above service, we can move from Search screen to the result screen using the code below.

Thus, using Service locator pattern, and an IoC type service container we are able to develop mobile applications in Xamarin Forms using the ViewModel-first approach.


Mobile, Uncategorized
, , ,

Join the conversation! 1 Comment

  1. […] allow .Net developers to use their existing XAML skills for developing mobile applications. Check Data-first approach in Xamarin out to use Xamarin Forms in data-first approach. However, this platform is still maturing and […]


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: