Xamarin.Forms: from zero to hero – part 1

Xamarin.Forms: from zero to hero – part 1

Time to get my hands dirty, finally some programming!
Or is it? Just a little bit of theory for now.

Personally I always like to get some form of 101 before I start something. Today there is a nice little website that provides in that called YouTube. So before I actually got started I set out to find a good introduction video.

I quickly found the one you see below.

This video shows the basics of building a multi-platform app in Xamarin. The thing I noticed is that it actually didn’t learn me anything new! Except for maybe that I don’t drink enough water..
Not learning anything new sounds like it’s a bad thing, but actually I was really happy about it. The takeaway from this video was for me some specifics about Xamarin, i.e. the difference between the project templates, how to do platform specific thingies, but most of all that it just looks and works like all other code I have written so far.
Having that said; throughout my posts I will be using Visual Studio, so if you want to use Xamarin Studio you’ll possibly come across some VS-only stuff.

That’s awesome! Let’s get to it.

The situation

Because my employer was so kind to invest in me for all of this, I decided that the first app I would make was an app on behalf of the company, 4DotNet. Besides that it wouldn’t contain any rocket science, so it was a good starting point.

The idea was pretty simple, it would be a digital business card/light-weight version of the website. The first version would contain:

  • General description of what we do how and why we do it at all;
  • Overview of the employees and some details about them;
  • Contact information.

Later on we also might like to show blog posts, news items and add some juicy push notifications. But let’s KISS for now.

This first of two posts will mostly describe the general idea of the app and the structure of the project, etc. In the second post I will go into specifics of building the 4DotNet app and the struggles that came with it.

Ready, set, code!

One of the things I did learn from the video above was what project template to choose.

There is a Portable and a Shared version, which seem to do the same. After doing a little research I found out that there is, in fact, a difference, although you can achieve the same thing with both.

The most important difference is that with a shared project you can create platform specific code with the #if compiler directive, while using a portable project you can target specific platforms and you will be provided with the right implementation of an interface for the platform of your choosing. Much more elegant and less error prone.

Besides this, if you want to work with XAML you will be obligated to choose a portable project, else it just won’t work.

Project structure

After some automagic stuff going on in Visual Studio you have actually built your first multi-platform app, congrats!

But what to make of it? I will quickly guide you through the basics.

One solution to rule them all!

In the newly created solution you will find four projects. When you name your project ‘Hercules’, the projects will be named like so:

  • Hercules; the shared project, here you’ll be wanting to write your business logic, have your models, etc. Of course when your app grows it is probably a good idea to implement some design patterns, but for now this will do
  • Hercules.iOS; the iOS app, here you can do iOS specific stuff. The entry-point here would be Main.cs, although initialization actually happens in AppDelegate.cs
  • Hercules.Droid; same as above, but for Android. Entry-point here is MainActivity.cs
  • Hercules.WinPhone; guess what? Same as the two above, but for Windows Phone!

That wasn’t so hard now was it?

One of the things I quickly ran into was resources. And more specifically: how can I share resources?
After some (soul)searching I came to the conclusion that, although possible, you really don’t really want to share most of your resources. Most resources will be icons and/or images for toolbars or placeholders which are pretty platform specific and therefore will look silly when you view them on another platform.

This is my first project, so maybe I’ll change my mind. But for now this theory seems to work. In a later post I will explain more about how I go about resources.

To XAML, or not to XAML…

One of the perks of using Xamarin Forms is that you can use XAML to define your UI. Although there isn’t a visual designer (yet) I prefer to use XAML over code. There isn’t really a specific reason and because of the lack of a designer it doesn’t have any major advantages over defining your UI in code.
For me, however, I can relate more to the XAML way, that way I can somewhat see the structure of the application better than reading it from a bunch of class instantiations. Especially when you are going to nest stuff in other stuff, I can imagine a HTML/XML-like structure stays more readable.

As mentioned above, if you want to use XAML you have to use a portable project.

Out-of-the-box the UI is defined in code (in your shared project App.cs), like so:

public class App : Application
{
  public App ()
  {
    MainPage = new ContentPage {
      Content =  new Label
      {
        Text = "Hello, Forms !",
        VerticalOptions = LayoutOptions.CenterAndExpand,
        HorizontalOptions = LayoutOptions.CenterAndExpand,
      }
    };
  }
}

When you run this on your emulators (or devices) it will look like this:

Hello World Windows Phone Emulator
Hello World Windows Phone
Hello World Android Emulator
Hello World Android
Hello World iOS Emulator
Hello World iOS

 

Cool, but I highly doubt that anyone would use an app with only a centered label on it.. But hey, you created your first awesomeunicornrainbowmultiplatformXamarin-app™, which is nice.

Now for the XAML counterpart.

In Visual Studio, right-click the Hercules project and select Add > New Item. In the Add New Item dialog, select Visual C# > Code at the left, and Forms Xaml Page from the list. Give it a meaningful name like ‘Zeus’ and hit Add.

New XAML Page
New XAML Page

The page you’ve just created does exactly the same as the code above. Only now it looks like this:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Hercules.Zeus">
<Label Text="{Binding MainText}" VerticalOptions="Center" HorizontalOptions="Center" />

</ContentPage>

For your app to show the XAML page instead of the code generated page open up the App.cs from above and edit it to look like this;

public class App : Application
{
  public App ()
  {
    MainPage = new Zeus();
  }
}

If you run it now, you won’t see any difference on the outside, so whether you prefer XAML or code the outside world won’t care.

Laying it out there

The beauty of Xamarin.Forms is that you can create a unified layout for your app and Xamarin will translate it into the platform specific controls for you.

To start with there are a number of built-in pages and layouts that you can use out-of-the-box.

Pages

Xamarin.Forms Pages
Xamarin.Forms Pages

Above you can see the different kind of pages that you can have. If you are a mobile user, you’ll probably recognise a few popular apps in these.

For most apps these pages will be enough to build on, but of course you are free to revolutionise the app world and create your own.

To illustrate how Xamarin translates a page to the platform native look, see how the TabbedPage looks when ran on the different platforms.

Xamarin.Forms TabbedPage
Xamarin.Forms TabbedPage

Notice how Android and Windows Phone show their tabs on the top like you would expect them to look and iOS has the tabs on the bottom where they feel natural. Awesome, right?!

Layouts

In a page you can have a layout. Again, there are some standard layouts available but you can define your own at will. The defaults are underneath.

Xamarin.Forms Layouts
Xamarin.Forms Layouts

Most of them speak for itself, you’ll probably find yourself using the StackLayout and GridLayout the most and the ScrollView when you want things to scroll along.

But wait, there’s more!

Furthermore you have some views and cells, which are basically controls that you can use. For example a date picker, activity indicator and search bar amongst many more.

I think this is all the basics for now. In my next post I will describe in more detail and more importantly, more concrete how I’ve created my first published (thus finished and usable) multi-platform app and the troubles I ran into while doing so.

In the meanwhile these are some pretty good links to check out and gain some knowledge on the matter:

1 thought on “Xamarin.Forms: from zero to hero – part 1”

Comments are closed.