c# - 如何将 UserControl 拖到 Canvas 中

Question

我有一个 Canvas ，用户可以在其中添加包含表单的 UserControl 子类。用户应该能够在 Canvas 周围拖动这些 UserControl。

使用 WPF 执行此操作的最佳做​​法是什么？

Answer 1

这是在 silverlight 中完成的，而不是在 WPF 中完成的，但它的工作原理应该是一样的。

在控件上创建两个私有(private)属性:

protected bool isDragging;  
private Point clickPosition;

然后在控件的构造函数中附加一些事件处理程序:

this.MouseLeftButtonDown += new MouseButtonEventHandler(Control_MouseLeftButtonDown);
this.MouseLeftButtonUp += new MouseButtonEventHandler(Control_MouseLeftButtonUp);
this.MouseMove += new MouseEventHandler(Control_MouseMove);

现在创建这些方法:

private void Control_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    isDragging = true;
    var draggableControl = sender as UserControl;
    clickPosition = e.GetPosition(this);
    draggableControl.CaptureMouse();
}

private void Control_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
    isDragging = false;
    var draggable = sender as UserControl;
    draggable.ReleaseMouseCapture();
}

private void Control_MouseMove(object sender, MouseEventArgs e)
{
    var draggableControl = sender as UserControl;

    if (isDragging && draggableControl != null)
    {
        Point currentPosition = e.GetPosition(this.Parent as UIElement);

        var transform = draggableControl.RenderTransform as TranslateTransform;
        if (transform == null)
        {
            transform = new TranslateTransform();
            draggableControl.RenderTransform = transform;
        }

        transform.X = currentPosition.X - clickPosition.X;
        transform.Y = currentPosition.Y - clickPosition.Y;
    }
}

这里有几点需要注意:
1. 这不必在 Canvas 中。它也可以在堆栈面板或网格中。
2. 这使得整个控件可拖动，这意味着如果您单击控件中的任意位置并拖动它将拖动整个控件。不确定这是否正是您想要的。

编辑-
扩展您问题中的一些细节:我实现它的最佳方法是创建一个继承自 UserControl 的类，可能称为使用此代码构建的 DraggableControl，然后所有可拖动控件都应扩展 DraggableControl。

编辑 2 - 在此控件中有数据网格时会出现小问题。如果您对数据网格中的列进行排序，则 MouseLeftButtonUp 事件永远不会触发。我已经更新了代码，以便 isDragging 受到保护。我发现最好的解决方案是将这个匿名方法绑定(bind)到数据网格的 LostMouseCapture 事件:

this.MyDataGrid.LostMouseCapture += (sender, e) => { this.isDragging = false; };