GroupDisplayBinding attribute causes the ListView.ItemTemplate to disappear

Question

I'm trying to implement a very simple ListView grouped by an Id value. In my page constructor I've something like this:

    public CheckApparatusProgressPage(CheckReport checkReport, Apparatus currentApparatus)
    {
        CurrentCheckReport = checkReport;
        CurrentApparatus = currentApparatus;
        InitializeComponent();
        Title = "Check";
        var itemsSource = App.RestClient.GetCheckReportOutcome(CurrentApparatus.Id).Result;
        GroupedView.ItemsSource = itemsSource;
    }

itemsSource is a List<ApparatusCheckStepOutcome> that class looks like this:

public class ApparatusCheckStepOutcome
{
    [JsonProperty("apparatusCheckStep")]
    public ApparatusCheckStep ApparatusCheckStep { set; get; }
    [JsonProperty("comment")]
    public string Comment { get; set; }
    [JsonProperty("createdAt")]
    public DateTime CreatedAt { get; set; }
    [JsonProperty("id")]
    public int Id { get; set; }
    [JsonProperty("passing")]
    public bool Passing { get; set; }
}

And the ApparatusCheckStep class looks like this:

public class ApparatusCheckStep
{
    [JsonProperty("category")]
    public string Category { get; set; }
    [JsonProperty("createdAt")]
    public DateTime CreatedAt { get; set; }
    [JsonProperty("description")]
    public string Description { get; set; }
    [JsonProperty("id")]
    public int Id { get; set; }
    [JsonProperty("name")]
    public string Name { get; set; }
    [JsonProperty("weight")]
    public int Weight { get; set; }
}

Basically I need to show in my group headers the value of {Binding ApparatusCheckStep.Id} and in the children within that group two Labels with {Binding ApparatusCheckStep.Name} and {Binding ApparatusCheckStep.Description} each one.

This is my XAML view:

<?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="HalliganTL.View.CheckApparatusProgressPage">
    <ContentPage.Content>
      <ListView x:Name="GroupedView" IsGroupingEnabled="True" GroupDisplayBinding="{Binding ApparatusCheckStep.Id}">
      <!-- Single Row Customization -->
      <ListView.ItemTemplate>
          <DataTemplate>
            <ViewCell>
              <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" >
                <Label Text="{Binding ApparatusCheckStep.Name}" FontSize="12" TextColor="White" />
                <Label Text="{Binding ApparatusCheckStep.Description}" FontSize="12" TextColor="White" />
              </StackLayout>
            </ViewCell>
          </DataTemplate>
        </ListView.ItemTemplate>
      </ListView>
    </ContentPage.Content>
</ContentPage>

I tried everything and I seached lot, if I remove the IsGroupingEnabled and GroupDisplayBinding attributes from the ListView I see all the "Name - Description" rows without any header grouping them. If I leave those attributes I only see the Id header rows, and the ListView.ItemTemplate seems to be totally ignored.

What I'm doing wrong? I want to keep this as simple as possible, that's why I'm trying to do most of the work with XAML, and I'd like to keep it that way.

Answer 1

when you use grouping, you need to have your ItemSource in a certain way - you essentially have to have one IEnumerable containing the groups, each of which in turn contains another IEnumerable containing the data for each group

Xamarin has a sample app that demonstrates how to do this; or there is another excellent example here (dead link, here's an archived version )