52 Weeks of Xamarin: Week 1

This launches 52 Weeks of Xamarin, an opinionated series in which I will post (at least) one instructional blog post on Xamarin a week.  In this series I’ll be talking about Xamarin.Forms as well as “Xamarin-native” iOS and Android.  We will follow the caterpillar’s advice and start at the beginning, carry on to the end, and then stop (paraphrased).  Beginner material will quickly yield to more advanced problems and techniques.

An introduction to Xamarin.Forms.

When a technology takes off in popularity as Xamarin.Forms has, more and more articles are about advanced features, and the beginner has a hard time getting started.  Let’s rectify that.  What I’m about to show you is not for the feint of heart; I won’t be teaching this nice and easy, I’ll be teaching it nice and hard (with apologies to Ike and Tina Turner).  That is, I’ll be moving along quickly, and referring you to the documentation or my own courses and books where things might otherwise bog down.

Prerequisites:  We can’t start at scratch, so I assume you know some C# and some XAML.  If you don’t know the former, start there, preferably with my Pluralsight C# From Scratch, but any course or book will do.  If you don’t know XAML, again you can start with my course  or any other course on XAML for Xamarin (be careful, though, as the XAML used in Xamarin can be slightly different from the XAML used elsewhere.

To get started with Xamarin.Forms open either Visual Studio with the Xamarin plug-in or Xamarin Studio, either on Windows or on the Mac.  I’ll be using Xamarin on the Mac.  You can find out about obtaining Xamarin and Xamarin Studio here, which will also be your source for all sorts of useful information.

Xamarin.Forms is the quickest and by far the easiest way to get a program up and running on iOS and Android and Windows Phone (and arguably, Windows and OS X) there is.  Again, we’ll be focusing on iOS and Android, to keep things reasonably simple and because the half dozen of you who are using Windows Phone can generally adapt everything about Xamarin.Forms to your misbegotten platform, while it lasts.[1]

Your first Xamarin.Forms Program

Create a new solution, using the App->Blank Xamarin.Forms App templates.  Call it 52Navigation.  Take the defaults as you go through the set up wizard, making sure to use PCL and not “shared library.” When you are done you should have 4 projects: 52Navigation, 52Navigation.Droid, 52Navigation.iOS and 52Navigation.UITests.

Later in this series, we’ll look at creating UITests, and for that matter, Test Driven Development.  But not yet.  The programs we’re going to start out with are too trivial to need it and tests at this point would only be a distraction.

To get started, open 52Navigation.cs.  This is a Xamarin convention; the entry point of your application will be in a file named <solutionname>.cs.  You’ll find that in the App method there is some code designed to avoid having a blank page when you fire up your first use of the editor.  We want to get rid of it.  Cut code until your App() method looks like this:

public App() {
 MainPage =

After MainPage = we’re going to add code to point to our first page.  You have lots of options, but the one you’ll use 90% of the time is this:

 MainPage = new NavigationPage(new MainPage());

This says, essentially, “create a new instance of MainPage and place it within the Navigation framework (which makes it easy to navigate between pages)”.

Here’s what we’re going to build:

New Task

 

 

 

Buy Milk

 

 

 

 

 

The first page gathers a single task from the user, the second page displays it.  Easy peasy.

How Things Work Around Here

The way this series will work is that I’ll show you the code that goes with what we are trying to do, and I’ll explain some but not all of it.  Your job, if you choose to accept it, is to figure out what I haven’t explained.  There are a number of ways to do so:

  • On inspection
  • Try alternatives, play with the code
  • Look up at Xamarin.com or Google it

The more you work out how it works, the more you’ll internalize it.  I hate to take courses where they say “do this, now this, then this” and at the end it works but I have no idea how or why.

To create the first page, right click on the PCL project (52Navigation) and choose Add->New File.  From the New File dialog choose Forms and then Forms ContentPage XAML.  Be sure to choose the one with XAML.  Give it a name and it will create two files for you: fileName.xaml and fileName.xaml.cs  The latter is known as the “code behind” file.
In this project we’ll create two forms: MainPage.xaml and TaskReview.xaml.   The XAML for MainPage.xaml 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="Navigation.MainPage">
   <ContentPage.Content>
     <StackLayout
       Padding="25">
       <Label
         Text="Tasks"
         FontSize="18"
         TextColor="Blue" />
       <Entry
         x:Name="TaskEntry"
         Placeholder="Enter a new task" />
         <Button
           Text="Save"
           BackgroundColor="Green"
           TextColor="Yellow"
           Clicked="OnSaveClick" />
     </StackLayout>
   </ContentPage.Content>
 </ContentPage>

Note that all the code is between the ContentPage.Content elements.  This element can hold only one view (view?, we’ll come back to that in a minute).  We solve that problem by using a layout (layout?)  The layout we use is StackLayout, which allows you to stack one view on top of another.  In this case we have three views in the StackLayout: a label, an Entry and a Button.

Forms consist of Pages, Layouts and Views.  Each XAML file represents a page.  Each page can have one or more layout. Each layout can have one or more sub-layouts and one or more Views.  Views are widgets/controls like Button and Label.

Layouts can have attributes. Ours has the attribute Padding=“25”  Experiment with other values, or with leaving this out altogether.

The rest should be self explanatory except for the Placeholder in Entry.  This creates the gray text in the entry that goes away when you start typing.

Notice that the button has a Clicked event pointing to the OnSaveClick event handler.  You need to implement that handler for this to compile. You do so (for now) in the code-behind file.  In that page, add this method:

  public void OnSaveClick(object o, EventArgs e) {
     Navigation.PushAsync(new TaskReview(TaskEntry.Text));
 }[2]

The effect of this is to navigate to the page TaskReview (which we have not yet created) passing in the Text from the Entry field TaskEntry (see above for the Entry).

Let’s look at the XAML for the TaskReview page,

  <?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="Navigation.TaskReview">
    <ContentPage.Content>
     <StackLayout Padding="30">
       <Label x:Name="Message" />
     </StackLayout> 
    </ContentPage.Content>
 </ContentPage>

No explanation necessary here, but we do want to know how the value from MainPage gets put into the Label on this page. We saw that we passed the value into the constructor as a parameter.  Here’s the constructor receiving the parameter and assigning it to the Text field of the Label.

  public TaskReview(string message) {
     InitializeComponent();
     Message.Text = message;
 }
 

Hey! Presto! your first Xamarin.Forms application, and it is non-trivial since it covers StackLayout, a few views, navigation, XAML and code-behind.

====

[1] I won’t be using smiley faces to take the sting out of sarcasm or to reassure you that I”m kidding.  If my words won’t suffice than no emoji can do the job.

[2] You’ll notice that 99% of my code is uncommented.  Comments rust, code doesn’t.  If you have to explain what or why your are doing something than you have the wrong name for a member, property or method.

Share

About Jesse Liberty

Jesse Liberty is an independent consultant and programmer with three decades of experience writing and delivering software projects. He is the author of 2 dozen books and multiple Pluralsight courses, and has been 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 Xamarin Certified Mobile Developer and a Xamarin MVP, Microsoft MVP and Telerik MVP.
This entry was posted in Xamarin and tagged . Bookmark the permalink.

6 Responses to 52 Weeks of Xamarin: Week 1

  1. Serge says:

    Jesse,
    using Xamarin Studio Version 5.9.7 (build 22) on Windows

    1. when creating a new solution there is no iOS project being created (just f.y.i.)

    2. when trying to build solution this line –

    MainPage = new NavigationPage(new MainPage());

    gives me an error – ‘Xamarin.Forms.Application.MainPage’ is a ‘property’ but is used like ‘type’

    Any ideas?

  2. Hi Jesse, when I click on the link to get the complete solution, just get a 404 from DropBox. Also, after the first code example the font for all subsequent text looks like the code example (viewed in the Browser anyway).

  3. Atul Sirpal says:

    Hi Jesse,

    Thanks for this course and I am sure this will help me to learn new skill.

    I have one question related to xamarin Forms i.e. as a .net dev I like to try hands on xamarin but it is a paid product.Do you have idea so that I can at least start without any subscription?

    Thanks in advance!

  4. Tim M says:

    Correction:
    It should say:

    By the way the ContentPage.Content is redundant, since Content is the default attribute of ContentPage, though I will still carry on using it until XF has matured further.

    The markup was parsed out of my previous post….

  5. Tim M says:

    Thanks Jesse,

    Nice to see a short XF example covering several simple concepts at once, not just one.
    Most articles tend to assume the reader has no prior knowledge, which is fair enough, but for experienced developers your approach is much better IMO.

    By the way the is redundant, since Content is the default attribute of , though I will still carry on using it until XF has matured further.

    Thanks again, I look forward to your next article,

    Tim M
    MCP, MCAD.Net, MCSD.Net

Leave a Reply

Your email address will not be published.