大佬，B站粉丝过来提问交流的。是关于WPF中加载大量本地or远程大型图片文件(超过20MB)时，UI线程会被阻塞导致窗口卡顿的问题。

[ProjectLion]

自学了小半年的WPF后，最近在搞一个Windows桌面应用，准备开源。但是这个问题一直困扰着我，始终没能很好的解决，使用Dispatcher.BeginInvoke异步加载也不行，没脸皮开源😅，请大佬赐教！😁
以下是新建工程的实例代码，一个列表加载本地文件夹中的图片，均超过20MB大小，在图片没有加载显示出来的时候拖动窗口是拖不动的or卡顿的。

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="MainWindow"
        Height="450"
        Width="800"
        Loaded="WindowLoaded">
    <Window.Resources>
        <Style TargetType="{x:Type ListBoxItem}">
            <Setter Property="Padding"
                    Value="3" />
        </Style>
    </Window.Resources>
    <Grid>
        <ListBox x:Name="list"
                 VerticalAlignment="Stretch"
                 ScrollViewer.HorizontalScrollBarVisibility="Auto"
                 ScrollViewer.VerticalScrollBarVisibility="Disabled"
                 ScrollViewer.PanningRatio="2.0"
                 ScrollViewer.CanContentScroll="False">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                VirtualizingStackPanel.IsVirtualizing="True" />
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
        </ListBox>
    </Grid>
</Window>

MainWindow.xaml

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    protected override void OnContentRendered(EventArgs e)
    {
        base.OnContentRendered(e);
    }

    private void WindowLoaded(object sender, RoutedEventArgs e)
    {
        foreach (var file in Directory.GetFiles(@"C:\Users\PC\Pictures\Saved Pictures\Test"))
        {
            var file1 = file;
            Dispatcher.BeginInvoke(DispatcherPriority.Background, () =>
            {
                var bitmap = new BitmapImage();
                bitmap.BeginInit();
                bitmap.UriSource = new Uri(file1, UriKind.RelativeOrAbsolute);
                bitmap.CacheOption = BitmapCacheOption.OnLoad;
                bitmap.EndInit();

                double ww = bitmap.PixelWidth;
                double hh = bitmap.PixelHeight;
                var image = new Image
                {
                    Source = bitmap,
                    Height = 200,
                    Width = 200 * (ww / hh)
                };
                list.Items.Add(image);
            });
        }
    }
}

MainWindow.xaml.cs

[FSRobot]

本地文件夹是不是有很多图片?你可以搜索WPF虚拟化技术

[ProjectLion]

虚拟化我也试过，也不是那么流畅。我现在的做法是在数据源初始化完成后遍历一遍将全部图片预加载，保存到数据模型的BitmapImage属性中，将图片的ImageSource绑定到该属性，这样做以后只有首次加载数据源的时候会卡，后续的列表滚动操作很丝滑。但是始终觉得这种做法有问题，没显示的内容就不应该去加载它~。如果不预加载图片的话，在后续滚动的时候如果将要显示的Item的图片源过大就会卡，滚动动画一点也不流畅。请大佬赐教！

[FSRobot]

wpfui这个项目里面有个demo,你可以参考.我仍觉得是虚拟化的问题.如果是图片过大的话
https://github.com/lepoco/wpfui/tree/main/src/Wpf.Ui.Gallery/Views/Pages/Collections/ListViewPage.xaml.cs
https://github.com/lepoco/wpfui/blob/main/src/Wpf.Ui.Gallery/Views/Pages/Collections/ListViewPage.xaml

[ProjectLion]

感谢大佬在百忙之中的回复，多谢。我再研究看看。

[FSRobot]

一篇多线程加载图片的文章
https://stackoverflow.com/questions/11002385/loading-images-asynchronous-in-c-sharp
共同学习,不客气

[ProjectLion]

OK，大佬早点休息

[BYJRK]

你给 ListBox 修改了 ItemsPanelTemplate，但用的是普通的 StackPanel。你应该用 VirtualizingStackPanel

[ProjectLion]

我昨晚上跟上面大佬请教后研究了一下WPF的虚拟化，发现了这个问题。感谢大佬的回复！我的项目里已经修改了，项目准备开源啦。多谢大佬

[xiuavier]

哥们开源了吗，开源了的话po一下链接吧，可以向你学习学习

[ProjectLion]

开源了，点我头像MMClipboard。第一次接触WPF开发，代码写的不好请谅解😁

[MiaoWei814]

你好 你已经修改好了么 我是新手wpf小白 我想看看你改好的样子可以不 方便我以后在我的项目里也能有更好的体验 方便给个代码片段或者给个你开源的那个具体代码地址

[MiaoWei814]

怒我愚昧 我找了半天

也就找到了这个

[ProjectLion]

其实主要是使用虚拟化技术+大型图片异步加载+修改图片资源的解码宽高来进行优化的。只使用虚拟化技术还是解决不了在加载大型图片时卡顿问题。

[designerlast]

建议使用writebitmap，通过视口操作，比如界面只展示十张照片，滑动的时候加载新的十张到界面上来。writebitmap直接通过指针操作很快的

[ProjectLion]

哇哦，这个东西性能确实好，项目的UI又更顺滑了。大佬牛逼！

[SlimeNull]

还有一个技巧，你可以在子线程加载好图片，然后 Freeze 它，给主线程用。这样，加载的逻辑不在主线程，自然也不会有什么卡主线程的问题。

[CodingOctocat]

如果正确启用了 UI 虚拟化，可以尝试异步绑定图片，IsAsync=true，也可以尝试生成缩略图显示。
或者使用 BitmapImage（混用这些方法可能会出现纯黑图片闪烁问题，忘了）：

public static class ImageHelper
{
    public static BitmapImage? ImageToBitmapImage(Image? img)
    {
        if (img == null)
        {
            return null;
        }

        using var memory = new MemoryStream();
        img.Save(memory, ImageFormat.Png);
        memory.Position = 0;

        var bitmapImage = new BitmapImage();
        bitmapImage.BeginInit();
        bitmapImage.StreamSource = memory;
        bitmapImage.CacheOption = BitmapCacheOption.OnLoad;
        bitmapImage.EndInit();

        return bitmapImage;
    }
}