在WPF中创建一个可移动的控件

Question

在WPF中创建一个可移动的控件

wpfxamlmovable

8

我有一个面板，在这个面板中有几个矩形控件（控件数量不定）。我希望用户能够在面板内移动这些控件，以便他们可以按照自己的喜好排列控件。有没有什么资源或简单的技巧可以让我朝着正确的方向前进呢？

谢谢。

- TerrorAustralis

2个回答

4

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

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

- bretik

确实可以从中获得很多灵感。虽然不完全符合我的要求，但我不想接受我的答案，这帮助我重构了我的代码。 :) - TerrorAustralis

1

顺便说一下，@TerrorAustralis，接受自己的答案完全没有问题。 - ANeves

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- TerrorAustralis · Accepted Answer

我找到了一种可能的简单方法，实现控件的拖动/移动...下面是具体步骤：

选择你希望成为移动区域的控件元素。当用户按住鼠标时，控件将在此区域内移动。在我的情况下，它是控件顶部的一个矩形边框。
使用OnMouseDown事件将布尔值（在我的情况下是IsMoving）设置为true，使用MouseUp事件将其设置为false
在第一次MouseDown事件中，使用以下代码设置某个点属性（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;
}

Point RelativeMousePoint = Mouse.GetPosition(Header);
RelativeX = RelativeMousePoint.X;
RelativeY = RelativeMousePoint.Y;

this.RenderTransform = new TranslateTransform

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;
}

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