WPF实现动态加载图片浏览器
在做图片浏览器程序时，遇到图片数量巨大的情况（如几百张、上千张），一次性加载所有图片会导致界面卡顿甚至程序崩溃。
本文介绍一种 WPF + Prism 实现动态分页加载图片的方法，结合 ScrollViewer 滚动条触底检测，实现 “边滚动，边加载” 的流畅体验。
1. 界面设计：4×4 显示 + 滚动条
我们希望界面每次显示 4×4，共 16 张图片，每张图片带有边框。
XAML示例
<ScrollViewer VerticalScrollBarVisibility="Auto" ScrollChanged="ScrollViewer_ScrollChanged">
<ItemsControl ItemsSource="{Binding Images}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="4"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Gray" BorderThickness="1" Margin="5">
<Image Source="{Binding}" Stretch="Uniform"/>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>ScrollViewer 包裹 ItemsControl，开启垂直滚动。
使用 UniformGrid 布局，4列均匀分布。
每张图片用 Border 包一层，美观且清晰分隔。
2. 后台逻辑：ViewModel 分页加载
ViewModel 负责管理图片列表和分页逻辑。
public class ImageBrowserViewModel : BindableBase
{
private const int PageSize = 16;
private readonly List<string> allImagePaths = new();
public ObservableCollection<BitmapImage> Images { get; } = new();
private int currentPage = 0;
public bool IsLoading { get; private set; }
public void LoadAllImagePaths(string folderPath)
{
allImagePaths.Clear();
var extensions = new[] { ".jpg", ".png", ".bmp" };
var files = Directory.GetFiles(folderPath)
.Where(f => extensions.Contains(Path.GetExtension(f).ToLower()))
.ToList();
allImagePaths.AddRange(files);
currentPage = 0;
Images.Clear();
}
public async Task LoadNextPageAsync()
{
if (IsLoading) return;
IsLoading = true;
var nextImages = allImagePaths
.Skip(currentPage * PageSize)
.Take(PageSize)
.ToList();
foreach (var path in nextImages)
{
await Task.Run(() =>
{
var bitmap = new BitmapImage();
bitmap.BeginInit();
bitmap.CacheOption = BitmapCacheOption.OnLoad;
bitmap.UriSource = new Uri(path);
bitmap.EndInit();
bitmap.Freeze();
App.Current.Dispatcher.Invoke(() => Images.Add(bitmap));
});
}
currentPage++;
IsLoading = false;
}
}
- LoadAllImagePaths：一次性记录所有图片路径，但不立刻加载图片内容。
- LoadNextPageAsync：每次按页加载图片，使用 Task.Run + Dispatcher.Invoke，避免界面卡顿。
这段代码的作用是从 allImagePaths 列表中取出当前页面所需的图片路径，并将它们存储到 nextImages 列表中。以下是逐行解释：
代码片段
var nextImages = allImagePaths
.Skip(currentPage * PageSize)
.Take(PageSize)
.ToList();
逐行解释
1. var nextImages:
声明一个变量 nextImages，用于存储当前页面所需的图片路径列表。
2. allImagePaths:
这是一个包含所有图片路径的列表，类型为 List<string>。
3. .Skip(currentPage * PageSize):
- currentPage 是当前页面的索引，从 0 开始。
- PageSize 是每页显示的图片数量，这里定义为 16。
- currentPage * PageSize 计算出当前页面之前的所有图片路径的数量。
- .Skip(currentPage * PageSize) 跳过这些路径，即跳过当前页面之前的所有图片路径。
4. .Take(PageSize):
从跳过后的路径中取出 PageSize 个路径，即取出当前页面所需的图片路径。
5. .ToList():
将取出的路径转换为一个新的列表，并赋值给 nextImages。
总结
这段代码的作用是从 allImagePaths 中取出当前页面所需的图片路径，并将它们存储到 nextImages 列表中。具体来说，它跳过了当前页面之前的所有图片路径，然后取出当前页面所需的图片路径数量（PageSize 个），并将这些路径存储到 nextImages 列表中。
3. 滚动到底时加载新图片
在 ScrollViewer 的 ScrollChanged 事件中，检测是否接近底部，如果是则请求 ViewModel 加载下一页：
private async void ScrollViewer_ScrollChanged(object sender, ScrollChangedEventArgs e)
{
var scrollViewer = (ScrollViewer)sender;
if (scrollViewer.VerticalOffset + scrollViewer.ViewportHeight
>= scrollViewer.ExtentHeight - 50) // 接近底部50像素
{
if (DataContext is ImageBrowserViewModel vm && !vm.IsLoading)
{
await vm.LoadNextPageAsync();
}
}
}
ExtentHeight 是总高度，ViewportHeight 是当前可视区域高度，VerticalOffset 是当前滚动位置。
当滚动接近底部 50px 内，就触发加载。
4. 总结
通过以上方法，我们实现了：
- 初始只加载少量图片，快速打开界面。
- 用户滚动时，按需分页加载后续图片。
- 界面不卡顿，体验丝滑流畅。
这种设计特别适合处理大量图片浏览、视频帧查看、缩略图管理器等场景。
到此这篇关于WPF实现动态加载图片浏览器的文章就介绍到这了,更多相关WPF图片浏览器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要给大家介绍了关于C#设计模式之职责链模式的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
这篇文章主要介绍了C# 10个常用特性，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下2020-07-07
这篇文章主要介绍了C# WPF上位机实现和下位机TCP通讯的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
这篇文章主要介绍了C#调用Java方法实例详解的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-07-07
同为微软的产品，本文将讨论的是C#如何创建Access数据库，同时创建数据库密码与相关操作，希望对大家有所帮助。2015-09-09
这篇文章主要介绍了C#将jpg转换为pdf的方法,主要通过itextsharp.dll文件实现,是非常实用的技巧,需要的朋友可以参考下2014-10-10
Task是建立在线程池之上的一种多线程技术，它的出现使Thread成为历史。其使用方法非常简单，本文就来通过几个示例为大家讲讲它的具体使用吧2023-03-03
这篇文章主要介绍了C#9新特性之增强的模式匹配，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
这篇文章主要介绍了C#实现HTML转WORD及WORD转PDF的方法,涉及C#实现HTML、WORD及PDF等文件格式转换的相关技巧,需要的朋友可以参考下2015-09-09
这篇文章主要介绍了C#实现对Json字符串处理,通过一个json实例分析了C#进行JSON操作的方法,需要的朋友可以参考下2014-09-09
最新评论