MVVM (Model-View-ViewModel) Pattern with Xamarin.Forms

The MVVM (Model-View-ViewModel) pattern lends itself naturally to XAML application platforms such as Xamarin.Forms. This is because the MVVM pattern leverages some of the specific capabilities of Xamarin.Forms, such as data binding, commands, and behaviors. MVVM is similar to many other patterns that separate the responsibility for the appearance and layout of the UI from the responsibility for the presentation logic; for example, if you're familiar with the Model-View-Controller (MVC) pattern, you'll find that MVVM has many similar concepts.

MVVM Pattern

Motivation for the MVVM Pattern

Development technologies like Xamarin.Forms provide a default experience that leads a developer down the path of dragging controls from a toolbox to a design surface, then writing code in the form's code-behind file. As such applications grow in size and scope and are modified, complex maintenance issues begin to arise. These issues include the tight coupling between the UI controls and the business logic, which increases the cost of making UI modifications, and the difficulty of unit testing such code.

The main motivations for implementing an application using the MVVM pattern are that:

  1. It provides separation of concerns. Tightly coupled, change resistant, brittle code causes all sorts of long-term maintenance issues that ultimately result in poor customer satisfaction with the delivered software. A clean separation between application logic and the UI will make an application easier to test, maintain, and evolve. It improves code re-use opportunities and enables the developer-designer workflow.
  2. It is a natural pattern for XAML platforms. The key enablers of the MVVM pattern are the rich data binding stack of the Xamarin.Forms platform, and dependency properties. The combination of these provides the means to connect a UI to a view model.
  3. It enables a developer-designer workflow. When the UI XAML is not tightly coupled to the code-behind, it is easy for designers to exercise the freedom they need to be creative and make a good product.
  4. It increases application testability. Moving the UI logic to a separate class that can be instantiated independently of a UI technology makes unit testing much easier.

The MVVM Pattern

The Model-View-ViewModel pattern can be used on all XAML platforms. Its intent is to provide a clean separation of concerns between the user interface controls and their logic.

There are three core components in the MVVM pattern: the model, the view, and the view model. Each serves a distinct and separate role. The following illustration shows the relationships between the three components.

The components are decoupled from each other, thus enabling:

  • Components to be swapped
  • Internal implementation to be changed without affecting the others
  • Components to be worked on independently
  • Isolated unit testing

In addition to understanding the responsibilities of the three components, it's also important to understand how the components interact with each other. At the highest level, the view "knows about" the view model, and the view model "knows about" the model, but the model is unaware of the view model, and the view model is unaware of the view.

The view model isolates the view from the model classes and allows the model to evolve independently of the view.


The view is responsible for defining the structure, layout, and appearance of what the user sees on the screen. Ideally, the view is defined purely with XAML, with a limited code-behind that does not contain business logic.

In a Windows Phone application, a view is typically a page in the application. In addition, a view could be a sub-component of a parent view, or a DataTemplate for an object in an ItemsControl.

A view can have its own view model, or it can inherit its parent's view model. A view gets data from its view model through bindings, or invoking methods on the view model. At run time, the view changes when UI controls respond to view model properties raising change notification events.

There are several options for executing code on the view model in response to interactions on the view, such as a button click or item selection. If the control is a Command Source, the control’s Command property can be data-bound to an ICommand property on the view model. When the control’s command is invoked, the code in the view model will be executed. In addition to commands, behaviors can be attached to an object in the view and can listen for either a command to be invoked or event to be raised. In response, the behavior can then invoke an ICommand on the view model or a method on the view model.


The model in MVVM is an implementation of the application's domain model that includes a data model along with business and validation logic. Examples of model objects include repositories, business objects, data transfer objects (DTOs), Plain Old CLR Objects (POCOs), and generated entity and proxy objects.

View Model

The view model acts as an intermediary between the view and the model, and is responsible for handling the view logic. Typically, the view model interacts with the model by invoking methods in the model classes. The view model then provides data from the model in a form that the view can easily use. The view model retrieves data from the model and then makes the data available to the view, and may reformat the data in some way that makes it simpler for the view to handle. The view model also provides implementations of commands that a user of the application initiates in the view. For example, when a user clicks a button in the UI, that action can trigger a command in the view model. The view model may also be responsible for defining logical state changes that affect some aspect of the display in the view, such as an indication that some operation is pending.

In order for the view model to participate in two-way data binding with the view, its properties must raise the PropertyChanged event.

View models satisfy this requirement by implementing the INotifyPropertyChanged interface and raising the PropertyChanged event when a property is changed. Listeners can respond appropriately to the property changes when they occur.

For collections, the view-friendly System.Collections.ObjectModel.ObservableCollection<T> is provided. This collection implements collection changed notification, relieving the developer from having to implement the INotifyCollectionChanged interface on collections.

Connecting View Models to Views

MVVM leverages the data-binding capabilities in Silverlight to manage the link between the view and view model, along with behaviors and event triggers. These capabilities limit the need to place business logic in the view's code-behind.

There are many approaches to connecting a view model to a view, including direct relations and container-based approaches. However, all share the same aim, which is for the view to have a view model assigned to its DataContext property.

Views can be connected to view models in a code-behind file, or in the view itself.


A view can have code in the code-behind file that results in the view model being assigned as its DataContext property. This could be as simple as a view instantiating a new view model and assigning it to its DataContext, or injecting a view model into a view using an inversion-of-control container.

However, connecting a view model to a view in a code-behind file is discouraged as it can cause problems for designers in both Visual Studio and Microsoft Expression Blend® design software.


If a view model does not have any constructor arguments, the view model can be instantiated in the view as the view’s DataContext. A common approach to doing this is to use a view model locator. This is a resource which exposes the application’s view models as properties that individual views can data bind to. This approach means that the application has a single class that is responsible for connecting view models to views. In addition, it still leaves developers free to choose to manually perform the connection within the view model locator, or by using a dependency injection container.

The Benefits of MVVM

MVVM enables a great developer-designer workflow, providing these benefits:

  • During the development process, developers and designers can work more independently and concurrently on their components. The designers can concentrate on the view, and if they are using Expression Blend, they can easily generate sample data to work with, while the developers can work on the view model and model components.
  • The developers can create unit tests for the view model and the model without using the view. The unit tests for the view model can exercise exactly the same functionality as used by the view.
  • It is easy to redesign the UI of the application without touching the code because the view is implemented entirely in XAML. A new version of the view should work with the existing view model.
  • If there is an existing implementation of the model that encapsulates existing business logic, it may be difficult or risky to change. In this scenario, the view model acts as an adapter for the model classes and enables you to avoid making any major changes to the model code.

Take a look at the class diagrams of our sample MVVM Xamarin.Forms application

Let's install the MMVM Light Toolkit. From the Visual Studio menu, select Tools, Extensions and Updates... Select Online and enter mvvm light in the search edit control.

Press the "Install" button.

Select the "Restart Now" button to restart Visual Studio.

To create a new application, click on File, New, Project...

Select the Visual C#, Cross-Platform, Blank Xaml App (Xamarin.Forms Portable) template.

Select the Targget and Minimum UWP SDK Version. Press the OK button.

Right click on the Solution and select "Manage NuGet Packages fpr Solution..."

Select the Updates tab. From the list of NuGet packages select Xamari.Forms and Microsoft.NETCoreWindowsUniversalPlatform and press "Update" button. 

Select "OK" button.

Select the "I Accept" button.

Press the "Restart" button.

Right click on the Solution and select "Manage NuGet Packages fpr Solution..."

Select the Browse tab. Type in mmvmlight in the search edit control. Select MvvmLightLibs and click on the Project check box. Press the "Install" buton.

Press the "OK" button.

Select the "I Accept" button.

Add a new Folder

Right click on the folder and select Add and New Item...

Select C#, Cross-Platform and Forms Xaml Page. Enter DetailPage.xaml for the Name.

Right click on the folder and select Add and New Item...

Select Visual C#, Code and Class. Enter Person.cs for the Name.

Select Visual C#, Code and Class. Enter Locator.cs for the Name.

Select Visual C#, Code and Class. Enter DetailViewModel.cs for the Name.

Select Visual C#, Code and Class. Enter MainViewModel.cs for the Name.

Select Visual C#, Code and Interface. Enter IPersonService.cs for the Name.

Select Visual C#, Code and Class. Enter PersonServiceStub.cs for the Name.

Select Visual C#, Code and Class. Enter NameGenerator.cs for the Name.

The source code is located on my GitHub site (wpbest/XamarinFormsMVVM):

No Comments

Add a Comment

As it will appear on the website

Not displayed

Your website