Creating the entry detail page

When a user clicks on one of the log entry items on the main page, we want to take them to a page that displays more details about that particular item, including a map that plots the item's location. Along with additional details and a more in-depth view of the item, a detail page is also a common area where actions on that item might take place, such as, editing the item or sharing the item on social media. The detail page will take an instance of a TripLogEntry model as a constructor parameter, which we will use in the rest of the page to display the entry details to the user.

In order to create the entry detail page, perform the following steps:

1. First, add a new Xamarin.Forms XAML ContentPage to the project and name it DetailPage.
2. Update the constructor of the DetailPage class in DetailPage.xaml.cs to take a TripLogEntry parameter named entry, as shown in the following code:

      public class DetailPage : ContentPage
      {
          public DetailPage(TripLogEntry entry) 
          {
              // ...
          } 
      }

3. Add the Xamarin.Forms.Maps NuGet package to the core project and to each of the platform-specific projects. This separate NuGet package is required in order to use the Xamarin.Forms Map control in the next step.
4. Update the XAML in DetailPage.xaml to include a Grid layout to display a Map control and some Label controls to display the trip's details, as shown in the following code:

      <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="TripLog.DetailPage">
          <ContentPage.Content>
              <Grid>
                  <Grid.RowDefinitions>
                      <RowDefinition Height="4*" />
                      <RowDefinition Height="Auto" />
                      <RowDefinition Height="1*" />
                  </Grid.RowDefinitions>
                 
                  <maps:Map x:Name="map" Grid.RowSpan="3" />

                  <BoxView Grid.Row="1" BackgroundColor="White" 
                           Opacity=".8" />

                  <StackLayout Padding="10" Grid.Row="1">
                      <Label x:Name="title" HorizontalOptions="Center" />
                      <Label x:Name="date" HorizontalOptions="Center" />
                      <Label x:Name="rating" HorizontalOptions="Center" />
                      <Label x:Name="notes" HorizontalOptions="Center" />
                  </StackLayout>
              </Grid>
          </ContentPage.Content>
      </ContentPage>

5. Update the detail page's code-behind, DetailPage.xaml.cs, to center the map and plot the trip's location. We also need to update the Label controls on the detail page with the properties of the entry constructor parameter:

      public DetailPage(TripLogEntry entry)
      {
          InitializeComponent();

          map.MoveToRegion(MapSpan.FromCenterAndRadius(
              new Position(entry.Latitude, entry.Longitude),
              Distance.FromMiles(.5)));

          map.Pins.Add(new Pin
          {
              Type = PinType.Place,
              Label = entry.Title,
              Position = new Position(entry.Latitude, entry.Longitude)
          });

          title.Text = entry.Title;
          date.Text = entry.Date.ToString("M");
          rating.Text = $"{entry.Rating} star rating";
          notes.Text = entry.Notes;
      }

6. Next, we need to wire up the ItemTapped event of the ListView on the main page to pass the tapped item over to the entry detail page that we have just created, as shown in the following code:

      <!-- MainPage.xaml -->
      <ListView x:Name="trips" ItemTapped="Trips_ItemTapped">
          <!-- ... -->
      </ListView>

      // MainPage.xaml.cs
      public MainPage()
      {
          // ...

          async void Trips_ItemTapped(object sender, ItemTappedEventArgs e)
          {
              var trip = (TripLogEntry)e.Item;
              await Navigation.PushAsync(new DetailPage(trip));

              // Clear selection
              trips.SelectedItem = null;
          }
      }

7. Finally, we will need to initialize the Xamarin.Forms.Maps library in each platform-specific startup class (AppDelegate for iOS and MainActivity for Android) using the following code:

      // in iOS AppDelegate
      global::Xamarin.Forms.Forms.Init();
      Xamarin.FormsMaps.Init();
      LoadApplication(new App());

      // in Android MainActivity
      global::Xamarin.Forms.Forms.Init(this, bundle);
      Xamarin.FormsMaps.Init(this, bundle);
      LoadApplication(new App());

Now, when we run the app and tap on one of the log entries on the main page, it will navigate us to the details page to see more detail about that particular log entry, as shown in the following screenshot: