How to fix the issue with binding generic list to listview in xamarin forms?

Question

I'm new to Xamarin forms. I tried to make a card view using ListView in Xamarin forms. Problem is that I am having issue with binding data from generic list.

The number of rows shown in listview are the same as the number of rows in the list but the property values don't bind to the XAML tags

I've tried it using both approaches by binding the data from code behind and directly to the item source in XAML

<?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="MedicalCenter.Pages.MenuPage">
   <ListView x:Name="MyListView"
        ItemsSource="{Binding Items}"
        ItemTapped="Handle_ItemTapped"
        CachingStrategy="RecycleElement">

    <ListView.ItemTemplate>
        <DataTemplate>
            <TextCell Text="{Binding lstHomeMenu}" />
        </DataTemplate>
    </ListView.ItemTemplate>

  </ListView>
</ContentPage>









   public partial class HomePage : ContentPage
   {

    public HomePage ()
    {
        InitializeComponent ();
        this.BindingContext = new HomeMenuViewModel();
    }
   }












    public class HomeMenuViewModel
    {
        public IList<HomeMenu> lstHomeMenu { get; set; }
        public HomeMenuViewModel()
        {
            lstHomeMenu = new List<HomeMenu>();
            GenerateCardModel();
        }

    private void GenerateCardModel()
    {
        lstHomeMenu.Add(new HomeMenu()
        {
            Title = "Request Appointment",
            Icon = "icon_appointment.png",
            BackgroundColor = "#479589"
        });
        lstHomeMenu.Add(new HomeMenu()
        {
            Title = "Order Prescription",
            Icon = "icon_prescription.png",
            BackgroundColor ="#4383D9"
        });
    }
}

   public class HomeMenu
   {
       public string Title { get; set; }
       public string Icon { get; set; }
        public string BackgroundColor { get; set; }
       }
   }

When I bind a List to the ListView the data binds properly.

public class HomeMenuViewModel
{
    public IList<string> lstHomeMenu { get; set; }
    public HomeMenuViewModel()
    {
        lstHomeMenu = new List<string>();
        GenerateCardModel();
    }

    private void GenerateCardModel()
    {
        lstHomeMenu = new ObservableCollection<string>
        {
            "1",
            "2",
            "3",
            "4",
            "5",
            "6"
        };
    }
}
}


<?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="MedicalCenter.Pages.MenuPage">
  <ListView x:Name="MyListView"
        ItemsSource="{Binding Items}"
        ItemTapped="Handle_ItemTapped"
        CachingStrategy="RecycleElement">

    <ListView.ItemTemplate>
    <DataTemplate>
        <TextCell Text="{Binding .}" />
    </DataTemplate>
    </ListView.ItemTemplate>

  </ListView>
</ContentPage>

but when I bind the List the binding doesn't work but I get the same number of rows in the ListView as the number of rows in the List.

Edited Question:

List View Result

This is the View I am getting. Seems like the list is binding but the properties inside the object are not binding

Alexander Alekseev Alexander Alekseev · Accepted Answer · 2019-09-06T08:31:05

UPD:

I still think that your XAML is a problem.

I've recreated a project from the provided code. Please look at the lines 10 and 16 here.

==========

Original answer:

I think that problem is here:

ItemsSource="{Binding Items}"

Your HomeMenuViewModel contains public IList<string> lstHomeMenu { get; set; }, not Items.

How to fix the issue with binding generic list to listview in xamarin forms?

2 Answers