In this section, we will begin by defining the user interface for our WalkDistancePage using XAML. This page will be used to display a full-screen map with a pin placeholder that, when tapped, will display information relating to the chosen trail from the ListView that's contained within our WalksMainPage.

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

1. First, create a new Forms ContentPage XAML called WalkDistancePage, like you did in the section entitled Creating the WalksMainPage interface using XAML, located within this chapter.
2. Next, ensure that the WalkDistancePage.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" 
            xmlns:maps="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps" 
               x:Class="TrackMyWalks.Views.WalkDistancePage">
         <ContentPage.Content>
             <ScrollView Padding="10">
                 <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand">
                     <maps:Map WidthRequest="320" HeightRequest="200" x:Name="MyCustomTrailMap" 
                               IsShowingUser="true" MapType="Street" />
                     <Button x:Name="EndThisTrail" Text="End this Trail" TextColor="White" 
                             BackgroundColor="#008080" Clicked="EndThisTrailButton_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 the 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 <maps:Map field, which will be used to represent our map. We also set the WidthRequest and HeightRequest properties, which will be used to define our map control.

3. Then, we specified a name for our map control called MyCustomTrailMap so that we can reference this within our code-behind file, and then set the IsShowingUser and MapType properties that will display the user's current location within the map control, as well as set the type of map to use.
4. Finally, we declared a Button control called EndThisTrail and updated the Text and TexColor controls, and the BackgroundColor property, as well as the associated Clicked event for the Button called EndThisTrailButton_Clicked.