Sample ListView IsGroupingEnabled

Hi @adospace I am having a hard time creating the ItemsSource for ListView with IsGroupingEnabled(true).

I understand that without grouping we return one ViewCell so the internal system can reuse the ViewCells. Why does IsGroupingEnabled also return a ViewCell?

Syntactically this works but I am confused as to what should ViewCell return?

new ListView()
                .IsGroupingEnabled(true)
                .ItemsSource(State.GroupedItems, RenderGroup)
                .HFill()
                .VFill()
:
:

private ViewCell RenderGroup(GroupedCollection<string, Contact> groupedContacts) => new ViewCell
{
};

I am trying to recreate the standard iOS grouped contact list:

[adospace]

Fixed in 1.0.128

[adospace]

Just pushed some fixes and enhancements for the ListView. I’ve added a sample page to the Test App project showing how to group list view items. If you need the Nuget package please wait a couple of hours.

class ListViewExtendedTestPageState
{
    public Person? SelectedPerson { get; set; }
}

class ListViewExtendedTestPage : Component<ListViewExtendedTestPageState>
{
    public override VisualNode Render()
    {
        return new ContentPage("ListView Extended Test (BETA)")
        {
            new ListView(MauiControls.ListViewCachingStrategy.RecycleElementAndDataTemplate)
                .IsGroupingEnabled(true)
                .ItemsSource<ListView, GroupOfPerson, Person>(GroupOfPerson.All, RenderGroup, RenderItem)
                .SeparatorVisibility(MauiControls.SeparatorVisibility.None)
                .OnItemSelected(OnSelectedItem)
                //NOTE: Header/Footer not working under .net 7
                //https://github.com/dotnet/maui/issues/13560
                //https://github.com/dotnet/maui/issues/12312
                //.Header(new Label("Header"))
                //.Footer(new Label("Footer"))
        };
    }

    private void OnSelectedItem(object? sender, SelectedItemChangedEventArgs args)
    {
        SetState(s => s.SelectedPerson = args.SelectedItem as Person);
    }

    private ViewCell RenderGroup(GroupOfPerson person)
    {
        return new ViewCell
        {
            new Label(person.Initial)
                .FontSize(14.0)
                .FontAttributes(MauiControls.FontAttributes.Bold)
                .Margin(5)
                .BackgroundColor(Colors.LightGray),
        };
    }

    private ViewCell RenderItem(Person person)
    {
        return new ViewCell
        {
            new Label($"{person.FirstName} {person.LastName}")
                .FontSize(14.0)
                .FontAttributes(MauiControls.FontAttributes.Bold)
                .Padding(5)
                .VerticalTextAlignment(TextAlignment.Center)
        };
    }
}