如何提升WPF中置于大Canvas内的ListBox性能？

架构老林

2026-8-1

问题描述

我有一个自定义，结构如下：
UserControl结构示意图：超大Canvas内包含一个几乎占满高度的Rectangle，以及一个包含大量棕色方块（ListBoxItem）的ListBox，外层包裹ScrollViewer。其中每个ListBoxItem包含图像、文本块等大量控件，与Rectangle固定定位在Canvas中。

当前由于高度几乎等于Canvas高度，所有Item会被一次性渲染（可视化树中有3万+元素，每个约含40个元素），导致导航到包含该的视图时性能极差，而用户同一时间仅能看到少量Item和的部分区域。

显然此配置下未开启虚拟化。我尝试将高度限制为外层的高度，此时虚拟化生效，但会自带隐式，滚动视口时，对应特定区域的Item无法显示。

模拟代码如下：

XAML代码

Window x:Class="ListBoxVirtualizationExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow"
        Width="800"
        Height="450">
    <ScrollViewer HorizontalScrollBarVisibility="Auto"
                  VerticalScrollBarVisibility="Auto">
        <Canvas Width="2000"
                Height="2000">
            <Rectangle x:Name="Rect1"
                       Canvas.Left="0"
                       Canvas.Top="0"
                       Width="100"
                       Height="100"
                       Fill="Red" />
            <Rectangle x:Name="Rect2"
                       Canvas.Left="0"
                       Canvas.Top="600"
                       Width="100"
                       Height="100"
                       Fill="Green" />

            <ListBox Canvas.Left="150"
                     Width="200"
                     Height="{Binding Path=ActualHeight, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ScrollViewer}}}"
                     ItemsSource="{Binding YourDataSource}"
                     VirtualizingStackPanel.IsVirtualizing="True"
                     VirtualizingStackPanel.VirtualizationMode="Standard">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Canvas>
                            <TextBlock Canvas.Left="{Binding RectangleLeft}"
                                       Canvas.Top="{Binding RectangleTop}"
                                       FontSize="20"
                                       Text="{Binding Text}" />
                        </Canvas>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </Canvas>
    </ScrollViewer>
</Window>

后台代码

using System.Collections.ObjectModel;
using System.Windows;

namespace ListBoxVirtualizationExample
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            YourDataSource = new ObservableCollection<DataItem>();

            for (var i = 0; i < 200; i++)
            {
                YourDataSource.Add(new DataItem {Text = $"Item {i}", RectangleLeft = 0, RectangleTop = 20 * i});
            }

            DataContext = this;
        }

        public ObservableCollection<DataItem> YourDataSource { get; set; }
    }

    public class DataItem
    {
        public string Text { get; set; }
        public double RectangleLeft { get; set; }
        public double RectangleTop { get; set; }
    }
}

当前滚动效果：滚动外层ScrollViewer时，ListBox的Item不会跟随滚动，绿色方块区域内的Item无法显示。

理想滚动效果：滚动外层ScrollViewer时，ListBox的Item会跟随滚动，Item25-28始终停留在绿色方块区域内。

核心问题

如何提升该的性能？
使用控件是否合适？
还有其他实现方案吗？

解决方案

一、性能提升方案

1. 让ListBox共享外层ScrollViewer的滚动上下文，同时保留虚拟化

ListBox默认自带ScrollViewer，导致和外层ScrollViewer滚动分离，这是核心矛盾。解决思路是移除ListBox的内置ScrollViewer，让它的虚拟化面板绑定到外层ScrollViewer的滚动状态，这样Item既能随外层滚动正确定位，又能保持虚拟化只渲染可见区域。

具体实现步骤：

给ListBox设置ScrollViewer.CanContentScroll="True"，这是开启虚拟化的必要条件之一
替换ListBox的ItemsPanel为VirtualizingStackPanel，并将其ScrollOwner绑定到外层ScrollViewer
重写ListBox的ControlTemplate，去掉内置的ScrollViewer，只保留ItemsPresenter
移除Item内部的Canvas，改用固定高度的容器（比如Grid），因为VirtualizingStackPanel需要明确的Item高度来计算虚拟化范围

修改后的ListBox XAML：

<ListBox Canvas.Left="150"
         Width="200"
         ItemsSource="{Binding YourDataSource}"
         ScrollViewer.CanContentScroll="True"
         VirtualizingStackPanel.IsVirtualizing="True"
         VirtualizingStackPanel.VirtualizationMode="Standard">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel ScrollOwner="{Binding RelativeSource={RelativeSource AncestorType=ScrollViewer}}" />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid Height="20">
                <TextBlock FontSize="20" Text="{Binding Text}" />
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>
    <ListBox.Template>
        <ControlTemplate TargetType="ListBox">
            <ItemsPresenter />
        </ControlTemplate>
    </ListBox.Template>
</ListBox>

2. 优化Item的可视化树

每个ListBoxItem包含40个元素，会大幅增加渲染和布局负担。可以从以下几点优化：

合并嵌套容器，用单个Grid代替多层Canvas/StackPanel
按需加载复杂控件：通过UIElement.Visibility或DataTemplateSelector，只在Item进入视口时加载图像等资源
使用轻量级控件：比如用TextBlock代替Label，避免不必要的样式和模板开销

二、ListBox是否合适？

ListBox本身是合适的，但需要调整配置适配你的场景：

优势：自带成熟的虚拟化支持、Item容器管理、选择逻辑，适合大量数据的展示场景
劣势：默认的内置ScrollViewer和固定布局逻辑需要修改才能适配外层Canvas的滚动需求

如果你的场景不需要选择功能，也可以用更轻量的ItemsControl代替，它同样支持虚拟化配置，性能开销更低。

三、其他实现方案

1. 自定义虚拟化面板

如果默认的VirtualizingStackPanel无法满足自由定位的需求，可以自定义一个继承自VirtualizingPanel的面板，手动计算当前视口范围内的Item，只渲染这些Item，并根据外层ScrollViewer的滚动偏移动态调整Item的位置。这种方案灵活性最高，但需要深入理解WPF的虚拟化机制。

2. 按需加载策略

放弃虚拟化，改为监听外层ScrollViewer的ScrollChanged事件，动态加载当前视口范围内的Item，移除视口外的Item。这种方式适合Item位置完全自定义的场景，但需要自己管理Item的生命周期和内存，实现复杂度较高。

3. 改用DataGrid（布局规整时）

如果你的Item是规整的行列布局，DataGrid的虚拟化支持更成熟，自带列管理和性能优化，无需过多自定义即可实现高效渲染。但如果是自由定位的Item，这个方案不适用。

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

如何提升WPF中置于大Canvas内的ListBox性能？

XAML代码 #

后台代码 #

核心问题 #

一、性能提升方案 #

1. 让ListBox共享外层ScrollViewer的滚动上下文，同时保留虚拟化 #

2. 优化Item的可视化树 #

二、ListBox是否合适？ #

三、其他实现方案 #

1. 自定义虚拟化面板 #

2. 按需加载策略 #

3. 改用DataGrid（布局规整时） #