WPF如何创建完全自定义元素？需实现类csacademy在线图编辑器

针对你遇到的Canvas性能不足、交互难实现的问题，推荐采用轻量级视觉元素+数据驱动渲染+统一交互处理的方案，完全能实现类似目标编辑器的功能，具体思路如下：

一、解决性能问题：用DrawingVisual替代Canvas的UIElement #

Canvas的性能瓶颈在于每个图形都是独立的UIElement（如Ellipse、Path），这类元素包含布局、样式、事件等大量冗余逻辑，数量多了会严重拖慢帧率。改用DrawingVisual可以解决这个问题：

• DrawingVisual是WPF中最轻量级的视觉对象，仅负责渲染，没有UIElement的额外开销，支持批量渲染，轻松达到30+帧/秒。
• 实现方式：创建一个继承自FrameworkElement的自定义控件，内部维护DrawingVisual集合，重写VisualChildrenCount和GetVisualChild方法，让WPF正确识别并渲染这些视觉元素。
• 额外优化：启用硬件加速（WPF默认开启，可通过RenderOptions.ProcessRenderMode = RenderMode.Default确保），使用Freezable类型的Pen、Brush减少内存占用，批量更新渲染逻辑（避免频繁调用InvalidateVisual）。

二、实现交互功能：统一命中测试+数据模型驱动 #

交互的核心是将用户操作关联到具体图形元素，通过以下步骤实现：

1. 定义数据模型：创建GraphNode（包含坐标、ID、样式属性）、GraphEdge（包含起点/终点ID、样式属性）类，实现INotifyPropertyChanged，让属性变化能自动触发渲染更新。
2. 命中测试：在自定义控件的鼠标事件（MouseDown/MouseMove/MouseUp）中，使用VisualTreeHelper.HitTest检测用户点击/拖拽的目标视觉元素，关联到对应的数据模型。
3. 交互逻辑实现：
   • 节点拖拽：鼠标按下时记录选中的节点，鼠标移动时更新节点的坐标属性，触发渲染更新。
   • 元素选中：命中测试后修改对应模型的选中样式，重新绘制该元素。
   • 添加/删除元素：修改数据模型集合，调用更新渲染的方法刷新界面。

三、具体实现示例片段 #

自定义渲染控件核心代码 #

public class GraphEditorControl : FrameworkElement
{
    private readonly List<DrawingVisual> _visuals = new();
    public ObservableCollection<GraphNode> Nodes { get; } = new();
    public ObservableCollection<GraphEdge> Edges { get; } = new();

    public GraphEditorControl()
    {
        Nodes.CollectionChanged += OnNodesChanged;
        Edges.CollectionChanged += OnEdgesChanged;
        MouseDown += OnMouseDown;
        MouseMove += OnMouseMove;
    }

    protected override int VisualChildrenCount => _visuals.Count;
    protected override Visual GetVisualChild(int index) => _visuals[index];

    private void UpdateVisuals()
    {
        _visuals.Clear();
        // 先绘制边（节点在上方显示）
        foreach (var edge in Edges)
        {
            var visual = new DrawingVisual();
            using (var dc = visual.RenderOpen())
            {
                var startNode = Nodes.First(n => n.Id == edge.StartNodeId);
                var endNode = Nodes.First(n => n.Id == edge.EndNodeId);
                dc.DrawLine(new Pen(Brushes.Gray, 2), 
                    new Point(startNode.X, startNode.Y), 
                    new Point(endNode.X, endNode.Y));
            }
            _visuals.Add(visual);
        }
        // 绘制节点
        foreach (var node in Nodes)
        {
            var visual = new DrawingVisual();
            using (var dc = visual.RenderOpen())
            {
                var brush = node.IsSelected ? Brushes.Blue : Brushes.LightGray;
                dc.DrawEllipse(brush, new Pen(Brushes.Black, 1), 
                    new Point(node.X, node.Y), 15, 15);
            }
            _visuals.Add(visual);
        }
        InvalidateVisual();
    }

    // 集合变化时触发渲染更新
    private void OnNodesChanged(object? sender, NotifyCollectionChangedEventArgs e) => UpdateVisuals();
    private void OnEdgesChanged(object? sender, NotifyCollectionChangedEventArgs e) => UpdateVisuals();

    // 简化的鼠标交互逻辑
    private GraphNode? _selectedNode;
    private Point _dragStartPoint;
    private void OnMouseDown(object sender, MouseButtonEventArgs e)
    {
        var hitTestResult = VisualTreeHelper.HitTest(this, e.GetPosition(this));
        if (hitTestResult.VisualHit is DrawingVisual)
        {
            // 实际可通过映射表关联视觉元素与数据模型，此处为简化示例
            _selectedNode = Nodes.FirstOrDefault(n => 
                Math.Abs(n.X - e.GetPosition(this).X) < 15 && 
                Math.Abs(n.Y - e.GetPosition(this).Y) < 15);
            _dragStartPoint = e.GetPosition(this);
        }
    }

    private void OnMouseMove(object sender, MouseEventArgs e)
    {
        if (_selectedNode != null && e.LeftButton == MouseButtonState.Pressed)
        {
            var currentPoint = e.GetPosition(this);
            _selectedNode.X += currentPoint.X - _dragStartPoint.X;
            _selectedNode.Y += currentPoint.Y - _dragStartPoint.Y;
            _dragStartPoint = currentPoint;
        }
    }
}

// 数据模型示例
public class GraphNode : INotifyPropertyChanged
{
    public Guid Id { get; } = Guid.NewGuid();
    private double _x;
    public double X
    {
        get => _x;
        set { _x = value; OnPropertyChanged(); }
    }
    private double _y;
    public double Y
    {
        get => _y;
        set { _y = value; OnPropertyChanged(); }
    }
    private bool _isSelected;
    public bool IsSelected
    {
        get => _isSelected;
        set { _isSelected = value; OnPropertyChanged(); }
    }

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

public class GraphEdge
{
    public Guid StartNodeId { get; set; }
    public Guid EndNodeId { get; set; }
}

四、额外优化建议 #

• 增量更新渲染：无需每次全量刷新DrawingVisual集合，可维护模型与视觉元素的映射表，仅更新修改过的元素。
• 拖拽防抖：对于快速拖拽操作，使用DispatcherTimer合并渲染请求，减少重绘次数。
• 画布缩放平移：通过TransformGroup对自定义控件应用ScaleTransform和TranslateTransform，实现画布的缩放和平移，无需修改每个元素的坐标。

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