Data not binding in Xamarin forms Listview group

I am using List view Grouping in Xamarin forms, but some how data is not binding. I am using Xamarin Forms 3.1 latest version. My code is :

<ListView ItemsSource="Binding FacilityList"
IsGroupingEnabled="true" HasUnevenRows="True" ItemTapped="OnItemTapped">
<ListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell>
<Label Text="Binding Heading" TextColor="Black" FontSize="Medium" />
</ViewCell>
</DataTemplate>
</ListView.GroupHeaderTemplate>

<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout>
<Image Source="Binding ImageName" HeightRequest="50" WidthRequest="50"/>
<Label Text="Binding Name" TextColor="Black" FontSize="Medium"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>


And my view model is

private ObservableCollection<FacilitiesGroup> facilityList;
public ObservableCollection<FacilitiesGroup> FacilityList

get => facilityList;
set => SetProperty(ref facilityList, value);


private Facility selectedItem;
public Facility SelectedItem

get => selectedItem;
set

SetProperty(ref selectedItem, value);



public ICommand ItemTappedCommand get; set;

public FacilityViewModel()

FacilityDataStore facilityDataStore = new FacilityDataStore();
var items = facilityDataStore.GetList();
var groupList = new List<FacilitiesGroup>();
var group = new FacilitiesGroup()

Facilities = items.Where(x => x.IsSubscribed == true).ToList(),
Heading = "Subscribed"
;
var group2 = new FacilitiesGroup()

Facilities = items.Where(x => x.IsSubscribed == false).ToList(),
Heading = "Unsubscribed"
;
groupList.Add(group);
groupList.Add(group2);
FacilityList = new ObservableCollection<FacilitiesGroup>(groupList);



FacilityGroup Class code is :

public class FacilitiesGroup

public List<Facility> Facilities get; set;
public string Heading get; set;



And Facility class is :

public class Facility

[PrimaryKey, AutoIncrement]
public int ID get; set;

public string Name get; set;
public bool IsSubscribed get; set;
public string ImageName get; set;



I am binding data like :

public MainPage()

InitializeComponent();
BindingContext = new FacilityViewModel();



I don't understand what is wrong with my code. Any help will be appreciated.
Thanks.

2 Answers
2

Sorry for the delayed response. I found this sample, it might be helpful

Disclaimer: I am not observing ViewModel/Model boundaries very well. I am just trying to figure out what is not working. you need to update the ViewModels/Models per your requirements and design documents.

I don't think group header is what you are looking for. here is a link to the Xamarin documentation where it talks about header/footer and has an image

Let's start with the listview 1st. Remove the GroupHeaderTemplate and add GroupDisplayBinding attribute the to the listview.

<ListView ItemsSource="Binding FacilityList"
IsGroupingEnabled="true"
HasUnevenRows="True"
GroupDisplayBinding="Binding Heading" <---------
ItemTapped="OnItemTapped">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout>
<Image Source="Binding ImageName" HeightRequest="50" WidthRequest="50"/>
<Label Text="Binding Name" TextColor="Black" FontSize="Medium"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>


Once you make that change, if you run the app. you should see two items in the list. Subscribed/Unsubscribed. Progress!

Next, we need to change FacilitiesGroup Model. We need to extend ObservableCollection.

public class FacilitiesGroup : ObservableCollection<Facility>

public string Heading get; set;



Next, we need to make a change in the FacilityViewModel

public FacilityViewModel()

FacilityDataStore facilityDataStore = new FacilityDataStore();
var items = facilityDataStore.GetList();
var groupList = new List<FacilitiesGroup>();
var group = new FacilitiesGroup()

Heading = "Subscribed"
;

foreach( Facility facility in items.Where(x => x.IsSubscribed == true ) )

group.Add(facility);


var group2 = new FacilitiesGroup()

Heading = "Unsubscribed"
;

foreach( Facility facility in items.Where(x => x.IsSubscribed == false ) )

group2.Add(facility);


groupList.Add(group);
groupList.Add(group2);
FacilityList = new ObservableCollection<FacilitiesGroup>(groupList);



Hope that helps! Goodluck.

First, You did not mention which particular data is not binded. Anyways make sure that the list that you are binding should not be empty or null. Just try below code.

<ListView x:Name="FacilityListview"
IsGroupingEnabled="true" HasUnevenRows="True" ItemTapped="OnItemTapped">
<ListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell>
<Label Text="Binding Heading" TextColor="Black" FontSize="Medium" />
</ViewCell>
</DataTemplate>
</ListView.GroupHeaderTemplate>

<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout>
<Image Source="Binding ImageName" HeightRequest="50" WidthRequest="50"/>
<Label Text="Binding Name" TextColor="Black" FontSize="Medium"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>


Now assign the FacilityList as itemsSource below in the controller.

FacilityListview.ItemsSource = FacilityList;


Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy