Maui Listview grouping

I have a list which consists of around 100 object. Each object has 2 properties (name, punch_time). The class is as follows:

public class Trxs
{
    public string punch_time { get; set; }
    public string name { get; set;}
}

the list name is (Punch_Times):

List<Trxs> Punch_times = new List<Trxs>();

It is a finger-print machine transactions. I want to populate a list view in Maui, so that the data will be grouped based on the name, as below:
It should show like this

I Tried the following grouping of the list, It showed the list grouped but without the group name. The listview name is (Trx_List):

var sorted = Punch_times.GroupBy(x => x.name)
    .Select(grp => grp.ToList())
    .ToList();
        
Trx_List.ItemsSource = sorted ;

the result showed like this (the group names are empty):

But it is showing like this

I have created a class to represent to new list, which will be the item source of the Trx_List as follows:

public class Grouped_list
{
    public string emp_name { get; set; }
    public List<Trxs> trxes { get; set; }
}

And created a new list:

List<Grouped_list> new_list = new List<Grouped_list>();

but how to copy the items from (sorted) to (new_list). Or is it needed? how to make item source of the list view grouped by name?

Any help please!

Thank you

To be frank, I recommend to use CollectionView instead of ListView. There is a known issue about iOS GroupHeaderTemplate :ListView GroupHeaderTemplate produces blank headers on iOS and MacCatalyst. It just render a blank headers. That's why i recommend to use CollectionView. The usage is almost the same. You could refer to Display grouped data in a CollectionView.

For your case, how to reflect sorted to new_list really matters. I made a small demo following the official documentation based on your code.

For MainPageViewModel.cs,

public class MainPageViewModel
{
    public List<Trxs> Punch_times { get; set; } = new List<Trxs>();
    public List<Grouped_list> new_list { get; set; } = new List<Grouped_list>();
    public MainPageViewModel()
    {
        //Add some data for test
        Punch_times.Add(new Trxs
        {
            name = "John",
            punch_time = "13:33"
        });
       ......
       // translate list to dict (key is name)
        var dict = Punch_times.GroupBy(o => o.name)
                   .ToDictionary(g => g.Key, g => g.ToList());

        foreach (KeyValuePair<string, List<Trxs>> item in dict)
        {
            new_list.Add(new Grouped_list(item.Key,new List<Trxs>(item.Value)));
        }
    }
}

For Grouped_list.cs,

public class Grouped_list : List<Trxs>
{
    public string Name { get; set; }


    public Grouped_list(string name, List<Trxs> trxs) : base(trxs)
    {
        Name = name;
    }
}

For MainPage.xaml which consumes the ListView or CollectionView,

<CollectionView ItemsSource="{Binding new_list}" 
      IsGrouped="True">
        <CollectionView.GroupHeaderTemplate>
            <DataTemplate>
                <StackLayout>
                    <Label Text="{Binding Name}" TextColor="Black" VerticalOptions="CenterAndExpand"

                           BackgroundColor="LightGray"
                           FontSize="20"
                           FontAttributes="Bold" />
                </StackLayout>
            </DataTemplate>
        </CollectionView.GroupHeaderTemplate>
    <CollectionView.ItemTemplate>
        <DataTemplate>
                <StackLayout>
                    <Label Text="{Binding punch_time}" BackgroundColor="Yellow"
                           FontSize="20" HorizontalTextAlignment="Center"
                           VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"/>                                               
                </StackLayout>                 
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

or you may use ListView but not render correctly on iOS as i mention above.

<ListView ItemsSource="{Binding new_list}" 
      IsGroupingEnabled="True">
        <ListView.GroupHeaderTemplate>
            <DataTemplate>
                <ViewCell>
                    <Label Text="{Binding Name}" TextColor="Black" VerticalOptions="CenterAndExpand"

                           BackgroundColor="LightGray"
                           FontSize="20"
                           FontAttributes="Bold" />
                </ViewCell>
            </DataTemplate>
        </ListView.GroupHeaderTemplate>
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout>
                    <Label Text="{Binding punch_time}" BackgroundColor="Yellow"
                           FontSize="20" HorizontalTextAlignment="Center"
                           VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"/>                                               
                </StackLayout>                 
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

For more info, you could refer to ListView : Display grouped data and Display grouped data in a CollectionView

Hope it works for you.

public class Grouped_list : List<Trxs>
{
    public string emp_name { get; set; }

    public Grouped_list(string name, List<Trxs> list) : base(list)
    {
        emp_name = name;
    }
}

You need something like that.

And then your observable is:

public ObservableCollection<Grouped_list> GroupedLists...

Set it as ItemSource, and don't forget to set IsGrouped to true.

In the GroupHeaderTemplate there should be binding to emp_name.
And its DataType should be Grouped_list.

Also, It is EmpName, not emp_name. And GroupedList not Grouped_list.
Follow the naming conventions.