Popularity of Xamarin technology keeps on growing, especially after purchasing platform by Microsoft, announced in February. Idea of “Write once, deploy anywhere mobile” is attractive not only to big corporations, which develop huge business applications, but also to startup world. Start-ups are fascinated by possibility of rapid prototyping and implementing changes without need of coordination between few mobile teams.

To develop app on Android, iOS and Windows Phone nowadays, it’s enough to know one programming language: C#. I’ll give you advice, how to create mobile app quickly by using popular MVVM Light framework, known in .NET environment for its simplicity and testing with ease. To start work, you will need Apple computer, with Xamarin Studio or Windows PC with Visual Studio environment and libraries, which you can download from xamarin.com. You can find whole code from this tutorial on my GitHub. Let’s start by creating new project. Choose Xamarin.Forms App to share 99% app code – it’s perfect for start!

Beginning

After creating it, you will see three projects – .Droid, .IOS and shared package, in which we’ll be creating most of our code. IOS and Droid projects contain code specific for platform. It’s a place, where we’ll adapt app interface to system standards – because we want final user to be delighted by graphic layout. Our goal is to create TODO app, which will display our tasks to do. We’ll start by adding basic dependencies Click Package directory by choosing Add Package option. Select MvvmLight and MvvmLightLibs from NuGet projects. ViewModel directory has been created automatically. We can start developing add by creating view: choosing menu New > Forms > Forms ContentPage Xaml will create view class with connected/related XAML interface declaration, known from WPF.

TODO app

Our goal is to create TODO app, which will display our tasks to do list. We’ll start by adding basic dependencies Click Package directory by choosing Add Package option. Select MvvmLight and MvvmLightLibs from NuGet projects. ViewModel directory has been created automatically. We can start developing by creating view: choosing menu New > Forms > ContentPage.xaml will create view class with related XAML user interface declaration, known from WPF.

Lets prepare our model:

Now we have to create our exemplary ViewModel.

And to modify ViewModelLocator object.

To match all elements together, let’s modify starting code.

Now we can start our App by clicking on “Set as Start Project” on Droid or IOS project. System will run device simulator. App uses Binding mechanism – data shared by ViewModel is being displayed by view. In our solution, ViewModel doesn’t know about view, doesn’t have complicated dependencies and testing is very easy. We receive information about user actions thanks to Command interface.

Fresh software development tips delivered straight to your inbox

Subscribe to our monthly newsletter with useful information about building valuable software products.
Don't worry, we value your privacy and won't spam you with any bussines enquiries!

bartosz_kraszewski

Software Developer

Software Engineer specialised in Mobile Applications development. Focused on code quality and standards, experienced working in fast paced, product-oriented environment - Silicon Valley startups.

Co-founder of Mobile Bialystok - local mobile technology enthusiasts group. Also an amateur squash player.