How to Start Writing a Simple Xamarin App

Welcome to my blog! This entry is the first in a series detailing the process of developing a non-trivial Xamarin.Forms app from start to finish.

This series of blog posts assumes that you are familiar with at least the concepts of MVVM and Dependency Injection, that you know XAML and XAML bindings, how to create a Xamarin.Forms project and that you know how to install NuGet packages into that project.

I will be working with a blank Xamarin.Forms project, using a .NET Standard library for code sharing if you want to follow along. This is the new template that Visual Studio 2017 offers for Cross-Platform development – if you still see the old PCL approach you may have to upgrade Visual Studio to the latest version.

The first thing I do with a new project is to add the NuGet packages for MVVM and SQLite. I use MvvmLightLibsStd10 and sqlite-net-pcl (not to be confused with SQLite.Net-PCL!) MvvmLightLibsStd10 is for use in .NET Standard projects; if you’re using a PCL library, install MVVMLightLibs instead.

At this point I usually run my new application, just to make sure everything’s set up OK.

Next I add folders: a “Views”, a “ViewModels” and a “Models” folder to support my MVVM structure. I also delete MainPage.xaml and MainPage.xaml.cs. I want to keep all my pages in my views folder, and creating a new page there is quicker and easier than to change the namespace of an existing one. Plus, I really don’t like the name “MainPage” – I may decide later on that a different page should be the first to be presented to the user at startup, and then where would I be? I prefer my pages to have names that describe their purpose.

With all that reorganisation out of the way, let’s get cracking with the code. This series of articles is going to do – a todo list! Because that’s something that nobody has ever thought of before. Yay.

OK, yes, I know it’s been done to death, but it’s got two advantages. First, you’ve probably come across a very simple version of this kind of app in another tutorial. But more importantly, this is an app that can be expanded to be quite complex, and gives me the opportunity to show you not only some Xamarin.Forms code, but also how to code for maintainability and extensibility.

So, let’s start with the simplest possible scenario: a single-page app that displays a list of tasks, just to get something to look at. For this we’ll need a View, a Model and a ViewModel to bind them together.

Let’s start with the Model, which is really simple at this point. Just a property to hold the title of the ToDo item, a property to hold a more detailed description, and a property to hold the current state of the task.

I’ m using an enumerable rather than a Boolean to store the state. I can see that I may want more than two possible states in the future, so I’m allowing for that possibility. It’s not strictly speaking necessary, as SQLite is very forgiving with regards to types – a column is not locked to a datatype, like in SQL server – but I want to keep this consistent.

Next, the ViewModel. I’m going to keep this super simple for now – just a hardcoded list of ToDoItems. If this scares you, don’t worry. I’ll remove the hideousness of this in the next article…

Finally, the view – create a XAML Content Page and call it “OverviewPage”. On this page I want a list that displays todo items and whether or not they’re done. Unfortunately there is no pre-fab ListView cell that displays text and a checkbox, so for the sake of keeping this article at a reasonable length, I’m going to forget about the checkbox for now and use a plain TextCell:

And, of course, we need to make the OverviewPage the new start page when the App is instantiated.

So, a quick and dirty (but working) app. In dire need of improvement. Up next: creating a ViewModel that won’t make your boss head-slap you.

Leave a Reply

Your email address will not be published. Required fields are marked *