MVVM stands for Model View ViewModel it is a design pattern for UI applications. It has predominantly been used for XAML (eXtensible Application Markup Language) based frameworks such as WPF, Silverlight, UWP, Xamarin and now Avalonia.

In early UI applications the UI logic and the buisness logic of the application were easily mixed. This leads to code that is difficult to test and eventually become difficult to maintain. Making changes to UI code can break the application in other areas.

The MVVM pattern ensures seperation of concerns within a UI application to ensure testability and maintainability.

MVVM is no longer restricted to just .NET and XAML based applications and is starting to be adopted in various guises on other technologies.

MVVM separates the various aspects of the UI application into 3 layers as show below.

Model
The model layer represents buisness logic. This could be communicating with a cloud service, database or even just implementing some kind of algorithm or talking to hardware.

The model can talk to the ViewModel via events. Equally the ViewModel can pass data or call methods in the model layer.

ViewModel
The viewmodel can be thought of as an adaptor that sits between the View (UI) and the buissness logic. It can call methods or listen to events in the model to update its state. The viewmodel can update the UI by raising a special event called INotifyPropertyChanged this event is listened to by the View and when its fired the UI knows to checks for updates in the ViewModel and the update the display.

View
The View is a presentation layer that describes how to render the data in the ViewModel. It is loosely coupled to the ViewModel. The View uses DataBinding to display properties on the ViewModel and Commands to signal events back to the ViewModel.

Ok so we have learned a few terms here which may not be so clear if this is the first time you have come across them. I feel its best to learn through doing so lets get started with something practical.

In this tutorial we will build a very basic application that demonstrates each of these layers covering the following:

Updating the UI from the ViewModel using DataBinding

Updating the ViewModel from the UI using DataBinding

Calling code in the Model from the ViewModel causing updates in the UI

Events signaling change in the Model to update the ViewModel and as a result the UI

Start by creating a new Avalonia MVVM application and giving it a name of your choosing.

In this tutorial we will learn the following:

1. How to create a new Avalonia UI project using Avalon Studio.
2. How the basic Avalonia project is layed out
3. How to compile and run our project.

Prerequisites:

We assume you have already installed and are running Avalon Studio on your machine.

Begin by clicking on File -> New Solution.

This will bring up the project template screen.

Select C# from the list of languages on the left. The select the Avalonia NETCore MVVM App template from the list in the middle of the screen.

You can then change the name to something more suitable like `MyAvaloniaProject` then click OK.

It may take a few seconds for the project to be created and loaded, upon which you will see something like the following.

If you look to the right of the screen we have the solution explorer. This shows the structure and files within the solution.

The Avalonia UI template automatically creates several files and folders within the project. This constitutes a recommended layout for Avalonia UI projects.

The following folders exist:

• Assets
  This folder is intended to store images, icons and other media content for your application. Any file inside this folder will be embedded withing the compiled executable.
• Models
  This folder should contain all the code that forms the buisness logic of the application. That mean non-ui logic. We will go into this in more detail in upcoming tutorials.
• ViewModels
  This folder will contain all the ViewModel classes that describe all the UI logic of each view. There is usually a one to one relationship between the number of views and view models. Again we shall cover this topic in more details in upcoming tutorials.
• Views
  This folder will contain all the UI (Xaml) code that describes the various Windows, Pages and Controls that the UI consists of.

In the root of the project we have the following necessary files:

• App.xaml
  This file describes the global styles and resources of the application. Usually styles are not directly places in this file, but rather referenced from it.
• App.xaml.cs
  This is simply a C# class used to load the App.xaml code.
• MyAvaloniaProject.csproj
  This is the project file, it can be edited to add nuget packages, project references and more.
• nuget.config
  This is a file that tells nuget where it can download packages from other than the default nuget.org. Since Avalonia is still in BETA it will allow you access to Avalonias nightly builds incase you need them.
• Program.cs
  This contains the main entry point of the application.
• ViewLocator.cs
  This is a simple utility class which locates views based on the use of a paricular viewmodel. We will cover this in a future tutorial.

First thing to do is to view the UI in Avalon Studio’s XAML previewer. In order for this to work the project needs to have been built. To do this press the build button  or F6 on the keyboard.

You will then see the build status in the console at the bottom of the screen. Provided everything works you will see the following output.

Creating: 4 build nodes.

[MyAvaloniaProject] Node = 1
MyAvaloniaProject -> C:\Users\dan\AvalonStudio\Projects\MyAvaloniaProject\MyAvaloniaProject\bin\Debug\netcoreapp2.0\MyAvaloniaProject.dll
Build Successful – 00:00:03.120970

Now click on the MainWindow.xaml file to open the Xaml Editor.

The Xaml editor shows you the Xaml code at the bottom and the preview of how the Xaml will render at the top.

Now we can run the program under the debugger by pressing F5 on the keyboard or the Debug button 

We have now created a project compiled and run it. Here is a video that demonstrates the process.