How to Build a Freaking Xamarin Forms App

Take this complete guide to Xamarin.Forms and learn to create a full Xamarin.Forms app that uses XAML to define the interface, that uses the NavigationPage to navigate between pages, that implements local databases with SQLite, that uses ListView and DataBinding to list elements from the database, that creates a ToolbarItem, and that is tested directly from Visual Studio 2017 into an Android and an iOS simulator.

Customizing iOS Navigation Bar and Tab Bar colors

Customizing the look and feel of an application is very important when communicating your brand's personality inside the software with which your users interact, it gives the application an identity, it can convey feelings, and most importantly, it gets designers off our backs after they so persistently insisted we implement the design they poured so much effort into creating.

All joking aside, it is an important step that many developers find to have low priority, but can have a huge impact on the user experience that can define whether a user returns to the app or not. In this post then, I will show you the steps that are necessary for you to customize the NavigationBar and TabBar colors on your iOS application.

Large Titles on iOS with Xamarin Forms

This is going to be a very quick and straight forward post, but a very useful one I believe. When searching the web for how to implement the new large titles that were introduced with iOS 11 last year when using Xamarin Forms, I found a few different ways how this is supposed to work, only one eventually worked for me.

In the last few posts, I've been introducing the usage of certain interfaces that help use the MVVM pattern in Xamarin Forms applications. You can even find all that code and identify what I did in each post by switching branches in this repository.

In this post, I'll be talking about the ObservableCollection<T>, which isn't an interface, but does implement the INotifyCollectionChanged interface, which behaves similarly to the INotifyProeprtyChanged interface, and helps integrate notifications for when elements are added, deleted or updated within a collection.

Xamarin Forms MVVM - IValueConverter

In the previous posts, I have been creating a "calculator" using the MVVM architectural pattern, explaining the ICommand and INotifyPropertyChanged interfaces. I suggest you fork the code from this repository and take a look at the branches so you know what we added in each of those posts, or better yet, read through those posts before continuing with this one.

Because in this post we will take a look at the IValueConverter interface, and how it is a key interface that you can use when you have some information on the Model that has to be presented differently in the View. Say a DateTime that instead of displaying "2018-03-21T15:04:30.0000000-06:00" has to be displayed as "two days ago".

I will implement a very easy example that I hope will make it clear how you can use the interface.

Xamarin Forms MVVM - ICommand

In the previous post, we talked about the INotifyPropertyChanged, and I gave a small introduction about the MVVM architectural pattern, and how it will allow you to structure your code in a way that will make it easy to maintain, easy to scale and easy to reuse.

This post will be about the ICommand interface. If you have created Xamarin Forms applications before, this interface will help you replace all the event handlers you have in the code behind for button clicks (and other events) for code that you can now move over to your ViewModel.

Xamarin Forms MVVM - INotifyPropertyChanged

The MVVM architectural pattern is widely used by a lot of XAML developers, which means that it is not only used by Xamarin developers but also by Windows, WPF, and other developers. This pattern guides the developer throughout structuring her code in a way that will make it much easier to maintain, scale, and reuse.

It is this last benefit the one that is most important, at least in early stages of development, to Xamarin developers, since that is what Xamarin is all about, let's then dive deep into how this pattern is used on a Xamarin Forms application, starting in this post with the INotifyPropertyChanged interface, one of the interfaces that will be of great use as we implement the MVVM architectural pattern.

Xamarin Forms Maps - Android

If your application is going to have a big focus on Maps, and a lot of its functionality relies on displaying information inside them, I would recommend using Xamarin native to build that app, however, if you only need to use map slightly, to display some information here and there, but the main functionality of your app is something else, and pixel-perfect accuracy for the maps is not vital, there is a way of how to use Maps on a Xamarin Forms app.

In this post, I will focus on getting the maps ready on iOS, but keep in mind that the code used to display this will work on both iOS and Android (it's just that preparing the Android project to display maps will be covered later).

Xamarin Forms Maps - iOS

If your application is going to have a big focus on Maps, and a lot of its functionality relies on displaying information inside them, I would recommend using Xamarin native to build that app, however, if you only need to use map slightly, to display some information here and there, but the main functionality of your app is something else, and pixel-perfect accuracy for the maps is not vital, there is a way of how to use Maps on a Xamarin Forms app.

In this post, I will focus on getting the maps ready on iOS, but keep in mind that the code used to display this will work on both iOS and Android (it's just that preparing the Android project to display maps will be covered later).

Interacting with a ListView in Xamarin Forms

ListView interactions are an important part of the user experience on any application. As often as it is necessary for our applications to list items inside of a list, it is necessary for the user to interact with them.

In my previous post, I built a Notes application that allowed users to create new notes, assign a title and some content, and save these notes inside an SQLite database. Once saved in the database, there was a Page that read all these items and listed them inside a ListView, but there is no real interaction with the list.

In this post I will focus on 3 interactions you can add to your ListViews:

  1. Pull to refresh (reading from the table)
  2. Context actions (deleting an element)
  3. Taps (showing a details page)

Local Databases in Xamarin Forms with SQLite

I don't need to argue that databases are of great importance in almost any kind of application, so in this post, I will cover the usage of local SQLite databases inside a Xamarin Forms app.

Specifically, we will be creating a simple notes app, with a couple of views: one where the user will see the list of notes and another one for creating/editing a note. While I will briefly explain the code that I use to define the interface, I will focus on the SQLite functionality itself, not really talking about the event handlers and the definition of elements inside the XAML file. If you are not familiar with XAML maybe check one of my previous posts first.

I do want to specify that I created this project using a .NET Standard library as a code sharing strategy and that I will cover Android, iOS and UWP implementation. If you are using Visual Studio for Mac, UWP won't be an option, and maybe your code sharing strategy will be PCL instead of .NET Standard, but the implementation is identical, except for the folder where you need to reference the SQLite packages.

How to design efficiently on Xamarin Forms - Implicit Styles

Using XAML Styles is probably one of the best things you can do when developing XAML applications, especially as they grow and you have more and more pages that you need to maintain, and they need to keep the same looks. This is true of course for Xamarin Forms applications as well, even when this UIs are going to be shared across Android, iOS and sometimes even Windows.

This post is about implementing implicit styles, those that are automatically applied to the entirety of the definitions from one type.

Xamarin Forms - Selecting an Image from the Gallery

Selecting an image from the gallery, or taking a picture with the device's camera is something that is very often used in mobile applications, and of course, your Xamarin Forms apps are often going to require this functionality, so this post will guide you through the steps necessary to implement this on a Xamarin Forms application for both Android and iOS.

Custom Vision API - Identifying Melanoma with Xamarin

Microsoft has a very interesting set of tools under the Cognitive Services brand, all in the areas of Artificial Intelligence and Machine Learning, one that has particularly caught my eye is the Custom Vision API. This tool allows you to "easily customize your own state-of-the-art computer vision models that fit perfectly with your unique data case. Just bring a few examples of labeled images and let Custom Vision do the hard work".

This sounds like a promising, easy to implement service, and it really is, but either way, this post will guide you through the steps necessary to get your own Xamarin app connected to your own Custom Vision API.