WinUI3 : Add contents during runtime to ListView during scroll

Question

Hi,

I am working on WinUI 3 desktop application in C++. I was trying to achieve an experience where when we scroll ListView, we will add rows to end of the listviews dropdown during runtime.

I was not able to get any scroll based events in ListView directly, so I extracted the ScrollViewer from the list view and handled ViewChanged event. This event was fired when scroll happened. But i was not able to get how many rows were scrolled or currently which row is been scrolled.

I want to get how many rows are scrolled so that I can insert enough number of rows to the end of the ListViews Item Source. It would be of great help if you could help me with this.

Thank You

Answer 1

Hi I have tried implementing this Incrementing loading option, but it is causing the GetPagedItemsAsync() multiple time at once and causes the list view to load entire items at once.

This is my IncrementalSourceClass

public class CourseIncrementalSource : IIncrementalSource<Course>
    {
        public CourseIncrementalSource() { }

        public async Task<IEnumerable<Course>> GetPagedItemsAsync(int pageIndex, int pageSize, CancellationToken cancellationToken = default)
        {
            List<Course> items = new List<Course>();
            
            // Establish a connection to the MySQL database
            string connectionString = GlobalDatabaseConfiguration.Url;
            using (MySqlConnection connection = new MySqlConnection(connectionString))
            {
                await connection.OpenAsync();

                // Create a MySQL command to retrieve the items
                MySqlCommand command = connection.CreateCommand();
                command.CommandText = "SELECT * FROM courses ORDER BY id LIMIT @startIndex, @pageSize";
                command.Parameters.AddWithValue("@startIndex", pageIndex * pageSize);
                command.Parameters.AddWithValue("@pageSize", pageSize);

                // Execute the command and retrieve the data
                using (MySqlDataReader reader = (MySqlDataReader)await command.ExecuteReaderAsync())
                {
                    while (await reader.ReadAsync())
                    {
                        // Map the data to a MyDataItem object
                        Course item = new Course();
                        item.Id = reader.GetInt32(0);
                        item.Name = reader.GetString("name");

                        items.Add(item);
                    }
                }
            }
            return items;
        }
    }

Does anybody have any idea about it. i searched through internet, but no sample codes seems to be available.

Answer 2

Hello,

Welcome to Microsoft Q&A!

As I might have 100,000 results to fit in a list view, I only want to show a limited number of contents in the list view, then as the user scrolls I'll add more contents to the list view.

Please take a look at the Incremental Loading Collection Helpers from community toolkit. It implements such a feature that items can be loaded incrementally when user scrolls a ListView or a GridView. You don't need to know how many rows the user scrolls, but just add some items every the customer scorlls to the end. The amount of the items could be defined by yourself.

To use the Incremental Loading Collection, you could follow these steps.

1. In Solution Explorer panel, right click on your project name and select Manage NuGet Packages. Search for CommunityToolkit.WinUI
2. Add reference in the code behind by adding using CommunityToolkit.Common.Collections; and using CommunityToolkit.WinUI;
3. Create a class which implement the IIncrementalSource<YourModel> interface.
4. Create the IncrementalLoadingCollection object with the IncrementalSource class and your model class.
5. Set the IncrementalLoadingCollection object as the source of your ListView

Here is the code which I wirte for a simple demo. Please note, the code is written in C#, you will need to convert it to c++

Xaml:

 <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
        <ListView x:Name="MyListView">
            <ListView.ItemTemplate>
                <DataTemplate x:DataType="local:TestModel">
                    <TextBlock Text="{x:Bind ID}"/>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackPanel>

Code-behind

 public sealed partial class MainWindow : Window
    {
        public MainWindow()
        {
            this.InitializeComponent();

            //create a collection as the source for the listview
            //set items per page to 15, the default is 20
            var collection = new IncrementalLoadingCollection<ModelSource, TestModel>(15,null,null,null);
            
            MyListView.ItemsSource = collection;
        }

     
    }

    public class ModelSource : IIncrementalSource<TestModel>
    {
        private readonly List<TestModel> modelList;

        public ModelSource()
        {
            // Creates an example collection.
            modelList = new List<TestModel>();
            
            for (int i = 1; i <= 800; i++)
            {
                var p = new TestModel { ID = i };
                modelList.Add(p);
            }
        }

        public async Task<IEnumerable<TestModel>> GetPagedItemsAsync(int pageIndex, int pageSize, CancellationToken cancellationToken = default)
        {
            // Gets items from the collection according to pageIndex and pageSize parameters.
            var result = (from p in modelList
                          select p).Skip(pageIndex * pageSize).Take(pageSize);

            // Simulates a longer request...
            await Task.Delay(1000);

            return result;
        }
    }

    public class TestModel
    {
        public int ID { get; set; }
    }

Thank you.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment". Note: Please follow the steps in our [documentation][2] to enable e-mail notifications if you want to receive the related email notification for this thread.