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();
逐行解释
-
var nextImages:- 声明一个变量
nextImages，用于存储当前页面所需的图片路径列表。
- 声明一个变量
-
allImagePaths:- 这是一个包含所有图片路径的列表，类型为
List<string>。
- 这是一个包含所有图片路径的列表，类型为
-
.Skip(currentPage * PageSize):currentPage是当前页面的索引，从 0 开始。PageSize是每页显示的图片数量，这里定义为 16。currentPage * PageSize计算出当前页面之前的所有图片路径的数量。.Skip(currentPage * PageSize)跳过这些路径，即跳过当前页面之前的所有图片路径。
-
.Take(PageSize):- 从跳过后的路径中取出
PageSize个路径，即取出当前页面所需的图片路径。
- 从跳过后的路径中取出
-
.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. 总结
通过以上方法，我们实现了：
- 初始只加载少量图片，快速打开界面。
- 用户滚动时，按需分页加载后续图片。
- 界面不卡顿，体验丝滑流畅。
这种设计特别适合处理大量图片浏览、视频帧查看、缩略图管理器等场景。