Create a new ContentPage called DistanceTravelledPage as you did in the previous section.

Next, ensure that the DistanceTravelledPage.cs file is displayed within the code editor and enter the following highlighted code sections:

        // 
        //  DistanceTravelledPage.cs 
        //  TrackMyWalks 
        // 
        //  Created by Steven F. Daniel on 04/08/2016. 
        //  Copyright © 2016 GENIESOFT STUDIOS. All rights reserved. 
        // 
        using Xamarin.Forms; 
        using Xamarin.Forms.Maps;

        using TrackMyWalks.Models; 
 
        namespace TrackMyWalks 
        { 
            public class DistanceTravelledPage : ContentPage 
            { 

Then, update the DistanceTravelledPage method constructor to include the walkItem parameter for the chosen walk, as shown by the following highlighted code sections:

    public DistanceTravelledPage(WalkEntries walkItem)
    {
       Title = "Distance Travelled";

Next, we declare a trailMap variable that will point to an instance of the Xamarin.Forms.Maps control to create a placeholder pin marker within the map control. Using the latitude and longitude coordinates, enter the following highlighted code sections:

        // Instantiate our map object
        var trailMap = new Map();
    // Place a pin on the map for the chosen walk type
    trailMap.Pins.Add(new Pin
    {
       Type = PinType.Place,
       Label = walkItem.Title,
       Position = new Position(walkItem.Latitude, walkItem.Longitude)
     });
     // Center the map around the list of walks entry's location
     trailMap.MoveToRegion(MapSpan.FromCenterAndRadius(new 
Position(walkItem.Latitude, walkItem.Longitude), 
Distance.FromKilometers(1.0)));

Then, we declare a number of Label objects that contain our walkItem information, which has been passed from the WalkTrailPage content page so that we can trail related information. Enter in the following highlighted code sections:

    var trailNameLabel = new Label()
    {
        FontSize = 18,
        FontAttributes = FontAttributes.Bold,
        TextColor = Color.Black,
        Text = walkItem.Title
    };
    var trailDistanceTravelledLabel = new Label()
    {
        FontAttributes = FontAttributes.Bold,
        FontSize = 20,
        TextColor = Color.Black,
        Text = "Distance Travelled",
        HorizontalTextAlignment = TextAlignment.Center
    };
    var totalDistanceTaken = new Label()
    {
        FontAttributes = FontAttributes.Bold,
        FontSize = 20,
        TextColor = Color.Black,
        Text = $"{ walkItem.Distance } km",
        HorizontalTextAlignment = TextAlignment.Center
    };
    var totalTimeTakenLabel = new Label()
    {
        FontAttributes = FontAttributes.Bold,
        FontSize = 20,
        TextColor = Color.Black,
        Text = "Time Taken:",
        HorizontalTextAlignment = TextAlignment.Center
    };
    var totalTimeTaken = new Label()
    {
        FontAttributes = FontAttributes.Bold,
            FontSize = 20, 
            TextColor = Color.Black,

            Text = "0h 0m 0s",

            HorizontalTextAlignment = TextAlignment.Center

         };

Next, we declare our walksHomeButton variable that inherits from the Button class and proceed to set up our click handler, which will be used to navigate our app to the main WalksPage content page when clicked. Enter the following highlighted code sections:

    var walksHomeButton = new Button
    {
        BackgroundColor = Color.FromHex("#008080"),
        TextColor = Color.White,
        Text = "End this Trail"
    };
     // Set up our event handler
     walksHomeButton.Clicked += (sender, e) =>
     {
         if (walkItem == null) return;
         Navigation.PopToRootAsync(true);
         walkItem = null;
      };

Then, we define a ScrollView control that is part of the Xamarin.Forms.Core base class and proceed to add each of our form Button and Label fields to the StackLayout control. Enter the following highlighted code sections:

        this.Content = new ScrollView
       {
           Padding = 10,
           Content = new StackLayout
           {
               Orientation = StackOrientation.Vertical,
               HorizontalOptions = LayoutOptions.FillAndExpand,
               Children = {
                   trailMap,
                   trailNameLabel,
                   trailDistanceTravelledLabel,
                   totalDistanceTaken,
                   totalTimeTakenLabel,
                   totalTimeTaken,
                   walksHomeButton
                }
              }
             };
            }
           }
        } 

Ensure that the AppDelegate.cs file is displayed within the code editor and enter the following highlighted code sections: