WPF渲染可点击大网格椭圆卡顿，DrawingVisual不可点击求解决方案

这个场景我太熟悉了——100×100=10000个Ellipse直接丢Canvas里，WPF的UI线程根本扛不住，毕竟每个UIElement都有大量的布局和渲染开销。给你三个实用的解决思路，从易到难，按需选择：

1. 用虚拟化容器替代Canvas（最省心的方案） #

Canvas本身不支持UI虚拟化，不管元素在不在可见区域，都会被创建和渲染。换成虚拟化容器后，WPF只会加载当前视图内的元素，剩下的等滚动到视野里再创建，性能会飙升。

具体做法： #

• 把每个椭圆的属性（位置、颜色、半径）封装成一个ViewModel类（比如EllipseItem），用ObservableCollection维护所有数据。
• 用ItemsControl或ListView展示数据，把它的ItemsPanel换成支持虚拟化的面板（比如VirtualizingStackPanel，如果是网格布局，需要自定义VirtualizingUniformGrid或者用第三方控件）。
• 每个椭圆还是标准的UIElement，点击事件直接绑定，属性存在ViewModel里，维护起来非常方便。

代码示例： #

ViewModel类：

public class EllipseItem : INotifyPropertyChanged
{
    private SolidColorBrush _fillBrush;
    private SolidColorBrush _strokeBrush;
    private double _top;
    private double _left;
    private double _radius;

    public SolidColorBrush FillBrush
    {
        get => _fillBrush;
        set { _fillBrush = value; OnPropertyChanged(); }
    }

    public SolidColorBrush StrokeBrush
    {
        get => _strokeBrush;
        set { _strokeBrush = value; OnPropertyChanged(); }
    }

    public double Top
    {
        get => _top;
        set { _top = value; OnPropertyChanged(); }
    }

    public double Left
    {
        get => _left;
        set { _left = value; OnPropertyChanged(); }
    }

    public double Radius
    {
        get => _radius;
        set { _radius = value; OnPropertyChanged(); }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

生成数据并绑定：

public ObservableCollection<EllipseItem> EllipseItems { get; set; }

public YourViewModel()
{
    EllipseItems = new ObservableCollection<EllipseItem>();
    int cols = 100;
    int rows = 100;
    double radius = 20;
    double margin = 5;

    for (int i = 0; i < cols; i++)
    {
        for (int j = 0; j < rows; j++)
        {
            EllipseItems.Add(new EllipseItem
            {
                FillBrush = Brushes.Red,
                StrokeBrush = Brushes.Blue,
                Radius = radius,
                Left = (radius * i) + (i * margin),
                Top = (radius * j) + (j * margin)
            });
        }
    }
}

XAML布局：

<ItemsControl ItemsSource="{Binding EllipseItems}"
              ScrollViewer.CanContentScroll="True">
    <!-- 用虚拟化面板，这里如果是网格布局需要自定义VirtualizingUniformGrid -->
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel Orientation="Vertical"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Ellipse Width="{Binding Radius}"
                     Height="{Binding Radius}"
                     Fill="{Binding FillBrush}"
                     Stroke="{Binding StrokeBrush}"
                     StrokeThickness="2"
                     MouseLeftButtonDown="Ellipse_MouseLeftButtonDown"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
    <ItemsControl.ItemContainerStyle>
        <Style>
            <Setter Property="Canvas.Top" Value="{Binding Top}"/>
            <Setter Property="Canvas.Left" Value="{Binding Left}"/>
        </Style>
    </ItemsControl.ItemContainerStyle>
</ItemsControl>

2. 自定义控件+DrawingVisual+手动命中测试（极致性能方案） #

如果追求最高性能，还是得用DrawingVisual，但你之前的痛点是没法处理点击和存储属性——其实可以自己补全这部分逻辑：

具体做法： #

• 定义一个EllipseData类，存储每个椭圆的中心坐标、半径、颜色等属性。
• 自定义一个继承自FrameworkElement的控件，维护List<EllipseData>集合。
• 重写OnRender方法，用DrawingContext批量绘制所有椭圆。
• 处理鼠标点击事件时，手动计算点击点是否落在某个椭圆范围内（用椭圆的数学公式判断），找到对应的数据后触发交互逻辑，再刷新渲染。

代码示例： #

自定义控件核心代码：

public class EllipseGrid : FrameworkElement
{
    private List<EllipseData> _ellipseDataList = new List<EllipseData>();
    private DrawingVisual _drawingVisual;

    public EllipseGrid()
    {
        _drawingVisual = new DrawingVisual();
        AddVisualChild(_drawingVisual);
        InitializeEllipseData();
        this.MouseLeftButtonDown += EllipseGrid_MouseLeftButtonDown;
    }

    private void InitializeEllipseData()
    {
        int cols = 100;
        int rows = 100;
        double radius = 20;
        double margin = 5;

        for (int i = 0; i < cols; i++)
        {
            for (int j = 0; j < rows; j++)
            {
                // 存储椭圆中心坐标，方便后续命中测试
                double centerX = (radius * i) + (i * margin) + radius / 2;
                double centerY = (radius * j) + (j * margin) + radius / 2;

                _ellipseDataList.Add(new EllipseData
                {
                    FillBrush = Brushes.Red,
                    StrokeBrush = Brushes.Blue,
                    Radius = radius,
                    CenterX = centerX,
                    CenterY = centerY
                });
            }
        }
    }

    protected override int VisualChildrenCount => 1;
    protected override Visual GetVisualChild(int index) => _drawingVisual;

    protected override void OnRender(DrawingContext dc)
    {
        base.OnRender(dc);
        foreach (var data in _ellipseDataList)
        {
            dc.DrawEllipse(
                data.FillBrush,
                new Pen(data.StrokeBrush, 2),
                new Point(data.CenterX, data.CenterY),
                data.Radius / 2,
                data.Radius / 2);
        }
    }

    private void EllipseGrid_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        Point clickPoint = e.GetPosition(this);
        // 遍历数据，判断点击点是否在椭圆内（椭圆公式：(dx/a)² + (dy/b)² ≤ 1）
        foreach (var data in _ellipseDataList)
        {
            double dx = clickPoint.X - data.CenterX;
            double dy = clickPoint.Y - data.CenterY;
            double halfRadius = data.Radius / 2;

            if (Math.Pow(dx / halfRadius, 2) + Math.Pow(dy / halfRadius, 2) <= 1)
            {
                // 触发点击逻辑，比如切换颜色
                data.FillBrush = data.FillBrush == Brushes.Red ? Brushes.Green : Brushes.Red;
                InvalidateVisual(); // 刷新渲染
                break;
            }
        }
    }
}

// 存储椭圆属性的类
public class EllipseData
{
    public SolidColorBrush FillBrush { get; set; }
    public SolidColorBrush StrokeBrush { get; set; }
    public double Radius { get; set; }
    public double CenterX { get; set; }
    public double CenterY { get; set; }
}

这个方案性能几乎和纯DrawingVisual一样，同时支持交互和属性存储，唯一的小缺点是需要自己写命中测试逻辑，但逻辑很简单。

3. UIElement对象池复用（折中方案） #

如果不想改虚拟化或自定义控件，也可以试试对象池：预先创建一批Ellipse元素（数量等于可见区域元素数+冗余量），当视图滚动时，把不可见的Ellipse移到新的可见位置，更新它们的位置、颜色等属性，而不是每次都新建。

具体做法： #

• 维护一个Queue<Ellipse>对象池，初始化时创建一批元素。
• 监听Canvas的滚动事件，计算当前可见区域的范围。
• 遍历可见区域的椭圆位置，从对象池里取元素（没有的话再新建），更新其Top、Left、Fill等属性，添加到Canvas；把不可见的元素放回对象池并从Canvas移除。

这个方案减少了大量UIElement的创建销毁开销，能缓解卡顿，但需要自己处理视图范围计算，复杂度比虚拟化高一些。

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