Custom nested ListView in Xamarin.Forms

Question

I have to make custom ListView, it should look like this:

Header have to have image and text, then should be listed detail rows.

My basic datamodel looks

public class Workout
{
    public string Title { get; set; }

    public List<Excercise> Excercises { get; set; }
}

Excercises which are first lvl of list:

public class Excercise
{
    public string Image{ get; set; }

    public string Name { get; set; }

    public List<Series> Series { get; set; }
}

And then Series, last lvl of lists:

public class Series
{
    public uint Repeat { get; set; }

    public double Weight { get; set; }
}

I readed that nested ListViews are not recomended. I want to implement this using Grouping ListView, but how to manage custom header? Basicaly header has just one value, which is key, how to add image and style it?

Any recomendation?

Answer 1

On the grouped ListView, set the GroupHeaderTemplate property to a custom view.

<ListView ...>
  <ListView.GroupHeaderTemplate>
    <DataTemplate>
      <Grid ... />
    </DataTemplate>
  </ListView.GroupHeaderTemplate>
</ListView>