C#教程

关注公众号 jb51net

关闭
首页 > 软件编程 > C#教程 > WPF加载图片

WPF实现动态加载图片浏览器

作者:code bean

这篇文章主要为大家详细介绍了一种 WPF + Prism 实现动态分页加载图片的方法,其中结合了ScrollViewer滚动条触底检测,实现边滚动边加载的流畅体验,下面就跟随小编一起学习一下吧

在做图片浏览器程序时,遇到图片数量巨大的情况(如几百张、上千张),一次性加载所有图片会导致界面卡顿甚至程序崩溃。

本文介绍一种 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;
    }
}

这段代码的作用是从 allImagePaths 列表中取出当前页面所需的图片路径,并将它们存储到 nextImages 列表中。以下是逐行解释:

代码片段

var nextImages = allImagePaths
    .Skip(currentPage * PageSize)
    .Take(PageSize)
    .ToList();

逐行解释

1. var nextImages:

声明一个变量 nextImages,用于存储当前页面所需的图片路径列表。

2. allImagePaths:

这是一个包含所有图片路径的列表,类型为 List<string>。

3. .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图片浏览器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文