Displaying images in gridview using paging

Question

I have a gridview with incremental loading that displays book covers from a local folder.

XAML:

<GridView  
    x:Name="komikGridView" 
        DataFetchSize="18" 
        IncrementalLoadingTrigger="Edge" 
        IncrementalLoadingThreshold="1" 
        HorizontalAlignment="Stretch"
        VerticalAlignment="Stretch">
        <GridView.Resources>
            <DataTemplate x:Key="DataTemplatekomikGridView">
                    <Grid
                            x:Name="komikGrid1"
                                Margin="5,5,0,0"
                                Width="145"
                                Height="255"
                                Background="White">
                                <Image
                                    x:Name="cover"
                                        Width="145"
                                        Height="210"
                                        VerticalAlignment="Top"
                                        Source="{Binding Image}"
                                        Stretch="Fill" />
            </Grid>
        </DataTemplate>
    </GridView.Resources>
    <GridView.ItemTemplate>
        <StaticResource ResourceKey="DataTemplatekomikGridView"/>
    </GridView.ItemTemplate>
</GridView>

Code:

    var booksource = new BookSource();
            var collection = new IncrementalLoadingCollection<BookSource, Book>(booksource, 18);
            try
            {
                await collection.LoadMoreItemsAsync(0);
            }
 komikGridView.ItemsSource = collection;

Books.cs:

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

        public string Judul { get; set; }

        public string Image { get; set; }
    }

    public class BookSource : IIncrementalSource<Book>
    {
        public List<Book> _books;

        public BookSource()
        {
            _books = new List<Book>();
        }

        IReadOnlyList<StorageFile> files;
        IReadOnlyList<StorageFile> thumbfiles;
        StorageFolder kategorithumb;
        StorageFolder kategori;
        StorageFolder localfolder = ApplicationData.Current.LocalFolder;

        public async Task<List<Book>> CopyResource()
        {
            await Task.Run(async () =>
            {
                StorageFolder _pdffolder = Windows.ApplicationModel.Package.Current.InstalledLocation;
                _pdffolder = await _pdffolder.GetFolderAsync("files");
                _pdffolder = await _pdffolder.GetFolderAsync("pdf");
                _pdffolder = await _pdffolder.GetFolderAsync("komik");
                IReadOnlyList<StorageFile> _pdffiles = await _pdffolder.GetFilesAsync();
                StorageFolder library = await localfolder.CreateFolderAsync("library", CreationCollisionOption.OpenIfExists);
                kategori = await library.CreateFolderAsync("komik", CreationCollisionOption.OpenIfExists);
                files = await kategori.GetFilesAsync();
                if (((App)(App.Current)).FolderName == "komik" && files.Count == 0)
                {
                    foreach (var item in _pdffiles)
                    {
                        await item.CopyAsync(kategori, item.Name, NameCollisionOption.ReplaceExisting);
                    }
                    files = await kategori.GetFilesAsync();
                }
                StorageFolder _thumbfolder = Windows.ApplicationModel.Package.Current.InstalledLocation;
                _thumbfolder = await _thumbfolder.GetFolderAsync("files");
                _thumbfolder = await _thumbfolder.GetFolderAsync("cover");
                _thumbfolder = await _thumbfolder.GetFolderAsync("komik");
                IReadOnlyList<StorageFile> _coverfiles = await _thumbfolder.GetFilesAsync(); //which returns List<StorageFile>
                StorageFolder thumbfolder = await localfolder.CreateFolderAsync("thumb", CreationCollisionOption.OpenIfExists);
                kategorithumb = await thumbfolder.CreateFolderAsync("komik", CreationCollisionOption.OpenIfExists);
                thumbfiles = await kategorithumb.GetFilesAsync();
                if (((App)(App.Current)).FolderName == "komik" && thumbfiles.Count == 0)
                {
                    foreach (var item in _coverfiles)
                    {
                        await item.CopyAsync(kategorithumb, item.Name, NameCollisionOption.ReplaceExisting);
                    }
                }
            });
            IEnumerable<Temp> sortingFiles = files.Select(x => new Temp { File = x }).ToList();
            IEnumerable<StorageFile> sortedfiles = sortingFiles.OrderByDescending(x => x.LastModified).Select(x => x.File).ToList();
            var books = new List<Book>();
            string filePath = "";
            foreach (StorageFile file in sortedfiles)
            {
                Book book = new Book();
                StorageFile thumbFile = await kategorithumb.GetFileAsync(file.Name.ToString() + ".png");
                string path = kategorithumb.Path;
                filePath = Path.Combine(path, file.Name.ToString() + ".png");
                book.Name = file.DisplayName.ToString();
                book.Image = thumbFile.Path;
                await Window.Current.CoreWindow.Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, () =>
                {
                    books.Add(book);
                });
            }
            return books;
        }

        private ProgressRing progressRing = ((Window.Current.Content as Frame).Content as LibraryPage).loading;
        public async Task<IEnumerable<Book>> GetPagedItemsAsync(int pageIndex, int pageSize, CancellationToken cancellationToken = default(CancellationToken))
        {
            progressRing.Visibility = Visibility.Visible;
            progressRing.IsActive = true;
            if (_books.Count == 0)
            {
                foreach (var item in await CopyResource())
                {
                    _books.Add(item);
                }
            }
            var result = (from p in _books
                          select p).Skip(pageIndex * pageSize).Take(pageSize);
            await Task.Delay(1000);
            progressRing.Visibility = Visibility.Collapsed;
            progressRing.IsActive = false;
            return result;
        }
        public class Temp
        {
            public StorageFile File { get; set; }
            public string Name { get; set; }
        }

I want to display 18 book covers first in gridview. Then if the user scrolls, it will display the next 18 book covers, and so on until all the book covers are displayed in gridview. How to apply it?

Answer 1

If you need to control the size of the source that is loaded every time. What you need is just set the itemsPerPage argument when you create the IncrementalLoadingCollection as 18.

Like this:

  collection = new IncrementalLoadingCollection<NamedColorSource, NamedColor>(18);

Then you could put a break point in the GetPagedItemsAsync method and check the pageSize parameter. You will see it is 18 as you want.