Implementing the WalksMainPage code using C#

Now that we have defined our user interface for our ContentPage using XAML, the next step is to begin creating the underlying C# code within our WalksMainPage code-behind file, which will be used to populate our data model with static data. This will then display this information within our ListView.

Let's take a look at how we can achieve this by following these steps:

Open the WalksMainPage.xaml.cs code-behind file, ensuring that it is displayed within the code editor, and enter in the following code snippet:

     //
// WalksMainPage.xaml.cs
// Displays Walk Information within a ListView control from an array
//
// Created by Steven F. Daniel on 14/05/2018
// Copyright © 2018 GENIESOFT STUDIOS. All rights reserved.
//
using System;
using System.Collections.ObjectModel;
using TrackMyWalks.Models;
using Xamarin.Forms;

namespace TrackMyWalks.Views
{
public partial class WalksMainPage : ContentPage
{
public WalksMainPage()
{
InitializeComponent();

// Update the page title for our Main Page
Title = "Track My Walks";
this.InitialiseWalks();
}

public void InitialiseWalks()
{
// Create a collection that will raise an event,
// whenever an object is added or removed from
// our WalksListModel collection.
var WalksListModel = new ObservableCollection<WalkDataModel> {

// Populate our collection with some dummy data that will be used
// to populate our ListView
new WalkDataModel
{
Id = 1,
Title = "10 Mile Brook Trail, Margaret River",
Description = "The 10 Mile Brook Trail starts in the Rotary Park
near Old Kate, a preserved steam engine at the northern edge of
Margaret River. ",
Latitude = -33.9727604,
Longitude = 115.0861599,
Distance = 7.5,
Difficulty = "Medium",
ImageUrl = "http://trailswa.com.au/media/cache/media/images/
trails/_mid/FullSizeRender1_600_480_c1.jpg"
},
new WalkDataModel
{
Id = 2,
Title = "Ancient Empire Walk, Valley of the Giants",
Description = "The Ancient Empire is a 450 metre walk trail that
takes you around and through some of the giant tingle trees
including the most popular of the gnarled veterans, known
as Grandma Tingle.",
Latitude = -34.9749188,
Longitude = 117.3560796,
Distance = 450,
Difficulty = "Hard",
ImageUrl = "http://trailswa.com.au/media/cache/media/images/
trails/_mid/Ancient_Empire_534_480_c1.jpg"
}};
// Populate our ListView with entries from our WalksListModel
WalkEntriesListView.ItemsSource = WalksListModel;
}

// Instance method to call the WalkEntryPage to add a Walk Entry
public void AddWalk_Clicked(object sender, EventArgs e)
{
App.SelectedItem = null;
Navigation.PushAsync(new WalkEntryPage());
}

// Instance method to call the WalkTrailInfoPage using the selected item
public void myWalkEntries_ItemTapped(object sender, ItemTappedEventArgs e)
{
// Get the selected item from our ListView
App.SelectedItem = e.Item as WalkDataModel;
Navigation.PushAsync(new WalkTrailInfoPage());
}
}
}

Now, let's start by taking a look at what we covered in the preceding code snippet:

  1. First, we started by including references to both the System.Collections.ObjectModel and TrackMyWalks.Models namespaces so that we can access the classes that are defined within these namespaces.
  2. Next, we modified the Title property for our ContentPage, and then created our InitialiseWalks instance method and created an ObservableCollection called WalksListModel, which essentially is a collection that will raise an event whenever an object is added or removed from our WalksListModel collection.
  3. Then, we used the Add method to add values to each of our properties contained within our WalkDataModel, before finally setting the WalksListModel collection to the ItemsSource property of the WalkEntriesListView property that is contained within the WalksMainPage.xaml file.
  1. Next, we created the AddWalk_Clicked event method that will be called whenever the Add button is tapped. We initialized our App.SelectedItem variable to null since we are creating a new walk entry, and then we used the PushAsync method of the Navigation class to navigate to our WalkEntryPage.
  2. Finally, we created the myWalkEntries_ItemTapped event method, which will be responsible for displaying the WalkTrailInfoPage when a row has been tapped on within the WalkEntriesListView and using the ItemTappedEventArgs parameter to determine the item that has been tapped within the ListView, before calling the WalkTrailInfoPage using the Navigation.PushAsync method.
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.118.23.147