In this section, we will begin building the user interface for our WalksTrailPage. This page is called when the user clicks on an entry within the ListView on our TrackMyWalks main content page and will be used to display information associated with the chosen trail:

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

        namespace TrackMyWalks
        {
         public class WalkTrailPage : ContentPage
         {
         public WalkTrailPage(WalkEntries walkItem)
         {
         Title = "Walks Trail";

         var beginTrailWalk = new Button
         {
         BackgroundColor = Color.FromHex("#008080"),
         TextColor = Color.White,
         Text = "Begin this Trail"
         };

         // Set up our event handler
         beginTrailWalk.Clicked += (sender, e) =>
         {
         if (walkItem == null) return;
         Navigation.PushAsync(new DistanceTravelledPage (walkItem));
         Navigation.RemovePage(this);
         walkItem = null;
         };
  
         var walkTrailImage = new Image()
         {
         Aspect = Aspect.AspectFill,
         Source = walkItem.ImageUrl
         };

         var trailNameLabel = new Label()
        {
         FontSize = 28,
         FontAttributes = FontAttributes.Bold,
         TextColor = Color.Black,
         Text = walkItem.Title
        };

         var trailKilometersLabel = new Label()
         {
         FontAttributes = FontAttributes.Bold,
         FontSize = 12,
         TextColor = Color.Black,
         Text = $"Length: { walkItem.Kilometers } km"
         };

         var trailDifficultyLabel = new Label()
         {
         FontAttributes = FontAttributes.Bold,
         FontSize = 12,
         TextColor = Color.Black,
         Text = $"Difficulty: { walkItem.Difficulty } "
         };

         var trailFullDescription = new Label()
         {
        FontSize = 11,
         TextColor = Color.Black,
         Text = $"{ walkItem.Notes }",
         HorizontalOptions = LayoutOptions.FillAndExpand
         };

         this.Content = new ScrollView
         {
         Padding = 10,
         Content = new StackLayout
         {
         Orientation = StackOrientation.Vertical,
         HorizontalOptions = LayoutOptions.FillAndExpand,
         Children =
         {
         walkTrailImage,
         trailNameLabel,
         trailKilometersLabel,
         trailDifficultyLabel,
         trailFullDescription,
         beginTrailWalk
         }
         }
         };
         }
         }
        } 
 

In the preceding code snippet, we began by importing our TrackMyWalks.Models class as we will be using this to extract the information passed in from our WalksPage.

Next, we declare our beginTrailWalk variable that inherits from the Button class; then we set up the Clicked event of the Button class, which will be used to navigate to the DistanceTravelledPage content page when clicked to display information about our trail after removing our walks trail content page from the NavigationPage hierarchy.

In the next step, we declare an image variable walkTrailImage and set the Source property of the image to be the image of the selected walkItem from the ListView. We then declare and initialize a number of label objects that will contain the walkItem information that has been passed from the WalksPage content page ListView control and displayed.

Next, we define a ScrollView control that is part of the Xamarin.Forms.Core base class, then add each of our form Image and Label fields to the StackLayout control. The ScrollView control is a fantastic control that allows our ContentPage to scroll its contents should the information be too big to fit within the actual device's screen real estate.