Updating the WalkDistancePage user interface using XAML

In this section, we will begin by updating the user interface for our WalkDistancePage, using XAML, which will use our CustomOverlay class to display a full-screen map with pin placeholders that will mark the starting and ending positions for the chosen trail from the ListView contained within our WalksMainPage. We will also remove our End this Trail button and add this as a ToolbarItem to the NavigationBar of our WalkDistancePage.xaml file.

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

1. Open the WalkDistancePage.xaml file, which is located in the Views folder, and ensure that it is displayed within the code editor. Then, enter the following highlighted code sections:

     <?xml version="1.0" encoding="UTF-8"?>
     <ContentPage xmlns...