GroupDisplayBinding attribute causes the ListView.ItemTemplate to disappear

Issue

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.

Solution

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)

Answered By - Jason