.NET MAUI Picker ItemsSource Binding Not Working

Question

Having issues with this simple bind.

Trying to bind this list of strings names "carNames" to a Picker, but it is not working.

When I set the Picker.ItemSource to my List "CarNames" I get the items displayed but it doesn't work when I bind in the XAML.

I tried making it an ObservableCollection, but that didn't work for me either.

Code Behind.

using People.ViewModel;

namespace People.View;

public partial class CarView : ContentPage
{
 
    List<Cars> cars;
    CarSet carSet;
    public List<string> carNames { get; set; } = new();

    public CarView()
    {
        carSet = new CarSet(carNames);
        InitializeComponent();
    }

    public void OnNewButtonCarClicked(object sender, EventArgs args)
    {
        CarMessage.Text = "";

        App.CarRepo.AddNewCar(newModel.Text);
        CarMessage.Text = App.CarRepo.CarMessage;
    }

    public void OnGetButtonCarClicked(object sender, EventArgs args)
    {
        CarMessage.Text = "";

        cars = App.CarRepo.GetAllCars();
        carsList.ItemsSource = cars;
    }
}

XAML

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="People.View.CarView"           
             Title="CarView">

    <Grid RowDefinitions="80,80,80,80,80,*"
          ColumnDefinitions="1000,*,*,*"
          BackgroundColor="Black">

        <Entry x:Name="newModel"
               Placeholder="Enter Vehicle"
               Grid.Column="1"
               Grid.ColumnSpan="2"/>

        <Button Text="Add Car"
                Grid.Row="2"
                Grid.Column="1"
                Grid.ColumnSpan="2"
                Clicked="OnNewButtonCarClicked" />

        <CollectionView x:Name="CarList"></CollectionView>

        <Label x:Name="CarMessage"
               Grid.Row="3"
               Grid.Column="1"/>

        <Button Text="Get All Cars"
                Grid.Row="4"
                Grid.Column ="1"
                Grid.ColumnSpan="2"
                Clicked="OnGetButtonCarClicked" />

        <Picker x:Name="Picker"
                Title="Select a Car"
                ItemsSource="{Binding CarNames}"
                ItemDisplayBinding="{Binding Cars}"
                Grid.Column="0"/>

        <CollectionView x:Name="carsList" 
                        Grid.Row="5"
                        Grid.Column ="1"
                        Grid.ColumnSpan="2"
                        SelectionMode="Single">

            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>

                        <Label Text="{Binding CarId}"
                               Grid.Column="0"
                               FontSize="Medium"/>

                        <Label Grid.Column="2" 
                               Text="{Binding Car}"
                               FontSize="Medium"/>


                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </Grid>
</ContentPage>```

Answer 1

I found several problem in this code. follow the below steps.

1. First Need to set binding context. Add below code within constructor

BindingContext = this;

2. In Xaml Picker 'ItemsSource' and 'ItemDisplayBinding' binding value are not correct. Change that part like below.

   <Picker x:Name="Picker"
       Title="Select a Car"
       ItemsSource="{Binding carNames}"
       ItemDisplayBinding="{Binding cars}"
       Grid.Column="0"/>
   

ItemsSource="{Binding carNames}"

ItemDisplayBinding="{Binding cars}"