How to set listview itemssource to a viewmodel in Xamarin?

Question

I'm trying to make a listview in xamarin show data from a restapi but have the option to filter the list or sort it based upon last name.

I've set the bindingcontext equal to the apiviewmodel which works. But I want to set the itemssource to a list which can be manipulated later instead of the binding context.

Here is the code that works:

Xaml:

<ListView x:Name="DirectoryListView" ItemsSource="{Binding ContactsList}" IsPullToRefreshEnabled="True">

Xaml.cs:

LocalAPIViewModel = new APIViewModel();
BindingContext = LocalAPIViewModel;

APIViewModel.cs:

private List<MainContacts> _ContactsList { get; set; }
public List<MainContacts> ContactsList
    {
        get
        {
            return _ContactsList;
        }
        set
        {
            if(value != _ContactsList)
            {
                _ContactsList = value;
                NotifyPropertyChanged();
            }
        }
    }

public class MainContacts
{
    public int ID { get; set; }
    public string FirstName { get; set; }
}

This all works fine. It's only when I add the following lines that it stops displaying the data in the listview:

xaml.cs:

LocalList = LocalAPIViewModel.ContactsList;
DirectoryListView.ItemsSource = LocalList;

I think I need to add these lines so that I can manipulate the list that's being displayed. Why is the list not being displayed? Is this not how it should be done?

Answer 1

According to your description and code, you use MVVM to bind ListView firstly, it works fine, now you want to use Viewmodel to bind ListView itemsource in xaml.cs directly, am I right?

If yes,I do one sample according to your code, that you can take a look, the data can display successfully.

public partial class Page4 : ContentPage
{
    public APIViewModel LocalAPIViewModel { get; set; }
    public Page4 ()
    {
        InitializeComponent ();
        LocalAPIViewModel = new APIViewModel();           
        listview1.ItemsSource = LocalAPIViewModel.ContactsList;
    }
}

public class APIViewModel
{
    public ObservableCollection<MainContacts> ContactsList { get; set; }
    public APIViewModel()
    {
        loadddata();
    }

    public void loadddata()
    {
        ContactsList = new ObservableCollection<MainContacts>();
        for(int i=0;i<20;i++)
        {
            MainContacts p = new MainContacts();
            p.ID = i;
            p.FirstName = "cherry"+i;
            ContactsList.Add(p);
        }
    }
}
public class MainContacts
{
    public int ID { get; set; }
    public string FirstName { get; set; }
}

so I suggest you can check ContactsList if has data.

Update:

I want to be able to search the list with a search bar and also order it by first or last names. I also want to be able to click on one of the contacts and open up a separate page about that contact

I do one sample that can meet your requirement, you can take a look:

https://github.com/851265601/xf-listview