Implementing the walk trail page ViewModel

In this section, we will be taking a look at the steps required to create the ViewModel for our WalksTrailViewModel so that we can obtain the walk entry information associated with the chosen walk that has been selected from the main WalksPage.

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

  1. Create a new class file within the ViewModels folder called WalksTrailViewModel, as you did in the previous section entitled Creating the WalkBaseViewModel, located within this chapter.
  2. Next, ensure that the WalksTrailViewModel.cs file is displayed within the code editor, and enter the following code snippet:
            // 
        //  WalksTrailViewModel.cs 
        //  TrackMyWalks ViewModels 
        // 
        //  Created by Steven F. Daniel on 22/08/2016. 
        //  Copyright © 2016 GENIESOFT STUDIOS. All rights reserved. 
        // 
        using TrackMyWalks.Models; 
 
        namespace TrackMyWalks.ViewModels 
        { 
            public class WalksTrailViewModel : WalkBaseViewModel 
 
            { 
                 WalkEntries _walkEntry; 
 
                 public WalkEntries WalkEntry 
                 { 
                     get { return _walkEntry; } 
                     set 
                     { 
                          _walkEntry = value; 
                          OnPropertyChanged(); 
                     } 
                 } 
 
                public WalksTrailViewModel(WalkEntries walkEntry) 
                { 
                    WalkEntry = walkEntry; 
                } 
            } 
        }

In this section, we began by ensuring that our ViewModel inherits from the WalkBaseViewModel class and then we created an WalkEntries variable _walkEntries that will be used to store our WalkEntries. Next, we created a WalkEntry property and its associated getters and setter qualifiers and the OnPropertyChanged method, so that it will be called when our property determines that the contents have been changed. In the final step, we created the WalksTrailViewModel constructor, that accepts a List parameter containing our WalkEntries model.

Updating the WalksTrailPage to use the MVVM model

In this section we need to bind our model binding context BindingContext to the WalksTrailViewModel so that the walk information details will be displayed from the WalkEntries model when a walk has been clicked on within the main WalksPage. Let's take a look at how we can achieve this, by following these steps:

  1. Ensure that the WalkTrailPage.cs file is displayed within the code editor, and enter in the following highlighted code sections:
            // 
        //  WalkTrailPage.cs 
        //  TrackMyWalks 
        // 
        //  Created by Steven F. Daniel on 04/08/2016. 
        //  Copyright © 2016 GENIESOFT STUDIOS. All rights reserved. 
        // 
        using Xamarin.Forms; 
        using TrackMyWalks.Models; 
        using TrackMyWalks.ViewModels; 
 
        namespace TrackMyWalks 
        { 
            public class WalkTrailPage : ContentPage 
            { 
                public WalkTrailPage(WalkEntries walkItem) 
                { 
                    Title = "Walks Trail";
  2. Next, we need to declare and create a new BindingContext instance for the WalksTrailPage, and set this to a new instance of the WalksTrailViewModel so that it knows where to get the WalkEntries so that we can bind it to the associated properties contained within our Model and display this within the View. Proceed and enter the following highlighted code sections:
            // Declare and initialize our Model Binding Context
 
        BindingContext = new WalksTrailViewModel(walkItem); 
 
        var beginTrailWalk = new Button 
        { 
            BackgroundColor = Color.FromHex("#008080"), 
            TextColor = Color.White, 
            Text = "Begin this Trail" 
        }; 
 
        // Declare and initialize our Event Handler 
        beginTrailWalk.Clicked += (sender, e) => 
        { 
            if (walkItem == null) return; 
            Navigation.PushAsync(new DistanceTravelled(walkItem)); 
            Navigation.RemovePage(this); 
            walkItem = null; 
        };
  3. Next, create the remaining Image and Label control objects, as well as the SetBinding properties to their matched property name as contained within the ViewModel, as shown in the following code snippets:
            var walkTrailImage = new Image() 
        { 
            Aspect = Aspect.AspectFill 
        }; 
        walkTrailImage.SetBinding(Image.SourceProperty,
          "WalkEntry.ImageUrl"); 
 
        var trailNameLabel = new Label() 
        {   
            FontSize = 28, 
            FontAttributes = FontAttributes.Bold, 
            TextColor = Color.Black 
        }; 
        trailNameLabel.SetBinding(Label.TextProperty, 
         "WalkEntry.Title"); 
 
        var trailKilometersLabel = new Label() 
        { 
            FontAttributes = FontAttributes.Bold, 
            FontSize = 12, 
            TextColor = Color.Black, 
        }; 
            trailKilometersLabel.SetBinding(Label.TextProperty,
           "WalkEntry.Kilometers", stringFormat: "Length: {0} km"); 
 
        var trailDifficultyLabel = new Label() 
        { 
            FontAttributes = FontAttributes.Bold, 
            FontSize = 12, 
            TextColor = Color.Black 
        }; 
            trailDifficultyLabel.SetBinding(Label.TextProperty, 
           "WalkEntry.Difficulty", stringFormat: "Difficulty: {0}"); 
 
        var trailFullDescription = new Label() 
        { 
            FontSize = 11, 
            TextColor = Color.Black, 
            HorizontalOptions = LayoutOptions.FillAndExpand 
        }; 
            trailFullDescription.SetBinding(Label.TextProperty,
             "WalkEntry.Notes"); 
 
        this.Content = new ScrollView 
        { 
            Padding = 10, 
            Content = new StackLayout 
            { 
                Orientation = StackOrientation.Vertical, 
                HorizontalOptions = LayoutOptions.FillAndExpand, 
                Children = 
                { 
                walkTrailImage, 
                trailNameLabel, 
                trailKilometersLabel, 
                trailDifficultyLabel, 
                trailFullDescription, 
                beginTrailWalk 
                } 
            } 
          }; 
         } 
        } 
       }

In this section, we looked at the steps involved in modifying our WalksTrailPage so that it can take advantage of the WalksTrailViewModel. We looked at how to set the content page to an instance of our WalksTrailViewModel so that it knows where to get the list of walk entries to be used and displayed within our StackLayout control. We used the SetBinding property to create and bind each of our model values to a specific property.

Finally, we defined a ScrollView control, then added each of our form Image and Label fields to the StackLayout control.

..................Content has been hidden....................

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