Mastering Xamarin.Forms

Before we get started, it is important to understand the requirements and features of the TripLog app. We will do this by quickly defining some of the high level things this app will allow its users to do, as follows:

We will start things off by creating a brand new, blank Xamarin.Forms solution within Xamarin Studio, using the following steps:

After creating the new Xamarin.Forms solution, you will have several projects created within it, as shown in the following screenshot:

There will be a single portable class library project and two platform-specific projects:

You'll notice a file in the core library named TripLog.cs, which contains a class named App that inherits from Xamarin.Forms.Application. Initially, the App constructor sets the MainPage property to a new instance of ContentPage that simply displays some default text. The first thing we are going to do in our TripLog app is to build the initial views, or screens, required for our UI, and then update that MainPage property of the App class in TripLog.cs.

The main page of the app will serve as the main entry point into the app and will display a list of existing trip log entries. Our trip log entries will be represented by a data model named TripLogEntry. Models are a key pillar in the MVVM pattern and data-binding, which we will explore more in Chapter 2, MVVM and Data Binding; but in this chapter, we will just create a simple class that will represent the TripLogEntry model. Let us now start creating the main page:

Running the app

At this point, we have a single page that is displayed as the app's main page. If we debug the app and run it in a simulator, emulator, or on a physical device, we should see the main page showing the list of the log entries we hard-coded into the view, like in the following screenshot. In Chapter 2, MVVM and Data Binding, we will refactor this quite a bit as we implement MVVM and leverage the benefits of data-binding.

The new entry page of the app will give the user a way to add a new log entry by presenting a series of fields to collect the log entry details. There are several ways to build a form to collect data in Xamarin.Forms. You can simply use a StackLayout and present a stack of Label and Entry controls on the screen. You can also use a TableView with various types of ViewCells. In most cases, a TableView will give you a very nice default, platform-specific look-and-feel; however, if your design calls for a more custom look-and-feel, you might be better off leveraging the other layout options available in Xamarin.Forms. For the purposes of this app, we're going to use a TableView.

There are some key data points we need to collect when our users log new entries with the app, such as Title, Location, Date, Rating, and Notes. For now, we're going to use a regular EntryCell for each of these fields. We will update, customize, and add to these fields later in this book. For example, we will wire the location fields up to a geo-location service that will automatically determine the location, and we will make the date field use an actual platform-specific date picker control; but for now, we're just focused on building the basic app shell.

In order to create the new entry page that contains a TableView, perform the following steps:

Now that we have created the new entry page, we need to add a way for users to get to this new screen from the main page. We will do this by adding a "New" button to the main page toolbar. In Xamarin.Forms, this is accomplished by adding a ToolbarItem to the base ContentPage ToolbarItems collection and wiring up the ToolbarItem Clicked event to navigate to the new entry page, as shown in the following code:

public MainPage ()
{
    var newButton = new ToolbarItem {
        Text = "New"
    };

    newButton.Clicked += (sender, e) => {
        Navigation.PushAsync(new NewEntryPage());
    };

    ToolbarItems.Add (newButton);

    // ...
}

In Chapter 3, Navigation Service, we will build a custom service to handle navigation between pages, and we will replace the Clicked event with a data-bound ICommand ViewModel property, but for now, we will use the default Xamarin.Forms navigation mechanism.

Now, when we run the app we will see a New button on the toolbar of the main page. Clicking the New button should bring us to the New Entry page, as shown in the following screenshot:

We will need to add a "Save" button to the New Entry page toolbar, so that we can have a way of saving new items. For now, this button will just be a placeholder in the UI that we will bind an ICommand to in Chapter 2, MVVM and Data Binding, when we dive into MVVM and data-binding.

The Save button will be added to the new entry page toolbar the same way the New button was added to the main page toolbar.

In the NewEntryPage constructor, simply create a new ToolbarItem and add it to the base ContentPage ToolbarItems property, as shown in the following code:

public NewEntryPage ()
{
    // ...

    var save = new ToolbarItem {
        Text = "Save"
    };

    ToolbarItems.Add (save);

    // ...
}

When we run the app again and navigate to the New Entry page, we should now see the Save button on the toolbar, as shown in the following screenshot:

When a user taps on one of the log entry items on the main page, we want to take them to a page that displays more details about that particular item, including a map that plots the item's location. Along with additional details and a more in-depth view of the item, a detail page is also a common area where actions on that item might take place, for example, editing the item or sharing the item on social media.

The detail page will take an instance of a TripLogEntry model as a constructor parameter, which we will use in the rest of the page to display the entry details to the user.

In order to create the entry detail page, perform the following steps:

Now when we run the app and tap on one of the log entries on the main page, we will be navigated to the details page to see more detail about that particular log entry, as shown in the following screenshot: