Question

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

感谢

Answer 1

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

在控件中选择您希望成为移动区域的元素。这是一个区域，如果我用户按住鼠标，控件将移动。在我的情况下，它是控件顶部的矩形边框。
使用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），我们只需要将控件移动到一个新位置！这样做有几个步骤。首先，你的控件需要有一个RenlateTransform，它是一个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命令将使控件退出移动模式。这意味着用户将需要再次单击移动区域以尝试移动控件，因为它将在边界处停止。如果您希望控件自动继续移动，只需取出该线，控件将在返回合法区域后立即跳回光标。

Answer 2

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

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

在WPF中进行可移动控制

2 个答案: