How to use Incremental Loading Collection with CollectionViewSource to group list view items in UWP?

Issue

I followed up this example of IncrementalLoadingCollection and created an app with Incremental Loading Collection (Infinite scrolling).

XAML:

<ListView x:Name="PeopleListView">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="local:Person">
            <TextBlock Text="{x:Bind Name}" />
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

C#:

public class Person
{
    public string Name { get; set; }
}

public class PeopleSource : IIncrementalSource<Person>
{
    private readonly List<Person> people;

    public PeopleSource()
    {
        // Populate people
        ...
    }
    public async Task<IEnumerable<Person>> GetPagedItemsAsync(int pageIndex, int pageSize)
    {
        // Gets and returns items from the collection according to pageIndex and pageSize parameters
        ...
    }
}    

var collection = new IncrementalLoadingCollection<PeopleSource, Person>();
PeopleListView.ItemsSource = collection;

But now I also need to group the items, for example, group by length of the name.
Separately, using this example of CollectionViewSource, I created an example that what I expected to have:

XAML:

<Grid.Resources>
    <CollectionViewSource x:Name="groupInfoCVS" IsSourceGrouped="true" />
</Grid.Resources>
<ListView x:Name="PeopleListView" ItemsSource="{Binding Source={StaticResource groupInfoCVS}}">
    ...
</ListView>

C#:

public string Name { get; set; }

// Populate people
...

var result =
from t in people
group t by t.Name.Length into g
orderby g.Key
select g;

groupInfoCVS.Source = result;

The problem is that I need to use Incremental Loading and group the items, I can’t find a way to use IncrementalLoadingCollection with CollectionViewSource.
Does anyone know how to do this or can suggest a solution?
Grateful.

Solution

How to use Incremental Loading Collection with CollectionViewSource to group list view items in UWP?

I have to say, IncrementalLoadingCollection does not work for CollectionViewSource. Both of the them work that need to be set as ListView’s ItemsSource directly. Because they need to detect listview Interaction.

So for your requirement, we suggest listen listview ViewChanged and add more item manually.

For example

private void PeopleListView_Loaded(object sender, RoutedEventArgs e)
{
    if (!(PeopleListView.ItemsPanelRoot is ItemsStackPanel itemsStackPanel)) return;
    var _itemsStackPanel = itemsStackPanel;
    var _scrollViewer = MyFindDataGridChildOfType<ScrollViewer>(PeopleListView);
    // This event handler loads more items when scrolling.
    _scrollViewer.ViewChanged += (o, eventArgs) =>
    {
        if (eventArgs.IsIntermediate) return;
        double distanceFromBottom = itemsStackPanel.ActualHeight - _scrollViewer.VerticalOffset - _scrollViewer.ActualHeight;
        if (distanceFromBottom < 10) // 10 is an arbitrary number
        {
            for (int i = 1; i <= 50; i++)
            {
                var p = new Person { Name = "Person " + i };
                _people.Add(p);
                var result =
                            from t in _people
                            group t by t.Name.Length into g
                            orderby g.Key
                            select g;

                groupInfoCVS.Source = result;
                PeopleListView.ItemsSource = groupInfoCVS.View;
            }
        }
    };
}

Answered By – Nico Zhu – MSFT

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0