In this section, we will begin by defining the user interface for our WalkTrailInfoPage using XAML. This page will be used to display information relating to the chosen trail from the ListView contained within our WalksMainPage.

Let's start by creating the user interface for our WalkTrailInfoPage by performing the following steps:

1. First, create a new Forms ContentPage XAML called WalkTrailInfoPage, like you did in the section entitled Creating the WalksMainPage interface using XAML, located within this chapter.
2. Next, ensure that the WalkTrailInfoPage.xaml file is displayed within the code editor and enter the following code snippet:

    <?xml version="1.0" encoding="UTF-8"?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"                 
               xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
               x:Class="TrackMyWalks.Views.WalkTrailInfoPage">
         <ContentPage.Content>
            <ScrollView Padding="10">
                 <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand">
                     <Image x:Name="TrailImage" Aspect="AspectFill" Source="{Binding ImageUrl}" 
                            HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" />
                     <Label x:Name="TrailName" FontSize="28" FontAttributes="Bold" TextColor="Black" 
                            Text="{Binding Title}" />
                     <Label x:Name="TrailKilometers" FontSize="12" TextColor="Black" 
                            Text="{Binding Distance, StringFormat='Kilometers: {0} km'}" />
                     <Label x:Name="TrailDifficulty" FontSize="12" TextColor="Black" 
                            Text="{Binding Difficulty, StringFormat='Difficulty: {0}'}" />
                     <Label x:Name="TrailFullDescription" FontSize="11" TextColor="Black" 
                            Text="{Binding Description}" HorizontalOptions="FillAndExpand" />
                     <Button x:Name="BeginTrailWalk" Text="Begin this Trail" TextColor="White" 
                            BackgroundColor="#008080" Clicked="BeginTrailWalk_Clicked"/>
                 </StackLayout>
            </ScrollView>
         </ContentPage.Content>
    </ContentPage>

Now, let's start by taking a look at what we defined within the preceding XAML:

1. We started by defining a ScrollView control that will allow our ContentPage to scroll its contents, if the information being displayed is too big to fit within actual devices' screen real estate. Then, we specified the Padding property to represent the distance between an element as well as its child elements.
2. Next, we defined a StackLayout control as well as defined the Image and Label fields. We also set the Text properties to each of the properties defined within our WalkDataItem class and then declared a Button control called BeginTrailWalk.
3. Finally, we updated the Text and TextColor controls, and the BackgroundColor property, as well as the associated Clicked event for the Button called BeginTrailWalk_Clicked.