MVVM Light with Xamarin app development

The education of a man is never completed until he dies.” said by Robert Edward Lee which is very true for IT industry. After seven years of native mobile application development, I had to work on Xmarin, a hybrid application development using C#. Like MVC (Model – View – Controller) is famous in native iOS development, MVVM (Model – View – ViewModel) is common in .NET platform. They even have package manager call NuGet for this MVVM patterns. They have two patterns MVVM Light and MVVM Cross. For this post we are using MVVM Light. 

For those who have been with me for a long time know that the very first post when it comes to a new platform will be a simple application navigating from one view to another. That’s what we did in BlackBerry 10, Android with Java, Swift and Kotlin. And that’s what we are going to do today as well.

Since this is the very first post related to Xamarin, I will show you how to create the project and make it enable for using MVVM Light. I am using Visual Studio for MAC IDE (here onwards I refer it as VS) for this development.

First, tap on the “New Project…” button that you can see after loading the VS or from the menu, select File -> New Solution. Then you will be presented a window like below to choose a template for the project.

Choose a template for your new project.

Choose a template for your new project.

As you can see, I have selected Multiplatform because our intension is to implement both iOS and Android applications with in the single solution. I think I may have to write a separate post for the Android application related implementation because the post get lengthier. But the initial set up is common for both platform.

Clicking on the Next button and you will be directed to following view.

Configure your Blank Native App

Configure your Blank Native App

The speciality of above window is, you get a chance to select how you would like to share your common code for the two platforms. Then move forward with Next button.

Configure your new Blank Native App

Configure your new Blank Native App

There is nothing Xamarin special in above window. So we will finalize creating the project by clicking on Create button. Then you will be able to see three projects have been created inside the solution. That is for iOS, Android and shared code where you can share your common business logic among the two applications.

At this moment, you have completed creating a Xamarin project. Now is the time to introduce MVVM Light in to the application. As I mentioned you at the introduction part, they have created NuGet package for this pattern and what we need to do is include it to our project. Right click on the iOS project and add go to NuGet repository like in the below image.

Goto NuGet downloading view

Goto NuGet downloading view

Then you can search the MVVM Light package and among the filtered list, choose the NuGet package that I have highlighted in the below screenshot.

Select the MvvmLight NuGet

Select the MvvmLight NuGet

Once you click on the Add Package button, you will be presented with license acceptance window.

License Acceptance

License Acceptance

After Accepting this, the project will be configured with relevant NuGet packages as well as special folder ViewModel like in the following image.

Project structure, just after adding MVVMLight NuGet

Project structure, just after adding MVVMLight NuGet

This is the part where it is getting odd and not nice. What we have to do is move the ViewModel folder from iOS project to Shared project and change the namespace according to that. Now the solution structure should be like this.

Solution structure after moving ViewModel folder to shared project

Solution structure after moving ViewModel folder to shared project

Still not the time to build the project. We need to add the MVVMLight NuGet to Android project as well.

Adding MVVMLight libraries to Droid project

Adding MVVMLight libraries to Droid project

Here we will add MvvmLightLibs NuGet package, since we do not need the ViewModel folder create again.

AnujAroshA_10

Add MvvmLightLibs package to Droid project

After adding it, the structure of the Android project will be looks like below.

Android project structure after adding MvvmLightLibs

Android project structure after adding MvvmLightLibs

Yes, now is the time to build the project. You should be able to build it without any errors. Initially I thought of explaining iOS project with in this post. But the post has exceeded 700 words so far which I think is more than enough content to read and understand in one attempt. So, I will be explaining the code in a separate post. Until then, surf through the existing code and structure and try to play with it. Happy coding guys… 🙂

Advertisements

About AnujAroshA

Working as an Associate Technical Lead. Specialized in iOS application development. A simple person :)
This entry was posted in Android Examples, iOS, MVVM, Xamarin and tagged , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s