Xamarin.Forms MVVM Code Snippets
Tags: mvvm, xamarin
Published: 2020-06-13 18:11:27

---
title: Xamarin.Forms MVVM Code Snippets
published: true
description: This blog post can help you to quickly implement an MVVM class in Xamarin.Forms
tags: mvvm, xamarin
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/y2qtris07ewh5fjmbjts.png
---

_This post is part of Luis Matos' Xamarin Month initiative about Code Snippets. Click [here](https://luismts.com/code-snippetss-xamarin-month/) to see the rest of amazing community contributions._

**[Model-View-ViewModel](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/enterprise-application-patterns/mvvm)** 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](https://docs.microsoft.com/en-us/visualstudio/ide/walkthrough-creating-a-code-snippet?view=vs-2019).

* If you are using Visual Studio for Mac, you can check [this guide](https://docs.microsoft.com/en-us/visualstudio/mac/snippets?view=vsmac-2019) 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.

![_](https://dev-to-uploads.s3.amazonaws.com/i/5eivnz0j185jyo2x0qfb.png)

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:

![basevm](https://dev-to-uploads.s3.amazonaws.com/i/k268fhfmr4twnj8he36x.png)
_The code for this snippet is available [here](https://gist.github.com/icebeam7/7a9f6865169027b09b5e0cc12c151950)_

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

![basevmns](https://dev-to-uploads.s3.amazonaws.com/i/gc08wowq0qigo3cb0ixu.png)
_Code for this snippet is available [here](https://gist.github.com/icebeam7/e3c9e3386345e2fd063996454c48c411)_

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: 

![vmprop](https://dev-to-uploads.s3.amazonaws.com/i/56w69ppdo15835xvd4wm.png)
_Code available [here](https://gist.github.com/icebeam7/36515e1522b16ffdc9eae99d8c924c1b)_

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)
![type](https://dev-to-uploads.s3.amazonaws.com/i/wacfksgqn3ukql5ya4sp.png)

myVar (Class field)
![myVar](https://dev-to-uploads.s3.amazonaws.com/i/5a4dc0m29e379o3skpzv.png)

MyProperty (Class property)
![MyProperty](https://dev-to-uploads.s3.amazonaws.com/i/8l3hb48ys29aw2vforbm.png)

Now, the code snippet **vmcomm**, which allows you to create a  command, is shown:
![vmcomm](https://dev-to-uploads.s3.amazonaws.com/i/ubmtg2pcazmq8ypgjf0d.png)
_Code for this snippet is available [here](https://gist.github.com/icebeam7/fc86f9918d217f44c7eaad346f247c5c)_

The variable $myCommand$ is configured as follows:
![myCommand](https://dev-to-uploads.s3.amazonaws.com/i/9mqjjyy8xpuzca73w4fk.png)

While $MyCommand$ is set like this:
![MyCommand](https://dev-to-uploads.s3.amazonaws.com/i/bx5m3rnnmox4lfrf1fha.png)

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

![nsvm](https://dev-to-uploads.s3.amazonaws.com/i/q0i8ej4ksf0rssb35v68.png)
_Code available [here](https://gist.github.com/icebeam7/8615867c6081fceaf4c8192f58998992)_

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...
![empty class](https://dev-to-uploads.s3.amazonaws.com/i/694v1somp9s2s4cgqix5.png)

Type **basevmns**...
![basevmns](https://dev-to-uploads.s3.amazonaws.com/i/pvpp5lt9apugbjasx07t.png)

Press TAB twice, and *voilá*. The namespaces will appear, as expected!
![Base View Model namespaces](https://dev-to-uploads.s3.amazonaws.com/i/vyag2diaolcqn3an3j3l.png)

Complete the BaseViewModel, simply by calling the **basevm** snippet inside your class. 
![basevm](https://dev-to-uploads.s3.amazonaws.com/i/6vloslb2mvprko2usna8.png)

Press TAB twice. This should be the result:
![Base View Model code](https://dev-to-uploads.s3.amazonaws.com/i/hk6at8wq0c15onhw2x8d.png)

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:

![nsvm](https://dev-to-uploads.s3.amazonaws.com/i/svvmktl6duvvqdl6e5gb.png)

Press TAB twice. The expected output is presented:
![EmployeeViewModel namespaces](https://dev-to-uploads.s3.amazonaws.com/i/joij1gk2z7bdmjuni0xf.png)

Make your EmployeeViewModel class inherit from BaseViewModel and then use the **vmprop** snippet:
![vmprop](https://dev-to-uploads.s3.amazonaws.com/i/9vqab9b31oxzz4gj2gjk.png)

Press TAB twice and the full definition of a property appears:
![View Model Property](https://dev-to-uploads.s3.amazonaws.com/i/0e05f4h5td5ksifgcnct.png)

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:

![View Model Property Completed](https://dev-to-uploads.s3.amazonaws.com/i/iti55w87p4b5bc4lpdyv.png)

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:

![vmcomm](https://dev-to-uploads.s3.amazonaws.com/i/netkvvqhe5cky50w8wnj.png)

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

![View Model Command](https://dev-to-uploads.s3.amazonaws.com/i/bxfzdjn0nm8n9luqne6i.png)

Press ENTER when you finish. This is an example:
![View Model Command Completed](https://dev-to-uploads.s3.amazonaws.com/i/bm4nztxh4axo90bo1711.png)

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