Meet Xamarin.Forms: 3 Native UIs, 1 Shared Code Base

Avatar

James

Building out your user interface for each platform has always ensured beautiful native experience on each platform, while a common set of class libraries has enabled developers to generally share more than half their code base across platforms. But if there is one thing developers love, it is finding ways to write less code. So, it should perhaps come as no surprise that Xamarin.Forms has generated a lot of buzz in the mobile developer community. We are even running a Xamarin.Forms contest where you can win a ticket to our Evolve 2014 conference.

Xamarin.Forms is our new library that enables you to share even more code by letting you build native UIs for iOS, Android and Windows Phone from a single, shared C# codebase, while still maintaining access to all of the native APIs on each platform. This means that if there is something you want to do on a specific device or OS, you can do it.

Xamarin Forms Shared Code

The Xamarin.Forms Library

To get started with Xamarin.Forms, you can easily create a brand new cross platform Xamarin.Forms project directly from Visual Studio or Xamarin Studio, or add it to your existing project by adding the library from NuGet. Xamarin.Forms is included in your Xamarin subscription. For a closer look of Xamarin.Forms be sure to register for our Xamarin.Forms webinar on June, 10th 2014 8AM PDT.

New Xamarin.Forms Project

Getting Started

Xamarin.Forms provides over 40 pages, layouts, and controls out of the box, while still enabling you to mix-and-match and extend with native controls. Let’s take a look at what all is included in Xamarin.Forms and then dive into how we can start using it an our mobile apps.

Pages, Layouts, and Controls

The base of each screen of your application is a Page, and Xamarin.Forms offers 5 different pages – including the most basic ContentPage to more complex pages such as MasterDetailPage and TabbedPage. Each Page is mapped to the native page on the platform, which means that if you are using a TabbedPage the tabs will be on the bottom for iOS, top for Android, and use a Pivot control on Windows Phone.

Xamarin.Forms Pages

Once you have selected the base Page that you want to use, you’ll want to figure out how to organize your content on the page. This is where Layouts come into play and there are plenty of options.

Xamarin.Forms Layouts

Easily stack your controls vertically or horizontally in a StackLayout, get pin point precision with an AbsoluteLayout, or leverage the power of a GridLayout. Possibilities are endless with the ability to mix and combine different layouts. There are a lot of controls available to use in your forms, such as Labels, ListViews, Buttons, so be sure to browse all of the controls in our gallery.

Let’s build an app

NewProjectMonkeysXamarin.Forms takes the tedium out of building simple pages over and over again on multiple platforms. Let’s build out a common Master-Detail flow in an application. Our application will display a list of different monkeys, and when our user select one of them it will have detailed information.

We are going to add a very simple data model to display:

public class Monkey {
  public string Name {get;set;}
  public string Location { get; set; }
  public string Details { get; set; }
}

Before we setup our user interface, we will create a helper class that we can use to get a list of Monkeys from. We will just create the list in our code behind, but we could go to our a web server or local database to get this information in the future.

public class MonkeysViewModel {
  public ObservableCollection<Monkey> Monkeys { get; set; }

  public MonkeysViewModel ()
  {
    Monkeys = new ObservableCollection<Monkey> ();
    Monkeys.Add (new Monkey {
     Name = "Baboon",
     Location = "Africa & Asia",
     Details = "Baboons are African and Arabian Old World monkeys belonging to the genus Papio, part of the subfamily Cercopithecinae."
    });
    ...
  }
}

MonkeysPage

Now to create some cross platform user interface with our first page called MonkeyPage, which will derive from ContentPage. Once the page is up we will need to tell it what to display. We are going to set the title to “Monkeys”, create a ListView to display our data and then tell the page that we want the ListView to fill the entire page by setting it to the Content of the page.

public class MonkeysPage : ContentPage {
  public MonkeysPage () {
    Title = "Monkeys";
    var list = new ListView ();
    Content = list;
  }
}

Now it is time time to get more advanced and tell the ListView what to display, how to display it, and what to do when our user selects a monkey.

Filling in the ListView

First, we will tell the ListView what to display by settings it’s ItemSource property. Since Monkeys is an ObservableCollection the ListView will automatically be notified when any items are added or removed.

var viewModel = new MonkeysViewModel ();
list.ItemsSource = viewModel.Monkeys;

Next, we need to tell the ListView how to display each monkey in the list. To do this we will create a DataTemplate for each item. Built in to Xamarin.Forms are a few default templates to choose from, and for this example we will use the TextCell which has a title and detail label to display information.

var cell = new DataTemplate (typeof (TextCell));
cell.SetBinding (TextCell.TextProperty, "Name");
cell.SetBinding (TextCell.DetailProperty, "Location");
list.ItemTemplate = cell;

The code above is using Xamarin.Forms’ built in data binding. You can see that we are telling the cell to “bind” the TextProperty to the property on the Monkey data object that is specified as “Name” and the DetailProperty is bound to “location”. This is a simple example of data binding, but you can see how extremely powerful it can be, as every page, layout, and control has bindable properties. Read more about data binding in the Xamarin.Forms documentation.

To get this new MonkeysPage to display, we are going to head back to App.cs and modify the default GetMainPage method, used in each client app to get the first page to display, to return a new MonkeysPage. Additionally, we are going to wrap this MonkeysPage in a new NavigationPage so that we will be able to take advantage of navigation later on.

public static Page GetMainPage () {
  var monkeys = new MonkeysPage ();
  return new NavigationPage (monkeys);
}

ListView With Monkeys Here is what our new app looks like on all three platforms. Each with the native ListView, styling, and navigation bar.

DetailsPage

When our user selects a monkey from the list, we want to navigate to a new details page to display further information about the monkey. So let’s create a new Page called DetailsPage and pass in the selected monkey in the constructor. We are just going to add a Label with the monkey’s details inside of a ScrollView in case of very long text.

public class DetailsPage : ContentPage
{
  public DetailsPage (Monkey monkey) {
    Title = monkey.Name;
    var details = new Label{
      Text = monkey.Details
    };

   Content = new ScrollView {
     Padding = 20,
     Content = details
    };
  }
}

The last thing to do is wire up our ListView to navigate to the details page when a monkey is selected. Back in our MonkeysPage, we can do this by wiring up the ItemSelected event. In the callback, we will use the page’s built in Navigation to create a new DetailsPage and tell it to PushAsync.

list.ItemTapped += (sender, args) => {
  var monkey = args.Item as Monkey;
  if (monkey == null)
    return;
  Navigation.PushAsync (new DetailsPage (monkey) );
  // Reset the selected item
  list.SelectedItem = null;
};

Details Page

So much more

This doesn’t even scratch the surface of what Xamarin.Forms can do, including it’s built-in DependencyService to help you implement platform specific code, advanced cross-platform Animation system, and all of the other pages, layouts, and controls that you can mix-and-match with other native controls on each platform.

For a closer look of Xamarin.Forms be sure to register for our Xamarin.Forms webinar on June, 10th 2014 8AM PDT.

To get started with Xamarin.Forms be sure to read our entire Xamarin.Forms documentation series, download our sample apps, and join the discussion in our Xamarin.Forms forum. You can download this sample project from my GitHub page. You can download this sample project from my GitHub page.

0 comments

Comments are closed.