I’m Back! With Xamarin.Forms Programming

It has been a few months since I’ve posted, and I hope you missed me as much as I missed you.  To re-launch this blog, I’ve decided to provide a series on Xamarin.Forms programming.  

If you prefer to learn by watching a video, check out this video course.

If you are new to Xamarin.Forms (and I’m assuming you are) then there is a lot to learn, but none of it is very difficult… ok some of it is, but not until you’re into very advanced topics.   The one thing you do need to know is C#. You don’t have to be an expert, but you do have to be comfortable with the language.

Layout: XAML or C#?

While you can create your layout in C#, the vast majority of the time you’ll do so with XAML.  XAML is a markup language, not unlike HTML but more powerful.  There are two ways to learn XAML: I can show you all of it at once, or I can show it to you as we go.  The latter is much easier to absorb and much less boring.

That said, to give you a flavor of XAML, see if you can figure out what this will look like on the page:

 <Label Text="hello" TextColor="Red" 
BackgroundColor="Aqua" Font="Large" 
FontAttributes="Bold"/>

See? Not so scary.  I’ll be sure to explain all the elements (e.g., Label) and their attributes (e.g., TextColor) as we go. 

You can create the same label in C#.  In fact, everything you can do in XAML you can do in C#, but typically you don’t.  Markup has a number of advantages.  It is declarative and thus much easier to read and to understand.  And it is terser, the same line as above would look like this in C#:

      public void CreateLabel()
      {
         Label label = new Label();
         label.Text = "Hello";
         label.FontSize = 
         Device.GetNamedSize( NamedSize.Large, typeof(Label) );
         label.TextColor = Color.Red;
         label.BackgroundColor = Color.Aqua;
         label.FontAttributes = FontAttributes.Bold;
      }

This difference is particularly obvious when you have many controls, perhaps in nested containers (we’ll discuss containers such as StackLayout and Grid as we go).

Note: Labels are used for displaying test.  TextColor and BackgroundColor are self-explanatory.   Font can be set to an enumerated constant (e.g., Large, Small, etc.) or to a font size (e.g, 14).  FontAttributes include Bold, Italic etc.

Model, View, View-Model

While just about every (successful) large project uses the Model, View, View-Model pattern (hereafter called MVVM), most tutorials don’t introduce it until late in the process.  Since it is fundamental to best practices, however, I’ll incorporate MVVM from the get go.

While MVVM is enormously popular, there is not 100% agreement in what it is or how to use it. 

We all agree that the View is the presentation layer and that it should have no business logic.  The view is responsible for displaying your application’s “pages,” and nothing else.

The ViewModel is always responsible for the business logic of your application.  It is here that such decisions as what page to go to next and which optional data to display are decided.

The Model, however, is somewhat more controversial.  There are some who believe that the Model should contain nothing but data.  Others say that the Model should contain data and the logic to manipulate that data.  For now, at least, we’ll restrict the Model to simple data, e.g., classes.  

You’ll see a lot more about MVVM as we go, especially once we get past the “toy” introductory programs.

Your first app

Let’s dive into the deep end.  Open Visual Studio and choose File->New Project.  Note: I’m using Visual Studio 2017 — if you are using an earlier version some of the menus and commands may be slightly different.

I don’t love step-by-step directions as it is too easy to do all the steps and have no idea what you just did.  That said, to get started, here are the steps to creating a very cool cross-platform app right out of the box:

  1. File -> New Project
  2. On the left side, choose Cross-Platform.  In the middle, choose Mobile App(Xamarin.Forms).  Give it a name (I named mine Xamarin101) and choose a location.  I highly recommend checking both check marks.  If you don’t know how to use Git, then I have to recommend my very short and very easy course.  Failing that, there are lots of tutorials on the web.  In any case, click OK
  3. Choose Master-Detail.  This will create a very nice starter app for you.  There is some advantage to starting with a Blank app, but I think this will be much more rewarding.
  4. Choose your platforms.  For iOS you’ll need to either be on a Mac or have a Mac on your network.  I will uncheck Windows.  Leave the .NET Standard radio button selected. Click OK
  5. Visual Studio will cook for a few seconds and open a brand new app, just for you.

How to View Your App

You would think this would be the easy part.  The problem is that Android emulators are notoriously slow, and iOS requires access to a Mac.  If you are going to use Android you have three reasonable choices: use an actual device, use one of the built-in emulators (they’ve gotten much better) or use a third party emulator like  Genymotion.  

Once your device or emulator is set up, go to the top of Visual Studio and choose Debug, Any CPU (or iPhone or iPhoneSimulator), Android or iOS and then click on the name of y our phone or emulator…

Your app should be built and displayed pretty quickly.  (OK, maybe not so quickly, depending on how much memory and how many core you have in your machine and which emulator you are using.  While we wait, let me say that if you are serious about programming, buy as much RAM as you can, then buy two monitors: the best you can afford).

Yowza!

Once it comes up, you should see a pretty impressive little app, considering that you haven’t written a line of code.  (If it doesn’t come up, try going to the Build menu and choosing Cancel, and then start the app again). 

Notice that you have a hamburger menu, and that when you click on a todo item, it brings you to details.  You can also add your own todo items.  Pretty nice.  

Next Steps

I’ll be writing more (much more) in coming weeks, but nothing says you can’t explore the app you just created.  Notice that the folders have already been set up for MVVM (the pattern is so ubiquitous and useful that Microsoft/Xamarin just defaults to using it).  Explore the Views and see what you can suss out about Xaml.   Explore the View Models and try to get a sense of what is happening.  It isn’t obvious so don’t break your head on it.  Everything will be explained, in detail, in time.

 

About Jesse Liberty

Jesse Liberty has three decades of experience writing and delivering software projects and is the author of 2 dozen books and a couple dozen online courses. His latest book, Building APIs with .NET will be released early in 2025. Liberty is a Senior SW Engineer for CNH and he was a Senior Technical Evangelist for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS. He is a Microsoft MVP.
This entry was posted in Essentials, MVVM, Programming, Xamarin, XAML. Bookmark the permalink.