使用分页在网格视图中显示图像

Question

我有一个带有增量加载的网格视图，可以显示本地文件夹中的书籍封面。

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>

代码：

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; }
}

我想先把18本书的封面放在格里看。然后，如果用户滚动，它将显示下一个18本书的封面，依此类推，直到所有的封面都显示在gridview中。如何应用它？

Answer 1

如果需要控制每次加载的源的大小。您只需要在创建IncrementalLoadingCollection时将itemsPerPage参数设置为18即可。

像这样：

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

然后可以在GetPagedItemsAsync方法中放置一个断点，并检查pageSize参数。你会看到它是18你想要的。