In this section, we will begin building the user interface for our new WalkEntryPage. This page is called when the user clicks on the Add Walk button from the main page and will be used to allow the user a means of adding new walk information to be used within the application.

There are a number of ways you can go about presenting this information to collect data. For the purpose of this app, we will be using a TableView, but you could quite easily use a StackLayout and present this information as a series of Labels and EntryCells.

Let's begin by creating the new WalkEntryPage by performing the following steps:

        //
        // WalkEntryPage.cs
        // TrackMyWalks
        //
        // Created by Steven F. Daniel on 04/08/2016.
        // Copyright © 2016 GENIESOFT STUDIOS. All rights reserved.
        //
        using Xamarin.Forms;
        using TrackMyWalks.Models;
        using System.Collections.Generic;

        namespace TrackMyWalks
        {
         public class WalkEntryPage : ContentPage
         {
         public WalkEntryPage()
         {
         // Set the Content Page Title 
         Title = "New Walk Entry";

         // Define our New Walk Entry fields
          var walkTitle = new EntryCell
         {
          Label = "Title:",
        Placeholder = "Trail Title"
         };
        var walkNotes = new EntryCell
        {
         Label = "Notes:",
         Placeholder = "Description"
         };
         var walkLatitude = new EntryCell
         {
         Label = "Latitude:",
         Placeholder = "Latitude",
         Keyboard = Keyboard.Numeric
         };
         var walkLongitude = new EntryCell
         {
         Label = "Longitude:",
         Placeholder = "Longitude",
         Keyboard = Keyboard.Numeric
         };
         var walkKilometers = new EntryCell
         {
         Label = "Kilometers:",
         Placeholder ="Kilometers",
         Keyboard = Keyboard.Numeric
         };
         var walkDifficulty = new EntryCell
         {
         Label = "Difficulty Level:",
         Placeholder ="Walk Difficulty"
         };
         var walkImageUrl = new EntryCell
         {
         Label = "ImageUrl:",
         Placeholder ="Image URL"
         };

         // Define our TableView
         Content = new TableView
         {
         Intent = TableIntent.Form,
         Root = new TableRoot
         {
         new TableSection()
         {
         walkTitle,
         walkNotes,
         walkLatitude,
         walkLongitude,
         walkKilometers,
         walkDifficulty,
         walkImageUrl
         }
         }
         };
         var saveWalkItem = new ToolbarItem {
         Text = "Save"
         };
         saveWalkItem.Clicked += (sender, e) => {
         Navigation.PopToRootAsync(true);
         };

         ToolbarItems.Add(saveWalkItem);
         }
         }
        } 
  

In the preceding code snippet, we began by declaring a number of EntryCell labels for our user interface to capture information entered by the user for-Title, Notes, Latitude, Longitude, Kilometers, Difficulty and ImageURL. As you progress through this book, you will learn how to customize the look and feel of the EntryCells by creating a customized platform-specific picker for the Walk Difficulty and Kilometers.

Next, we define our TableView and add each of our EntryCell fields to the TableSection property of the TableView control. Each TableSection that is defined within a TableView consists of a heading and one or more ViewCells, which, in our case, are the EntryCell fields.

Finally, we declare and add a ToolbarItem called saveWalkItem to our ContentPageToolbarItems collection, then create an event that, when clicked, will save the walk information entered to the main walks page. Obviously, we will be refactoring the new WalkEntryPage throughout this book, which, when the Save button is pressed, will actually send this information to the server using a RESTful API and refresh the main TrackMyWalks page.