Binding results got from Rest API to Picker Xamarin.Forms

Question

I am trying to put the results I get from an API to a picker. And that is the way I am doing it.

 public partial class AddTaskPage : ContentPage
    {
        public AddTaskPage()
        {
            InitializeComponent();
            BindingContext = this;
        }

        private async void GetUsers()
        {
            using (var client = new HttpClient())
            {
                var uri = "http://diplomaxmcws-dev.us-east-2.elasticbeanstalk.com/api/Users/GetAllUsers";
                var result = await client.GetStringAsync(uri);
                var ResultList = JsonConvert.DeserializeObject<List<XMCUsers>>(result);
                Users = new ObservableCollection<XMCUsers>(ResultList);
                BindingContext = this; // for sureness
            }

        }

        public ObservableCollection<XMCUsers> Users { get; set; }

        protected override void OnAppearing()
        {
            GetUsers();
            BindingContext = this;  //for sureness
        }
    }

and in the XAML file.

    <Picker Margin="20,40,20,0"
                             HeightRequest="50" Title="Choose"
                            ItemsSource="{Binding Users}"
                            ItemDisplayBinding="{Binding Full_Name}"
                                 x:Name="ddProfession">

From debugging I see that the Users property gets the results correctly from the API, but binding won't show anything in the view. I don't know if it has to do something with GetUsers() method since it is async. Any help is much valued.

Does your XMCUsers object have a valid field called Full_Name, and if so, is that field getting the right data from the API call? — dprozz122, Aug 02 '20 at 21:40
@ShpendPalushi Hi , you can have a look at this [case](https://stackoverflow.com/questions/63165992/xamarin-picker-not-showing-the-date-from-the-list/63167028#63167028) ,the problem seems to be the same with yours . — Junior Jiang, Aug 03 '20 at 02:43

score 0 · Answer 1 · answered Aug 03 '20 at 01:44

It is advisable to use another class to use as a BindingContext (ViewModel).

But if you want to the process inside your ContentPage

ddProfession.ItemSource = ResultList;

or create a BindingProperty inside your ContentPage

public static readonly BindableProperty UserProperty = BindableProperty.Create(
        nameof(Users),
        typeof(XMCUsers),
        typeof(AddTaskPage),
        default(XMCUsers));

    public XMCUsers User
    {
        get => (XMCUser)GetValue(UserProperty);
        set => SetValue(UserProperty, value); 
    }

score 0 · Answer 2 · answered Aug 03 '20 at 17:11

Just use foreach and Add, instead of initializating new collection to correctly notify ItemSource about changes.

foreach (var item in ResultList)
{
    Users.Add(item);
}

Full code:

public partial class AddTaskPage : ContentPage
    {
        public ObservableCollection<XMCUsers> Users { get; set; } = new ObservableCollection<XMCUsers>();

        public AddTaskPage()
        {
            InitializeComponent();
            BindingContext = this;
        }

        private async Task GetUsers()
        {
            using (var client = new HttpClient())
            {
                var uri = "http://diplomaxmcws-dev.us-east-2.elasticbeanstalk.com/api/Users/GetAllUsers";
                var result = await client.GetStringAsync(uri);
                var ResultList = JsonConvert.DeserializeObject<List<XMCUsers>>(result);
                foreach (var item in ResultList)
                {
                    Users.Add(item);
                }
            }

        }

        protected override async void OnAppearing()
        {
            await GetUsers();
        }
    }

Or another aproach: Xamarin picker not showing the date from the list

Binding results got from Rest API to Picker Xamarin.Forms

2 Answers2