xamarin.forms listview populate by BindingContext and viewmodel

Question

I'm new with Xamarin, but I'm coming from C# background.

I'm trying to set the items source of listview by passing viewmodel to the bindingcontext property. I know I can set the itemssoruce programatically in the code behind but I think setting it through the bindingcontext is the right way to do it, correct me if I'm wrong.

Let me start with what I have currently.

This is the viewmodel I have:

public class AirportSelectVM
{
    public int AirportID { get; set; }
    public string AirportICAO { get; set; }
    public int VolumeGallons { get; set; }
}

In the code behind I'm doing this:

private void SetInitialListView()
{
    ObservableCollection<AirportSelectVM> listAirport = new ObservableCollection<AirportSelectVM>();

    AirportSelectVM firstAirport = new AirportSelectVM();
    listAirport.Add(firstAirport);
    BindingContext = listAirport;
}

And in the XAML I have:

 <ContentPage.Content>
        <StackLayout>
                <Picker x:Name="pickerAircraft" ItemDisplayBinding="{Binding TailNumber}" SelectedItem="{Binding Id}" SelectedIndexChanged="PickerAircraft_SelectedIndexChanged" Title="Aircraft Selector"></Picker>

                <ListView ItemsSource="{Binding listAirport}">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>
                                <StackLayout Padding="10,10,10,10">
                                    <Label Text="Leg 1 Arrival" />
                                </StackLayout>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
        </StackLayout>
    </ContentPage.Content>

Just for comparison the picker items source is set in the code behind but eventually I would like to move that in the bindingcontext as well.

So, my main question will be how to setup the items source of a listview through bindingcontext?

Answer 1

you are setting the BindingContext of the Page to listAirport. So the ItemsSource will be the same as the page binding

<ListView ItemsSource="{Binding .}">

Answer 2

If you want to do it "the right way", you should learn more about the MVVM pattern. For each page you are binding a page view model, which will be a bridge between your Models (data) and your UI.

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/xaml/xaml-basics/data-bindings-to-mvvm

Now if you just want to have a working code, you need to set your ItemsSource directly like this:

<ContentPage.Content>
        <StackLayout>
                <Picker x:Name="pickerAircraft" ItemDisplayBinding="{Binding TailNumber}" SelectedItem="{Binding Id}" SelectedIndexChanged="PickerAircraft_SelectedIndexChanged" Title="Aircraft Selector"></Picker>

                <ListView x:Name="AirportListView">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>
                                <StackLayout Padding="10,10,10,10">
                                    <Label Text="Leg 1 Arrival" />
                                </StackLayout>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
        </StackLayout>
    </ContentPage.Content>

code-behind:

private void SetInitialListView()
        {
            ObservableCollection<AirportSelectVM> listAirport = new ObservableCollection<AirportSelectVM>();

            AirportSelectVM firstAirport = new AirportSelectVM();
            listAirport.Add(firstAirport);
            AirportListView.ItemsSource = listAirport;
        }