loading...
Cover image for Xamarin.Forms MVVM Code Snippets

Xamarin.Forms MVVM Code Snippets

icebeam7 profile image Luis Beltran ・5 min read

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:

basevm
The code for this snippet is available here

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

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:

vmprop
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)
type

myVar (Class field)
myVar

MyProperty (Class property)
MyProperty

Now, the code snippet vmcomm, which allows you to create a command, is shown:
vmcomm
Code for this snippet is available here

The variable $myCommand$ is configured as follows:
myCommand

While $MyCommand$ is set like this:
MyCommand

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

nsvm
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...
empty class

Type basevmns...
basevmns

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

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

Press TAB twice. This should be the result:
Base View Model code

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

Press TAB twice. The expected output is presented:
EmployeeViewModel namespaces

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

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

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

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

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

View Model Command

Press ENTER when you finish. This is an example:
View Model Command Completed

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

Discussion

markdown guide