Xamarin.Forms MVVM Code Snippets

This post is part of Luis Matos' Xamarin Month initiative about Code Snippets. Click here to see the rest of amazing community contributions.

Model-View-ViewModel is considered the de facto pattern to develop clean software that separates application logic and UI.

One of the components is the View Model, which implements properties and commands that the view data binds to. Moreover, it serves the purpose of notifying the view of any changes in properties through notification events.

As such, the VM structure is similar through the different classes, and you can make use of code snippets that speed up its development.

So let's create a few that can help you! First of all, how can I create a code snippet?

• If you are using Visual Studio for Windows, take a look here.

• If you are using Visual Studio for Mac, you can check this guide instead.

In both cases, you focus your attention in the code and parameters. I'll use VS for Mac for this post. Other considerations:

• All snippets belong to the C# group.
• All snippets have a text/x-csharp Mime type.
• Description is optional in each snippet, but recommended.

First, we click on Visual Studio > Preferences > Text Editor > Code Snippets.

Click on the Add button in order to create our first snippet, basevm, which describes the BaseViewModel class that each of our View Model classes are going to inherit from. The template text, as well as the rest of settings are presented in the following image:

The code for this snippet is available here

This class requires a few namespaces, which are added in a second snippet, basevmns:

Code for this snippet is available here

Now, we can create three snippets for View Model classes: one for properties, another one for commands, and the final one is for the namespaces required for the commands to work.

The code snippet vmprop (for VM properties) is presented:

Code available here

Here you can see that we added variables, such as $type$, $myVar$, and $MyProperty$. They represent the elements that can be customized according to your needs. But you have to configure these parameters, take a look at the following pictures:

type (field and property data type)

myVar (Class field)

MyProperty (Class property)

Now, the code snippet vmcomm, which allows you to create a command, is shown:

Code for this snippet is available here

The variable $myCommand$ is configured as follows:

While $MyCommand$ is set like this:

Finally, the code snippet nsvm for the namespaces that the commands need at the top of any View Model class:

Code available here

After you create them in Visual Studio for Mac, you need to close the application and reopen it. This is mandatory, otherwise the snippets will not work.

How to use them in your project? You can create a BaseViewModel class, then delete namespaces and constructor...

Type basevmns...

Press TAB twice, and voilá. The namespaces will appear, as expected!

Complete the BaseViewModel, simply by calling the basevm snippet inside your class.

Press TAB twice. This should be the result:

Now, add an EmployeeViewModel class in your project (in the same folder where you put your BaseViewModel class). Delete namespaces (and constructor if you wish), then make use of the nsvm code snippet at the top of your class:

Press TAB twice. The expected output is presented:

Make your EmployeeViewModel class inherit from BaseViewModel and then use the vmprop snippet:

Press TAB twice and the full definition of a property appears:

You can edit the data type, field and property names and move through them by pressing TAB. After you are done with this, press ENTER to complete the definition of this property. Here you have an example:

You can see that you only edit the field name and all its entries within the snippet will be automatically updated. You can, of course, also reuse the vmprop snippet as many times as you need it, in order to add more properties in your View Model definition.

Let's now add a command. Firstly, use the vmcomm snippet right below the property:

After pressing TAB twice, you can start editing the name of the field and property Command name:

Press ENTER when you finish. This is an example:

Of course, you can reuse the vmcomm as many times as you need it as well.

As you can see, it is quite easy to create code snippets. The best part is that it allows you to be more productive since it lets you parameterize code structures that you replace later with specific variable names.

I hope this post was useful for you, in case you have any questions, just let me know in the comments section!

See you next time!
Luis