Binding to Xamarin Picker SelectedItem in XAML not Reloading Form

Question

I'm having some difficulty in Binding my Xamarin Picker so that when I change the selected item, it triggers a refresh in my form. I'm using XAML with code-behind.

Here is the XAML. You can see the Picker defined. The data is being bound to that nicely and it is loading the Name property from my List.

There is an Id "Entry" field above it, and this is the part that isn't working. What I'd like that to do is display the Id field from the List/selected list item when the picker has been "picked".

There is also some sample code I found online which works - Surname and Forename are both updating he corresponding label when data is entered. So it must be something to do with the picker and the SelectedItem binding or the way I am trying to use OnPropertyChanged.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="TechsportiseApp.MainUI.Races">
  <StackLayout Padding="0,20,0,0">
    <Label Text="Race ID" />
    <Entry Text="{Binding Id}" />
    <Picker ItemsSource="{Binding RaceList}" ItemDisplayBinding="{Binding Name}" SelectedItem="{Binding RacesIndex, Mode=TwoWay}" />
    <Label Text="Data Binding 101 Demo" FontAttributes="Bold" HorizontalOptions="Center" />
    <Label Text="Forename:" />
    <Entry Text="{Binding Forename, Mode=TwoWay}" />
    <Label Text="Surname:" />
    <Entry Text="{Binding Surname, Mode=TwoWay}" />
    <Label Text="Your forename is:" />
    <Label Text="{Binding Forename}" />
    <Label Text="Your surname is:" />
    <Label Text="{Binding Surname}" />
  </StackLayout>
</ContentPage>

The ViewModel I am using is shown below.

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Threading.Tasks;
using Newtonsoft.Json;
using RestSharp;
using TechsportiseApp.API.Models;
using Xamarin.Forms;
using TechsportiseApp.API;

namespace TechsportiseApp.MainUI.Models
{
public class RacesViewModel : INotifyPropertyChanged
{
    int _id;
    public int Id
    {
        get
        {
            return _id;
        }
        set
        {
            if (_id != value)
            {
                _id = value;
                OnPropertyChanged("Id");
            }
        }
    }
    string _name;
    public string Name
    {
        get
        {
            return _name;
        }
        set
        {
            if (_name != value)
            {
                _name = value;
                OnPropertyChanged("Name");
            }
        }
    }

    public List<Race> RaceList
    {
        get
        {
            var racelist = RacesAPI.GetRaces();
            return racelist;
        }
    }

    int _racesIndex;
    public int RacesIndex
    {
        get
        {
            return _racesIndex;
        }
        set
        {
            if (_racesIndex != value)
            {
                _racesIndex = value;

                // trigger some action to take such as updating other labels or fields
                OnPropertyChanged("RacesIndex");
            }
        }
    }

    string forename, surname;

    public string Forename
    {
        get
        {
            return forename;
        }
        set
        {
            if (forename != value)
            {
                forename = value;
                OnPropertyChanged("Forename");
            }
        }
    }

    public string Surname
    {
        get
        {
            return surname;
        }
        set
        {
            if (surname != value)
            {
                surname = value;
                OnPropertyChanged("Surname");
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged(string propertyName)
    {
        var changed = PropertyChanged;
        if (changed != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));               
            }
    }       
 }

In case it is required, here is the code I'm using to populate my list data, which I am obtaining from the JSON response of an API.

using Newtonsoft.Json;
using RestSharp;
using System;
using System.Collections.Generic;
using System.Text;
using TechsportiseApp.API.Models;
using TechsportiseApp.MainUI;
using Xamarin.Forms;

namespace TechsportiseApp.API
{
    public class RacesAPI
    {
        public static List<Race> GetRaces()
        {
            var raceList = new List<Race>();
            string APIServer = Application.Current.Properties["APIServer"].ToString();
            string Token = Application.Current.Properties["Token"].ToString();
            var client = new RestClient(APIServer);
            var request = new RestRequest("api/race", Method.GET);
            request.AddHeader("Content-type", "application/json");
            request.AddHeader("Authorization", "Bearer " + Token);
            var response = client.Execute(request) as RestResponse;
            raceList = JsonConvert.DeserializeObject<List<Race>>(response.Content);
            return raceList;
        }
    }
}

Any ideas? I've been trying to crack this for a couple of days now and just can't seem to make it work.

Answer 1

From what I can see, at no point are you setting the value of Id. Probably you want to put it in the setter of RacesIndex. Also RacesIndex should be bound to SelectedIndex, rather than SelectedItem. I assume the Race class has an Id property, which is an int, so look at the below. If you want to bind to selectedItem, then the property you bind to should be the same type as the one in the list

 int _racesIndex;
public int RacesIndex
{
    get
    {
        return _racesIndex;
    }
    set
    {
        if (_racesIndex != value)
        {
            _racesIndex = value;

            // trigger some action to take such as updating other labels or fields
            Id = racelist[value].RaceId;
            OnPropertyChanged("RacesIndex");
        }
    }
}