In the previous chapter, we explored how to go about creating a native Xamarin.Forms cross-platform application for both the iOS and Android platforms, and learned how to add new packages to your solution using the NuGet package manager. We also looked at how to go about adding and creating several ContentPages to your solution, as well as how to run and test your app within the simulator.

The Model-View-View Model (MVVM) architectural pattern was invented with the Extensible Application Markup Language (XAML) in mind that was created by Microsoft back in 2008 and is particularly well suited for use with the MVVM application architectural pattern, because it enforces a separation of the XAML user interface from the underlying data model through a class that will act as a connection between both the View and the Model. The View and the ViewModel can then be connected through data bindings that have been defined within the XAML file.

XAML has also been integrated into the Xamarin.Forms platform that allows for the creation of cross-platform, natively-based programming interfaces for iOS, Android, and Windows Phone mobile devices. This allows developers to define user interfaces using all the Xamarin.Forms views, layouts, and pages, as well as custom classes.

XAML enforces the separation between the application's user interface from the underlying data, through a class that will act as the communication layer between the View and the ViewModel, which are connected through data-bindings that are defined in either the XAML or underlying code file, along with the binding context for the View, that points to an instance of the ViewModel.

This chapter will begin by introducing you to the architecture behind the MVVM pattern architecture, and how you can implement these within your application, by adding new Views and the associated Models.

You'll learn how to create the underlying C# class files that will act as the ViewModels for our app, as well as updating the existing content pages to data-bind with the ViewModels to represent the information that will be displayed within the user-interface for our application.

This chapter will cover the following points:

Understanding the MVVM pattern architecture

In this section we will be taking a look at the MVVM pattern architecture and the communication between the components that make up the architecture.

The MVVM design pattern is designed to control the separation between the user interfaces (views), the ViewModels that contain the actual binding to the Model, and the models that contain the actual structure of the entities representing information stored on a database or from a web service.

The following screenshot shows the communication between each of the components contained within the MVVM design pattern architecture:

The MVVM design pattern is divided into three main areas, as you can see from the preceding screenshot, and these are explained in the following table:

MVVM type	Description
Model	The Model is basically a representation of business related entities used by an application, and is responsible for fetching data from either a database, or web service, and then de-serialized to the entities contained within the Model.
View	The View component of the MVVM model basically represents the actual screens that make up the application, along with any custom control components, and control elements, such as buttons, labels, and text fields. The views contained within the MVVM pattern are platform-specific and are dependent on the platform APIs that are used to render the information that is contained within the application's user interface.
ViewModel	The ViewModel essentially controls, and manipulates the views by acting as their main data context. The ViewModel contains a series of properties that are bound to the information contained within each Model. Those properties are then bound to each of the views to represent this information within the user interface. ViewModels can also contain command objects that provide action-based events that can trigger the execution of event methods that occur within the View. For example, when the user taps on a toolbar item, or a button. ViewModels generally implement the INotifyPropertyChanged and INotifyCollectionChanged interfaces. Such a class fires a PropertyChanged and INotifyCollectionChanged event whenever a collection has changed (such as, adding an item, removing an item, or when a change occurs to one of the items, properties) changes. The data binding mechanism in Xamarin.Forms attaches a handler to this PropertyChanged and CollectionChanged events so it can be notified when a property changes and keep the target updated with the new value.

Now that you have a good understanding of the components that are contained within MVVM design pattern architecture, we can begin to create our entity models and update our user interface files.

Note

In Xamarin.Forms, the term View is used to describe form controls, such as buttons and labels, and uses the term Page to describe the user interface or screen. Whereas, in MVVM, Views are used to describe the user interface, or screen.