WPF ScrollViewer首次滚动或调整窗口大小时卡顿如何修复？

你遇到的卡顿问题核心原因是UI虚拟化未生效，你当前在ScrollViewer内直接使用Grid作为容器、手动添加所有子元素的写法，即使设置了VirtualizingStackPanel相关属性也不会触发虚拟化逻辑——WPF的UI虚拟化仅对ItemsControl系列控件（ListBox、ListView等）生效，普通Panel会一次性渲染所有子元素，首次滚动/调整窗口大小时会触发全量UI重绘/重排，所以会出现卡顿。

修复方案 #

1. 替换容器为支持虚拟化的ItemsControl #

放弃手动拼Grid的写法，改用ListBox+UniformGrid作为条目容器，自动触发UI虚拟化，仅渲染当前可视区域的条目：

<Window x:Class="pretyListbox.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"
        xmlns:local="clr-namespace:pretyListbox"
        mc:Ignorable="d"
        Background="#282828"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <ListBox x:Name="ItemList" VirtualizingStackPanel.IsVirtualizing="True"
                 VirtualizingStackPanel.VirtualizationMode="Recycling"
                 ScrollViewer.VerticalScrollBarVisibility="Auto">
            <!-- 配置4列网格布局 -->
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid Columns="4" />
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <!-- 你的条目模板，对应原来create_panel生成的Grid内容 -->
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <!-- 这里替换为你原来create_panel里的Border+图片逻辑，绑定对应数据源字段 -->
                    <Border>
                        <Image Source="{Binding ImageSource}" DecodePixelWidth="200" CacheMode="BitmapCache"/>
                    </Border>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

        <Button  Height="100" Width="100" Click="Button_Click" Content="gen" Margin="0,0,3,1" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
    </Grid>
</Window>

2. 后台改用绑定数据源生成条目 #

不要直接操作UI元素，改为绑定数据源，让WPF自动管理UI生成：

// 先定义条目数据模型
public class ItemModel
{
    public BitmapImage ImageSource { get; set; }
    // 其他你需要的字段
}

public partial class MainWindow : Window
{
    panel panels = new panel();
    // 数据源集合
    private ObservableCollection<ItemModel> _itemSource = new ObservableCollection<ItemModel>();
    public MainWindow()
    {
        InitializeComponent();
        ItemList.ItemsSource = _itemSource;
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        // 批量生成数据，也可以分批次异步添加避免阻塞UI
        Task.Run(() =>
        {
            for (int i = 0; i < 20; i++)
            {
                // 这里把原来create_panel里的图片生成逻辑移到数据层，生成BitmapImage
                var item = new ItemModel()
                {
                    // 图片加载如果是IO操作放在后台线程，加载完成后调度到UI线程添加
                    ImageSource = LoadImage()
                };
                Dispatcher.Invoke(() => _itemSource.Add(item));
            }
        });
    }

    // 示例图片加载方法，可根据你的逻辑调整
    private BitmapImage LoadImage()
    {
        // 加载时指定DecodePixelWidth/Height，减少内存占用
        var bitmap = new BitmapImage();
        bitmap.BeginInit();
        bitmap.UriSource = new Uri("你的图片路径", UriKind.RelativeOrAbsolute);
        bitmap.DecodePixelWidth = 200; // 跟你的条目显示宽度匹配即可
        bitmap.CacheOption = BitmapCacheOption.OnLoad;
        bitmap.EndInit();
        bitmap.Freeze(); // 后台线程加载的图片要Freeze才能跨线程使用
        return bitmap;
    }
}

3. 额外优化点 #

• 把VirtualizationMode设置为Recycling而非Standard，滚动时会复用UI容器，减少反复创建销毁元素的开销
• 图片加载时必须设置DecodePixelWidth/Height，避免加载远大于显示尺寸的原图，大幅降低内存占用和渲染开销
• 图片如果是静态资源，添加CacheMode="BitmapCache"缓存渲染结果，避免重绘时反复解码

以上修改完成后，即使后续条目增加到几百上千条，滚动和调整窗口大小时也不会出现卡顿，因为仅可视区域的十几个元素会被实际渲染。

内容的提问来源于stack exchange，提问作者segu