WPF编程绑定Line端点至StackPanel位置并实现拖拽重绘

你当前的实现问题在于：直接用TransformToAncestor计算出的X/Y是一次性静态值，不会在StackPanel拖拽移动时自动更新，所以Line的位置不会跟着变化。要实现动态更新，得绑定到StackPanel的依赖属性（比如Canvas.Left/Canvas.Top），再通过转换器计算实际连接点的位置。

下面是完整的可行方案：

第一步：创建位置计算转换器 #

我们需要一个IMultiValueConverter，用来根据StackPanel的位置、尺寸计算出连接点（比如中心、边缘）的绝对坐标：

public class ElementPositionConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        // 参数分别是：Canvas位置、元素尺寸、元素本身（用于触发尺寸变化更新）
        if (values.Length != 3 || 
            !(values[0] is double position) || 
            !(values[1] is double size))
        {
            return 0.0;
        }

        // 通过参数指定连接点类型，灵活适配不同需求
        return parameter?.ToString() switch
        {
            "Left" => position,
            "Right" => position + size,
            "Top" => position,
            "Bottom" => position + size,
            _ => position + size / 2 // 默认取中心
        };
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException(); // 不需要反向绑定
    }
}

第二步：在XAML中声明转换器 #

假设你的转换器在local命名空间下，先在资源里注册：

<Window.Resources>
    <local:ElementPositionConverter x:Key="ElementPositionConverter"/>
</Window.Resources>

第三步：绑定Line的坐标属性 #

用MultiBinding同时绑定StackPanel的Canvas.Left/Canvas.Top和ActualWidth/ActualHeight，这样位置或尺寸变化时都会触发更新：

// 假设qbw是承载StackPanel的父Canvas，targetStackPanel是另一个要连接的面板
Line line = new Line();
line.Stroke = new SolidColorBrush(Colors.Black);
line.StrokeThickness = 1.5;

// 绑定X1：originalStackPanel的中心X坐标
MultiBinding x1Binding = new MultiBinding
{
    Converter = (IValueConverter)qbw.FindResource("ElementPositionConverter"),
    ConverterParameter = "Center" // 可以改成Left/Right/Top/Bottom调整连接点
};
x1Binding.Bindings.Add(new Binding("(Canvas.Left)") { Source = originalStackPanel });
x1Binding.Bindings.Add(new Binding("ActualWidth") { Source = originalStackPanel });
x1Binding.Bindings.Add(new Binding(".") { Source = originalStackPanel }); // 监听元素自身变化
line.SetBinding(Line.X1Property, x1Binding);

// 绑定Y1：originalStackPanel的中心Y坐标
MultiBinding y1Binding = new MultiBinding
{
    Converter = (IValueConverter)qbw.FindResource("ElementPositionConverter"),
    ConverterParameter = "Center"
};
y1Binding.Bindings.Add(new Binding("(Canvas.Top)") { Source = originalStackPanel });
y1Binding.Bindings.Add(new Binding("ActualHeight") { Source = originalStackPanel });
y1Binding.Bindings.Add(new Binding(".") { Source = originalStackPanel });
line.SetBinding(Line.Y1Property, y1Binding);

// 绑定X2：targetStackPanel的中心X坐标
MultiBinding x2Binding = new MultiBinding
{
    Converter = (IValueConverter)qbw.FindResource("ElementPositionConverter"),
    ConverterParameter = "Center"
};
x2Binding.Bindings.Add(new Binding("(Canvas.Left)") { Source = targetStackPanel });
x2Binding.Bindings.Add(new Binding("ActualWidth") { Source = targetStackPanel });
x2Binding.Bindings.Add(new Binding(".") { Source = targetStackPanel });
line.SetBinding(Line.X2Property, x2Binding);

// 绑定Y2：targetStackPanel的中心Y坐标
MultiBinding y2Binding = new MultiBinding
{
    Converter = (IValueConverter)qbw.FindResource("ElementPositionConverter"),
    ConverterParameter = "Center"
};
y2Binding.Bindings.Add(new Binding("(Canvas.Top)") { Source = targetStackPanel });
y2Binding.Bindings.Add(new Binding("ActualHeight") { Source = targetStackPanel });
y2Binding.Bindings.Add(new Binding(".") { Source = targetStackPanel });
line.SetBinding(Line.Y2Property, y2Binding);

// 将Line添加到Canvas中
qbw.Children.Add(line);

第四步：确保StackPanel的拖拽逻辑正确 #

拖拽时要修改Canvas.Left和Canvas.Top（而不是Margin或其他属性），这样绑定的依赖属性才会触发更新：

private Point _dragStartPoint;
private double _originalLeft;
private double _originalTop;

private void StackPanel_MouseDown(object sender, MouseButtonEventArgs e)
{
    if (sender is StackPanel panel)
    {
        _dragStartPoint = e.GetPosition(panel);
        _originalLeft = Canvas.GetLeft(panel);
        _originalTop = Canvas.GetTop(panel);
        panel.CaptureMouse();
    }
}

private void StackPanel_MouseMove(object sender, MouseEventArgs e)
{
    if (sender is StackPanel panel && panel.IsMouseCaptured)
    {
        Point currentPoint = e.GetPosition(qbw);
        Canvas.SetLeft(panel, _originalLeft + currentPoint.X - _dragStartPoint.X);
        Canvas.SetTop(panel, _originalTop + currentPoint.Y - _dragStartPoint.Y);
    }
}

private void StackPanel_MouseUp(object sender, MouseButtonEventArgs e)
{
    if (sender is StackPanel panel)
    {
        panel.ReleaseMouseCapture();
    }
}

这样一来，当你拖拽任意一个StackPanel时，Canvas.Left/Canvas.Top会实时变化，绑定的Line坐标会通过转换器自动重新计算，Line就会跟着动态更新位置了。

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