Xamarin forms picker data binding

Question

I have a Xamarin project that contains a page that has details about surgical cases. I have added a picker that selects a list of eyes that can be linked to the surgical case. The picker only shows the object, not the data from the list. What am I doing wrong? Here is the code

<?xml version="1.0" encoding="utf-8" ?>
<forms:ContentPage
    x:Class="SxQiApp.EditSxCasePage"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:forms="clr-namespace:Xamarin.Forms;assembly=Xamarin.Forms.Core"
    xmlns:viewModels="clr-namespace:SxQiApp.ViewModels;assembly=SxQiApp">

    <forms:ContentPage.BindingContext>
        <viewModels:SxCaseViewModel />
    </forms:ContentPage.BindingContext>

    <forms:StackLayout>
        <Label Text="Record" />
        <Entry Text="{Binding SelectedSxCase.Record}" />
        <Label Text="Case" />
        <Entry Text="{Binding SelectedSxCase.Facesheet}" />
        <Label Text="Return OR" />
        <Switch IsToggled="{Binding SelectedSxCase.ReturnOr}" />
        <Label Text="Complication" />
        <Switch IsToggled="{Binding SelectedSxCase.Complication}" />

        <Picker Title="Eye" ItemsSource="{Binding Eyes}" ItemDisplayBinding="{Binding Eyes}" /> 
        <Label Text="{Binding SelectedEye}" />
        <Button Command="{Binding PutSxCaseCommand}" Text="Edit Case" />
        <Button Command="{Binding DeleteSxCaseCommand}" Text="Delete Case" />
    </forms:StackLayout>

</forms:ContentPage>

This is the Code Behind

using SxQiApp.ViewModels;
using Xamarin.Forms;

namespace SxQiApp
{
    // XamlC is set in App.xaml.cs
    //[XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class EditSxCasePage : ContentPage
    {
        public EditSxCasePage()
        {
            InitializeComponent();

        }

        public EditSxCasePage(SxCaseViewModel SxCaseViewModel)
        {
            InitializeComponent();

            this.SxCaseViewModel = SxCaseViewModel;
            BindingContext = SxCaseViewModel;



        }

        public SxCaseViewModel SxCaseViewModel { get; }

    }
}

This is the ViewModel

using SxQiApp.Models;
using SxQiApp.Services;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Threading.Tasks;
using System.Windows.Input;
using Xamarin.Forms;

namespace SxQiApp.ViewModels
{
    public class SxCaseViewModel : INotifyPropertyChanged
    {
        private List<SxCase> _sxcase;
        private SxCaseDataService _sxCaseDataService = new SxCaseDataService();
        private SxCase _selectedSxCase;
        private List<Eye> _eye;
        private EyeDataService _eyeDataService = new EyeDataService();
        private Eye _selectedEye;



        public SxCase SelectedSxCase
        {
            get { return _selectedSxCase; }
            set
            {
                _selectedSxCase = value;
                OnPropertyChanged();
            }
        }


        public List<SxCase> SxCases
        {
            get
            {
                return _sxcase;

            }
            set
            {
                _sxcase = value;
                OnPropertyChanged();
            }
        }

        public Command PutSxCaseCommand
        {
            get
            {
                return new Command(async () =>
                {
                    var sxCaseDataService = new SxCaseDataService();
                    await sxCaseDataService.PutSxCase(_selectedSxCase.SxCaseId, _selectedSxCase);
                });
            }
        }

        public Command DeleteSxCaseCommand
        {
            get
            {
                return new Command(async () =>
                {
                    var sxCaseDataService = new SxCaseDataService();
                    await sxCaseDataService.DeleteSxCaseAsync(_selectedSxCase.SxCaseId);
                });
            }
        }


        public ICommand AddRecordCommand => new Command(async () =>
        {

            await _sxCaseDataService.PostSxCase(SelectedSxCase);


        });



        public SxCaseViewModel()
        {


            SelectedSxCase = new SxCase();
            GetSxCases();

            SelectedEye = new Eye();
            GetEyes();
        }

        public event PropertyChangedEventHandler PropertyChanged;

        protected virtual void OnPropertyChanged([CallerMemberName]string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }

        private async Task GetSxCases()
        {


            SxCases = await _sxCaseDataService.GetSxCases();
        }

        public Eye SelectedEye
        {
            get { return _selectedEye; }
            set
            {
                _selectedEye = value;
                OnPropertyChanged();
            }
        }


        public List<Eye> Eyes
        {
            get
            {
                return _eye;

            }
            set
            {
                _eye = value;
                OnPropertyChanged();
            }

        }

        private async Task GetEyes()
        {


            Eyes = await _eyeDataService.GetEyes();
        }


    }



}

Neil Neil · Accepted Answer · 2018-09-18T20:36:08

Your bindings ARE to the object:

<Picker Title="Eye" ItemsSource="{Binding Eyes}" ItemDisplayBinding="{Binding Eyes}" />

public List<Eye> Eyes {get;set;}

If you want to display some property of an Eye, then you need to bind to it:

(this will bind to the .Name property of an Eye object).

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/picker/populating-itemssource`

Xamarin forms picker data binding

1 Answers