使用增量加载在gridview中显示图像

Question

我有一个gridview，在本地包上显示435个图像。我尝试使用增量加载。

XAML:

<GridView  
x:Name="komikGridView" Loaded="komikGridView_Loaded">
<GridView.Resources>
<DataTemplate x:Key="DataTemplatekomikGridView">
<Grid
x:Name="komikGrid1">
<Image
x:Name="cover
Width="160"
Height="235"
Source="{Binding Image}" />
</Grid>
</DataTemplate>
</GridView.Resources>
<GridView.ItemTemplate>
<StaticResource ResourceKey="DataTemplatekomikGridView"/>
</GridView.ItemTemplate>
</GridView>

ItemsToShow类:

public class ItemsToShow : ObservableCollection<string>, ISupportIncrementalLoading
{
public int lastItem = 1;
public bool HasMoreItems
{
get
{
if (lastItem == 1000)
{
return false;
}
else
{
return true;
}
}
}
public IAsyncOperation<LoadMoreItemsResult> LoadMoreItemsAsync(uint count)
{
ProgressRing progressRing = ((Window.Current.Content as Frame).Content as LibraryPage).loading;
CoreDispatcher coreDispatcher = Window.Current.Dispatcher;
return Task.Run<LoadMoreItemsResult>(async () =>
{
await coreDispatcher.RunAsync(CoreDispatcherPriority.Normal,
() =>
{
progressRing.IsActive = true;
progressRing.Visibility = Visibility.Visible;
});
//List<string> items = new List<string>();
List<Book> items = new List<Book>();
StorageFolder installedLocation = ApplicationData.Current.LocalFolder;
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(); //which returns List<StorageFile>
                   //Debug.WriteLine("pdf: " + _pdffolder.Path);
StorageFolder library = await installedLocation.CreateFolderAsync("library", CreationCollisionOption.OpenIfExists);
StorageFolder komik = await library.CreateFolderAsync("komik", CreationCollisionOption.OpenIfExists);
IReadOnlyList<StorageFile> files = await komik.GetFilesAsync();
IEnumerable<Temp> sortingFiles = files.Select(x => new Temp { File = x }).ToList();
foreach (var item in sortingFiles)
{
//item.LastModified = (await item.File.GetBasicPropertiesAsync()).DateModified.DateTime;
item.Name = item.File.Name;
}
IEnumerable<StorageFile> sortedfiles = sortingFiles.OrderByDescending(x => x.LastModified).Select(x => x.File).ToList();
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 installedLocation.CreateFolderAsync("thumb", CreationCollisionOption.OpenIfExists);
StorageFolder komikthumb = await thumbfolder.CreateFolderAsync("komik", CreationCollisionOption.OpenIfExists);
IReadOnlyList<StorageFile> thumbfiles = await komikthumb.GetFilesAsync();
string filePath = "";
foreach (StorageFile file in sortedfiles)
{
Book book = new Book();
//FileItem book = new FileItem();
book.Name = file.DisplayName.ToString();
Debug.WriteLine("judul: " + book.Name);
StorageFile thumbFile = await komikthumb.GetFileAsync(file.Name.ToString() + ".png");
string path = komikthumb.Path;
filePath = Path.Combine(path, file.Name.ToString() + ".png");
BitmapImage bi = new BitmapImage();
bi.SetSource(await thumbFile.OpenAsync(FileAccessMode.Read));
book.Image = bi;
for (int i = 0; i < count; i++)
{
var p = new Book { Name = book.Name, Image = book.Image };
items.Add(p);
lastItem++;
if (lastItem == items.Count)
{
break;
}
}
Debug.WriteLine("jumlah: " + items.Count);
}
await coreDispatcher.RunAsync(CoreDispatcherPriority.Normal,
() =>
{
foreach (Book item in items)
{
//this.Add(item);
string _b64 = Convert.ToBase64String(File.ReadAllBytes(item.Path));
this.Add(_b64);
}
progressRing.Visibility = Visibility.Collapsed;
progressRing.IsActive = false;
});
return new LoadMoreItemsResult() { Count = count };
}).AsAsyncOperation<LoadMoreItemsResult>();
}
public class Temp
{
public StorageFile File { get; set; }
public DateTime LastModified { get; set; }
public string Name { get; set; }
}
}

代码:

private void komikGridView_Loaded(object sender, RoutedEventArgs e)
{
komikGridView.ItemsSource = new ItemsToShow();
}

但我有一个问题，即图像不成功显示在网格视图。如何处理?以及如何显示16张图片，当滚动将显示下一个16张图片等等?

Answer 1

使用增量加载在gridview中显示图像

我发现你参考这个案例回复，但对于这种情况，你需要用ObservableCollection<Book>替换ObservableCollection<string>，因为你已经绑定了Book图像属性的图像控制。

<Image x:Name="cover"  Width="160"  Height="235" Source="{Binding Image}" />

其次，您需要调用Add方法来添加Book实例，但不是base64字符串。因为图像控件不能直接渲染base64。

await coreDispatcher.RunAsync(CoreDispatcherPriority.Normal,
() =>
{
foreach (Book item in items)
{
this.Add(item);
}    
});

当你完成上面的操作后，你可以在this.Add(item);行设置断点来检查它是否有可用的项目。

请尝试像下面这样手动调用LoadMoreItemsAsync。

private async void KomikContent()
{
var items = new ItemsToShow();
komikGridView.ItemsSource = items;
await items.LoadMoreItemsAsync(10);
}

更新1

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

await coreDispatcher.RunAsync(CoreDispatcherPriority.Normal,
async () =>
{
book.Image = thumbFile.Path;
Add(book);
});

更新2

如果你想为gridview创建多个页面，这个文档是最好的实践，你可以引用它来创建你自己的BookSource类并在其中初始化数据。

private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
var booksource = new BookSource();
collection = new IncrementalLoadingCollection<BookSource,Book>(booksource, 35);
komikGridView.ItemsSource = collection;

}