About this series

This post begins a series in which I will introduce Xamarin.Forms, put it in context and then teach all you need to know to go from absolute beginner to intermediate/advanced Xamarin.Forms programmer.  I assume no prior mobile programming experience, though you will need to know C#.

This series is based on my new Pluralsight Course: Building Your First Mobile Application with Xamarin.Forms and Visual Studio 2017 

What Is Xamarin.Forms?

My guess is that if you are reading this you probably know, so I’ll be brief:

• Native Xamarin allows you to create native iOS and Android (and other) apps in C#, writing the User Interface individually for each platform
• Xamarin.Forms allows you to create native iOS and Android (and other) apps in C# with a shared User Interface.

With Xamarin.Forms you write to a common set of “controls” or “views” and these are translated to native controls when the program is created.  Xamarin.Forms applications are indistinguishable from native applications because, by the time they hit the phone, they are native apps.

How Do You Get and Set Up Xamarin.Forms?

By far the easiest way to get Xamarin.Forms is to install them with Visual Studio 2017 or with Visual Studio Mac.  The exact steps are available here.

XAML and Code

Like WPF and Silverlight, Xamarin.Forms UI is created using XAML.  XAML is a highly expressive markup language not unlike a cross between HTML and XML.  I won’t be teaching XAML here, but you’ll pick it up as we go (and I’ll explain it in detail as I use it).

By the way: XAML is pronounced Zamel (to rhyme with camel) and Xamarin is pronounced Zamarin (which doesn’t really rhyme with anything).

If you feel like you want or need an in-depth introduction to XAML you can find one here

While it is true that anything you can do in XAML you can do in C#, resist the temptation to use C# for your User Interface. XAML is much more expressive, and virtually every demo and documentation of Xamarin will use XAML.

Your First Project

You begin your first project in Visual Studio or Visual Studio Mac (from here on out, they’ll be referred to as VS Win and VS Mac respectively.  If I write just VS, then I’m referring to both)

Since these are moving targets, the images and templates may look a bit different from what you see on your own machine.

I’ll name my first project TestBlog1.

Setting up the project is slightly different on the two platforms:

Mac: Begin with File -> New Solution.  Under Multiplatform, select Blank Forms App and click Next.

Give your application a name and select Android and/or iOS.  Click Next and fill in the Project and Solution names, select a location and click Create

Windows: Begin with File -> New Project.  Under Multiplatform, select Cross Platform App (Xamarin) and click Next

Select Blank App and make sure the Xamarin.Forms radio button is selected and the Portable Class Library (PCL) button is selected.  Click OK

Three Projects

You should now have three projects:

• TestBlog1 – your Portable Class Library (PCL)
• TestBlog1.Droid – the Android specific library
• TestBlog1.iOS – the iOS specific library

Perhaps surprisingly, you won’t be touching the latter two (platform specific) projects at all, at least for the first set of blog posts.

Testing with iOS:

Here is where we’d like to run the application to see what we get out of the box, but we have a problem.  We need to run on a simulator or a phone.  Unfortunately, this is non-trivial

If you are building your application on a Mac and you want to see it on an iOS simulator, things are pretty easy.  Right click on the iOS project and choose Set As Startup Project.  Now, at the top of VS Mac, set the third drop down to the simulator you’d like to use.

If you are running on a Mac and want to use a provisioned iOS phone, just connect it to your development machine and it will show in the list with the simulators.

If you want to run the iOS simulator (or a phone) from the Windows machine you must have access to a Mac on your network (this is not true during development with the latest Xamarin.Forms on Windows).  If you are building on the Mac you must make a connection from your Windows box to your Mac as explained here.

Testing with Android

To test on Android, you’ll need an Android simulator or an Android Phone.  The phone is of course easier, but VS now includes an Android emulator that is quite good and amazingly fast (at least as compared with earlier emulators).  Instructions for setting up Android emulators can be found here.

Out of the Box

Once you have a simulator up and running, it is time to see what our new application does out of the box without us adding any code.  Visually, not much:

But it’s a start.

The First Page

The first page (TestBlog1Page.xaml) is created for you.  This is a XAML page that contains the user interface (simple as it is).  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"
    xmlns:local="clr-namespace:TestBlog1"
    x:Class="TestBlog1.TestBlog1Page">
      <Label
          Text="Welcome to Xamarin Forms!"
          VerticalOptions="Center"
          HorizontalOptions="Center" />
 </ContentPage>

There is a fair amount to discuss in this simple page.  First off, the page is enclosed in ContentPage elements.  The ContentPage designates a number of name spaces with the attribute xmlns= followed by the namespace in quotes.  It also designates the class that this XAML relates to (TEstBlog1.TestBlog1Page).  We’ll see that class in just a moment.

A ContentPage can only have one element within it.  Usually, that element is a layout element (such as a grid) which can, in turn, have as many elements as you like.  Here, however, we have just a Label.

Notice that even if you don’t know XAML this is pretty readable.  The Label is inside the Content page (hence the indentation) and it has three attributes:

• The Text (which will be displayed to the user)
• The Vertical Option – set to Center to center the text vertically
• The Horizontal Option – also set to center to center the text horizontally

In the next (and all subsequent) blog-post we’ll get rid of that label and replace it with a layout view so that we can have lots o’ elements on our page.

Code Behind

Before I wrap up, turn the little triangle next to TestBlog1Page.xaml to reveal TestBlog1Page.xaml.cs  This is the “code-behind” file.  Any time you create a XAML file you’ll get one of these for free.  As you’ll see in future blog-posts, we don’t use these a lot, but you can use them for all sorts of supporting code (we’ll be putting nearly all of that supporting code somewhere else once we get up to talking about MVVM).

Right now, if you look in the code-behind class, you’ll see a using statement for Xamarin.Forms (the essential library for working with… Xamarin.Forms).  You’ll also see a namespace (named after your project) and a class (TestBlog1Page) which derives from ContentPage.  If you go back and look at the XAML you’ll see that the namespace is in the ContentPage element.

Inside this class is a constructor which calls InitializeComponent.  That is the one bit of code we’ll always have in the code-behind.  It initializes the XAML, which we’ll discuss in detail in upcoming blog posts.

That’s more than enough for today, but stay tuned for a good bit more, as I expect to turn out these blog posts fairly regularly.

Part 2