Xamarin Forms SelectedItem not visible in Picker

Question

I am having some difficulty in getting the selected item binded to a picker. I have been through various answers, but none of it working for me. Here is my code

My XAML

 `<Picker x:Name="mobListPicker" 
  Style="{StaticResource PickerOrangeStyle}" Title="Select Mob"                       
  HeightRequest="50" ItemsSource="{Binding ProductList, Mode=TwoWay}" 
  ItemDisplayBinding="{Binding ProductNo}"                    
  SelectedItem="{Binding SelectedProduct,Mode=TwoWay}">                
</Picker>`

Property for the selected item

    private Product _selectedProduct;
    public Product SelectedProduct
    {
        get { return _selectedProduct; }
        set { SetProperty(ref _selectedProduct, value); }
    }

It will be awesome if someone can help me identify the error.

can you remove Mode in ItemsSource and Update Mode=Default in SelectedItem — eakgul

Almir Vuk Almir Vuk · Accepted Answer · 2017-10-22T19:00:48

I made this simple demo-project about using Picker and MVVM binding. As Item source I use one ObservableCollection of type Person.

When user select one of the items from Picker, value/content of labels bellow is changed. Please take a look at it I think this project is what you need to resolve your issue.

You are not providing us your whole code so it can be hard to see your possible erros. Maybe this can be helpful for you.

Demo:

Code snippets:

My Person class looks like this:

public class Person {

    public int PersonId { get; set; }

    public string FName { get; set; }
    public string LName { get; set; }

    public string FullName { get { return $"{FName} {LName}"; } }
    public string Biography { get; set; }

}

My ViewModel:

public class AllPersonsViewModel : INotifyPropertyChanged{

    public ObservableCollection<Person> AllPersons { get; set; }

    private Person selectedPerson;
    public Person SelectedPerson {
        get { return selectedPerson; }
        set { selectedPerson = value;
            OnPropertyChanged();
        }
    }

    public AllPersonsViewModel() {

        AllPersons = new ObservableCollection<Person>() {

            new Person() {
                Biography = "Lorem ipsum person 1",
                FName = "Person",
                LName = "One",
                PersonId = 1,
            },

            new Person() {
                Biography = "Lorem ipsum person 2",
                FName = "Person",
                LName = "Two",
                PersonId = 2,
            },

             new Person() {
                Biography = "Lorem ipsum person 3",
                FName = "Person",
                LName = "Three",
                PersonId = 3,
            },

        };


    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName]string propertyName = "") =>
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}

I have one view which use this view-model as BindingContext

... and XAML of my page with Picker control is here:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XF.Picker.Demo.Views.PersonsPage">
    <ContentPage.Content>
        <StackLayout Orientation="Vertical">

            <Picker Title="All person"
                    ItemDisplayBinding="{Binding FullName}"
                    ItemsSource="{Binding AllPersons}"
                    SelectedItem="{Binding SelectedPerson}"/>

            <!-- Margin just to see picker dropdown and labels at the same time-->
            <Label Text="{Binding SelectedPerson.FullName}" Margin="0,80,0,0"/>
            <Label Text="{Binding SelectedPerson.Biography}"/>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

I published this code project on github you can find it here

Xamarin Forms SelectedItem not visible in Picker

1 Answers