在 WPF 中制作可移动控件答案

【问题标题】：Making a moveable control in WPF在 WPF 中制作可移动控件
【发布时间】：2011-02-19 08:05:12
【问题描述】：

我有一个面板，该面板中有几个矩形控件（控件的数量）我希望用户能够在面板内移动控件，以便他们可以以适合他们的方式排列控件最好的。有没有人有任何我可以阅读的资源或简单的提示可以让我走上正确的道路？

谢谢

【问题讨论】：

标签： wpf xaml movable

【解决方案1】：

你可以在这里找到很多灵感：

http://www.codeproject.com/KB/WPF/WPFDiagramDesigner_Part1.aspx

http://www.codeproject.com/KB/WPF/WPFDiagramDesigner_Part2.aspx

http://www.codeproject.com/KB/WPF/WPFDiagramDesigner_Part3.aspx

http://www.codeproject.com/KB/WPF/WPFDiagramDesigner_Part4.aspx

【讨论】：

那里确实有很多灵感。这不完全是我所追求的，但我不想接受我的答案，这帮助我重构了我的代码：)
仅供参考，@TerrorAustralis，接受你自己的答案完全没有问题。

【解决方案2】：

我想出了一种以拖动/移动方式移动控件的可能的简单方法...以下是步骤。

在您的控件中选择一个您希望作为移动区域的元素。这是一个区域，如果我的用户按住鼠标，控件将移动。在我的例子中，它是控件顶部的一个矩形边框。
使用 OnMouseDown 事件将布尔值（在我的情况下为 IsMoving）设置为 true，并使用 MouseUp 事件将其设置为 false

在第一个 MouseDown 事件中，使用以下代码设置一些 Point 属性（InitialPosition）

if (FirstClick)
{
     GeneralTransform transform = this.TransformToAncestor(this.Parent as Visual);
     Point StartPoint = transform.Transform(new Point(0, 0));
     StartX = StartPoint.X;
     StartY = StartPoint.Y;
     FirstClick = false;
}

现在您有了起始位置，您需要获取鼠标相对于您的移动控件的位置。这样您就不会最终单击标题的中间来移动它，它会立即将控件的左上角移动到鼠标指针位置。为此，请将此代码放在 MouseDown 事件中：
```
Point RelativeMousePoint = Mouse.GetPosition(Header);
RelativeX = RelativeMousePoint.X;
RelativeY = RelativeMousePoint.Y;
```
现在您有了控件的起始点（startX 和 STARTY），鼠标在您的移动控件中的位置（RelativeX，RelativeY），我们只需要将控件移动到新位置！执行此操作涉及几个步骤。首先，您的控件需要有一个 RenderTransform，它是一个 TranslateTransform。如果您不想在 XAML 中进行设置，请随时使用this.RenderTransform = new TranslateTransform 进行设置。

现在我们需要在 RenderTransform 上设置 X 和 Y 坐标，以便控件移动到新位置。下面的代码完成了这个

private void Header_MouseMove(object sender, MouseEventArgs e)
{
    if (IsMoving)
    {
        //Get the position of the mouse relative to the controls parent              
        Point MousePoint = Mouse.GetPosition(this.Parent as IInputElement );
        //set the distance from the original position
        this.DistanceFromStartX= MousePoint.X - StartX - RelativeX ;
        this.DistanceFromStartY= MousePoint.Y - StartY - RelativeY;
        //Set the X and Y coordinates of the RenderTransform to be the Distance from original position. This will move the control
        TranslateTransform MoveTransform = base.RenderTransform as TranslateTransform;
        MoveTransform.X = this.DistanceFromStartX;
        MoveTransform.Y = this.DistanceFromStartY;
    }
}

您可以猜到，有一些代码被遗漏了（变量声明等），但这应该是您开始所需的全部内容:) 愉快的编码。

编辑：
您可能遇到的一个问题是，这允许您将控件移出其父控件的区域。这是一些快速而肮脏的代码来解决这个问题......

if ((MousePoint.X + this.Width - RelativeX > Parent.ActualWidth) ||
     MousePoint.Y + this.Height - RelativeY > Parent.ActualHeight ||
     MousePoint.X - RelativeX  < 0 || 
     MousePoint.Y - RelativeY  < 0)
{
    IsMoving = false;
    return;
}

在实际移动发生之前将此代码放置在您的 MouseMove 事件中。这将检查控件是否试图移出父控件的边界。 IsMoving = false 命令将导致控件退出移动模式。这意味着用户将需要再次单击移动区域以尝试移动控件，因为它将在边界处停止。如果您希望控件自动继续移动，只需将该行移出，控件将在光标回到合法区域后立即跳回光标。

【讨论】：

附带说明，如果用户将鼠标移动到快速，控件将失去移动焦点。