Xamarin.Forms Picker Issue with SelectedItem not showing the bound value

Question

I have a problem with my Xamarin.Forms app, specifically with a Picker which does not show the actual value of the SelectedItem property. I searched all available threads but none solved my issue. I have a ListView page with an ObservableCollection of "Surgery" objects, each having a property of type "Category" (see below).

public class Surgery 
{
    [PrimaryKey, AutoIncrement]
    public int Id { get; set; }        
    public string Name { get; set; }
    public DateTime Date { get; set; }
    [ForeignKey(typeof(Category))]
    public int CategoryId { get; set; }
    [ManyToOne(CascadeOperations = CascadeOperation.All)]
    public Category Category { get; set; }
}

public class Category 
{
    [PrimaryKey, AutoIncrement]
    public int Id { get; set; }
    public string Name { get; set; }
    [OneToMany(CascadeOperations = CascadeOperation.All)]
    public List<Surgery> Surgeries { get; set; }

}

I also have an EditPage with a picker:

      <Picker Title="Category" x:Name="categoryPicker" 
              ItemsSource="{Binding Categories}" 
              SelectedItem="{Binding SelectedCategory, Mode=TwoWay}"                               
              ItemDisplayBinding="{Binding Name}"
      />
      

And the corresponding EditPageViewModel:

public class EditPageViewModel : BaseViewModel
{
    public Surgery Surgery { get; set; }
    public Command LoadCategoriesCommand
    {
        get
        {
            return new Command(async () => await LoadCategoriesExecute());
        }
    }
    public List<Category> categories;

    public EditPageViewModel(Surgery surgery = null)
    {
        LoadCategoriesCommand.Execute(null);
        Surgery = surgery ?? new Surgery { Date = DateTime.Today };                                                           
    }

    async Task LoadCategoriesExecute()
    {
        if (IsBusy)
            return;
        IsBusy = true;

        try
        {
            Categories = await App.DataService.GetAllCategoriesAsync();                
        }

        catch (Exception ex)
        {
            Debug.WriteLine(ex.Message);
        }

        finally
        {
            IsBusy = false;
        }
    }

    public string SurgeryName
    {
        get { return Surgery.Name; }
        set
        {
            Surgery.Name = value;
            OnPropertyChanged();
        }
    }

    public DateTime SurgeryDate
    {
        get { return Surgery.Date; }
        set
        {
            Surgery.Date = value;
            OnPropertyChanged();
        }
    }

    public Category SelectedCategory
    {
        get { return Surgery.Category; }
        set
        {
            if(Surgery.Category != value)
                Surgery.Category = value;
            OnPropertyChanged();
        }
    }

    public List<Category> Categories
    {
        get { return categories; }
        set
        {
            categories = value;
            OnPropertyChanged();
        }
    }
}

Creating a new Surgery object works perfectly fine with this code. It is saved to the database und displayed in the ListView page. The picker displays the List correctly and the Category can be chosen (which is also reflected in the UI).

THE PROBLEM: When I try to edit a Surgery object with a set Category property, the EditPage displays all properties and the corresponding value correctly except for the picker. The items are loaded and are also bound to the ItemSource - however, the picker is not set to the actual Category property of the Surgery object. Any ideas?

Answer 1

You need to define properties in your models with INotifyPropertyChanged like in your viewmodel.