Incremental Loading Behavior for ItemsView

[Poker-sang]

Description

The new control ItemsView which can replace ListView&GridView, does not support ISupportIncrementalLoading. So, we can do this with a new behavior. When the ScrollView's view changes, the behavior try to raise LoadMoreItemsAsync if needed.

New APIs

classDiagram
class IncrementalLoadingBehavior {
    bool IsActive
    bool IsLoadingMore
    double LoadingOffset
    int LoadCount
    event LoadMoreRequested
    TryRaiseLoadMoreRequestedAsync()
}

Loading

Core Method

public async Task TryRaiseLoadMoreRequestedAsync()
{
    var loadMore = true;
    // Load more until there are new items
    while (loadMore)
    {
        if (!CanLoadMore || IsLoadingMore)
            return;

        // Fire LoadMoreRequested only if the ScrollView is not filled
        switch (ScrollView.ComputedVerticalScrollMode, ScrollView.ComputedHorizontalScrollMode, ScrollView.VerticalScrollMode, ScrollView.HorizontalScrollMode)
        {
            case (ScrollingScrollMode.Disabled, ScrollingScrollMode.Disabled, not ScrollingScrollMode.Disabled, not ScrollingScrollMode.Disabled):
            case (ScrollingScrollMode.Enabled, ScrollingScrollMode.Disabled, _, not ScrollingScrollMode.Disabled)
                when ScrollView.ScrollableHeight - LoadingOffset < ScrollView.VerticalOffset:
            case (ScrollingScrollMode.Disabled, ScrollingScrollMode.Enabled, not ScrollingScrollMode.Disabled, _)
                when ScrollView.ScrollableWidth - LoadingOffset < ScrollView.HorizontalOffset:
            case (ScrollingScrollMode.Enabled, ScrollingScrollMode.Enabled, _, _)
                when ScrollView.ScrollableHeight - LoadingOffset < ScrollView.VerticalOffset
                     || ScrollView.ScrollableWidth - LoadingOffset < ScrollView.HorizontalOffset:
            {
                IsLoadingMore = true;
                var before = GetItemsCount();
                if (await LoadMoreRequested(this, EventArgs.Empty))
                {
                    var after = GetItemsCount();
                    // This can be set to the number of elements in a row,
                    // so that it can continue to load even if too few elements are loaded.
                    var loadMoreThreshold = LoadCount / 2;
                    if (before + loadMoreThreshold < after)
                        loadMore = false;
                }
                else
                    loadMore = false;
                IsLoadingMore = false;
                break;
            }
            // Stop loading if the ScrollView is filled
            default:
                loadMore = false;
                break;
        }
    }
}

[hippieZhou]

based on this idea, I have created a custom Behavior in my side project, Currently, it's LGTM.

public class IncrementalLoadingBehavior : Behavior<ItemsView>
{
    private ScrollViewer? scrollViewer;

    public static readonly DependencyProperty LoadMoreItemsCommandProperty =
     DependencyProperty.Register(nameof(LoadMoreItemsCommand), typeof(ICommand), typeof(IncrementalLoadingBehavior), new PropertyMetadata(null));

    public ICommand LoadMoreItemsCommand
    {
        get => (ICommand)GetValue(LoadMoreItemsCommandProperty);
        set => SetValue(LoadMoreItemsCommandProperty, value);
    }

    protected override void OnAttached()
    {
        base.OnAttached();
        AssociatedObject.Loaded += OnLoaded;
    }

    protected override void OnDetaching()
    {
        base.OnDetaching();
        AssociatedObject.Loaded -= OnLoaded;
        if (scrollViewer != null)
        {
            scrollViewer.ViewChanged -= OnViewChanged;
        }
    }

    private void OnLoaded(object sender, RoutedEventArgs e)
    {
         scrollViewer = AssociatedObject.FindAscendant<ScrollViewer>();
        if (scrollViewer != null)
        {
            scrollViewer.ViewChanged += OnViewChanged;
        }
    }

    private void OnViewChanged(object? sender, ScrollViewerViewChangedEventArgs e)
    {
        if (scrollViewer != null &&
                scrollViewer.VerticalOffset >= scrollViewer.ScrollableHeight - 100) 
        {
            LoadMoreItemsCommand?.Execute(null);
        }
    }
}

[Poker-sang]

Does your code work correctly? In my case with WinUI3, the ItemsView contains a ScrollView instead of a ScrollViewer🤔

Yet the rest of it looks great

[hippieZhou]

this code works well in my project currently. my latest WinUI SDK version is 1.6.240701003-experimental2. here is my sample code:

<ScrollViewer VerticalScrollBarVisibility="Auto" VerticalScrollMode="Auto">
<ItemsView
    IsItemInvokedEnabled="True"
    ItemTemplate="{StaticResource TopicItemViewTemplate}"
    ItemsSource="{x:Bind ViewModel.TopicLists, Mode=OneWay}"
    SelectionMode="None">
    <i:Interaction.Behaviors>
        <helpers:IncrementalLoadingBehavior LoadMoreItemsCommand="{x:Bind ViewModel.LoadMoreItemsCommand}" />
    </i:Interaction.Behaviors>
    <ItemsView.Layout>
        <UniformGridLayout
            ItemsStretch="Fill"
            MinColumnSpacing="12"
            MinItemHeight="90"
            MinItemWidth="360"
            MinRowSpacing="12" />
    </ItemsView.Layout>
</ItemsView>
<ScrollViewer/>

[Poker-sang]

Oh, that does work in that case. But it looks like you're nesting a ScrollView inside a ScrollViewer (since the ItemsView comes with a ScrollView inside)

[Arlodotexe]

@Poker-sang You may be looking for something like the AdvancedCollectionView in the Collections component, which enables incremental loading for any control that can bind to an ObservableCollection<T>.

[Poker-sang]

No I don't think that's the case. ItemsRepeater or ItemsView doesn't trigger the ItemsSource's LoadMoreItemsAsync when scrolling to the bottom. so I propose this new Behavior to support ISupportIncrementalLoading

[Poker-sang]

@Arlodotexe I wrote a sample to explain my thought:

As this gif shows. This behavior is intended to give the ItemsView control a continuous loading feature similar to ListView. Where the ItemsView can automatically trigger an incremental loading or other event you want when the view scrolls to the bottom.

Since ItemsView.ItemsSource does not support the ISupportIncrementalLoading interface, I wrote this Behavior to implement this.

[Poker-sang]

I would have just PR this feature, but I couldn't figure out how to add a new project🥺

[ghost1372]

You need tooling submodule

First clone repo with submodule

git clone --recurse-submodules https://github.com/CommunityToolkit/Labs-Windows.git

Then follow this:

https://github.com/CommunityToolkit/Labs-Windows#adding-a-new-experiment

[Poker-sang]

Thanks, I tried this. But looks like ItemsView is only supported in WinUI3. Can I excludes uwp?

[ghost1372]

Thanks, I tried this. But looks like ItemsView is only supported in WinUI3. Can I excludes uwp?

If you need only winui 3, use preprocessor

#if WINDOWS_WINAPPSDK && !HAS_UNO

And if you need to use uwp

#if WINDOWS_UWP && !HAS_UNO