wpf - 如何使用依赖属性在两个 WPF 控件之间画一条线？

Question

我需要画一条连接两个 WPF 控件的线。我在我的对象中定义了一个依赖属性Node，所以如果节点被移动，这条线仍然连接对象。

我有以下示例，但无法使其正常工作。

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

        Node node1 = new Node(myCanvas) { Width = 50, Height = 50 };
        Node node2 = new Node(myCanvas) { Width = 50, Height = 50 };

        Canvas.SetLeft(node1, 0);
        Canvas.SetLeft(node2, 200);

        Canvas.SetTop(node1, 0);
        Canvas.SetTop(node2, 0);

        myCanvas.Children.Add(node1);
        myCanvas.Children.Add(node2);

        Connector conn = new Connector();
        conn.Source = node1.AnchorPoint;
        conn.Destination = node2.AnchorPoint;

        myCanvas.Children.Add(conn);
    }
}

class Node : Control
{
    public static readonly DependencyProperty AnchorPointProperty =
        DependencyProperty.Register(
            "AnchorPoint", typeof(Point), typeof(Node),
                new FrameworkPropertyMetadata(new Point(0, 0), 
                FrameworkPropertyMetadataOptions.AffectsMeasure));

    public Point AnchorPoint
    {
        get { return (Point)GetValue(AnchorPointProperty); }
        set { SetValue(AnchorPointProperty, value); }
    }

    private Canvas mCanvas;

    public Node(Canvas canvas)
    {
        mCanvas = canvas;
        this.LayoutUpdated += Node_LayoutUpdated;
    }

    void Node_LayoutUpdated(object sender, EventArgs e)
    {
        Size size = RenderSize;
        Point ofs = new Point(size.Width / 2, size.Height / 2);
        AnchorPoint = TransformToVisual(this.mCanvas).Transform(ofs);
    }

    protected override void OnRender(DrawingContext drawingContext)
    {
        drawingContext.DrawEllipse(
            Brushes.Red,
            null,
            new Point(Width / 2, Height / 2), Width / 2, Height / 2);
    }
}

public sealed class Connector : UserControl
{
    public static readonly DependencyProperty SourceProperty =
        DependencyProperty.Register(
            "Source", typeof(Point), typeof(Connector),
            new FrameworkPropertyMetadata(default(Point)));

    public Point Source {
        get { return (Point)this.GetValue(SourceProperty); }
        set { this.SetValue(SourceProperty, value); }
    }

    public static readonly DependencyProperty DestinationProperty =
        DependencyProperty.Register(
            "Destination", typeof(Point), typeof(Connector),
                new FrameworkPropertyMetadata(default(Point)));

    public Point Destination {
        get { return (Point)this.GetValue(DestinationProperty); }
        set { this.SetValue(DestinationProperty, value); }
    }

    public Connector()
    {
        LineSegment segment = new LineSegment(default(Point), true);
        PathFigure figure = new PathFigure(default(Point), new[] { segment }, false);
        PathGeometry geometry = new PathGeometry(new[] { figure });
        BindingBase sourceBinding = 
           new Binding { Source = this, Path = new PropertyPath(SourceProperty) };
        BindingBase destinationBinding = 
           new Binding { Source = this, Path = new PropertyPath(DestinationProperty) };
        BindingOperations.SetBinding(
            figure, PathFigure.StartPointProperty, sourceBinding);
        BindingOperations.SetBinding(
            segment, LineSegment.PointProperty, destinationBinding);
        Content = new Path
        {
            Data = geometry,
            StrokeThickness = 5,
            Stroke = Brushes.White,
            MinWidth = 1,
            MinHeight = 1
        };
    }
}

Answer 1

要使示例正常工作，您所要做的就是绑定 节点的 AnchorPoints，否则连接器只会获取 AnchorPoints 的初始值 (0,0)，并且不会监听进一步的更改：conn.Source.Destination

...

Connector conn = new Connector();
//conn.Source = node1.AnchorPoint;
conn.SetBinding(Connector.SourceProperty, 
                new Binding()
                {
                    Source = node1,
                    Path = new PropertyPath(Node.AnchorPointProperty)
                });
//conn.Destination = node2.AnchorPoint;
conn.SetBinding(Connector.DestinationProperty,
                new Binding()
                {
                    Source = node2,
                    Path = new PropertyPath(Node.AnchorPointProperty)
                });

myCanvas.Children.Add(conn);