Eine bewegliche Steuerung in WPF machen

Question

Ich habe eine Verkleidung, in dieser Verkleidung sind einige rechteckige Kontrollen (die Anzahl der Kontrollen vaires) Ich möchte der Benutzer in der Lage sein, die Kontrollen innerhalb der Verkleidung zu bewegen, damit sie die Kontrollen ordnen können so wie es ihnen am besten gefällt. Hat jemand irgendwelche Ressourcen, die ich lesen könnte, oder einfache Tipps, die mich auf den richtigen Weg bringen würden?

dank

Answer 1

Sie können eine Menge Inspiration finden Sie hier:

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

Answer 2

ich eine Kontrolle in einem Drag/verschieben Stil bewegen ... sind die Schritte, hier eine möglichst einfache Methode herausgefunden.

1. Wählen Sie ein Element in Ihrem Steuerelement aus, das Sie als Bewegungsbereich verwenden möchten. Dies ist der Bereich, in dem, wenn der Benutzer die Maus gedrückt hält, das Steuerelement bewegt wird. In meinem Fall war es ein rechteckiger Rand an der Spitze des Steuerelements.
2. Verwenden Sie das OnMouseDown Ereignis ein boolean (in meinem Fall IsMoving) zu wahren und das MouseUp-Ereignis setzen Sie ihn auf false

3. Auf dem ersten MouseDown- Ereignisse zu setzen, setzt einige Punkteigenschaft (Anfangsposition) mit dem folgenden Code

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

4. Jetzt, da Sie die Startposition haben, müssen Sie die Position der Maus relativ zu Ihrer Bewegungssteuerung ermitteln. Dies bedeutet, dass Sie nicht auf die Mitte Ihrer Kopfzeile klicken, um sie zu verschieben, und sie verschiebt den oberen linken Teil des Steuerelements sofort an die Position des Mauszeigers. Um dies zu tun, legen Sie diesen Code in das Ereignis Mousedown:

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

5. Jetzt haben Sie den Punkt der Kontrolle entstand bei (startX und starty), die Position der Maus in Ihrer Bewegungssteuerung (RelativeX, RelativeY), Wir müssen nur das Steuerelement an einen neuen Ort verschieben! Dazu sind ein paar Schritte erforderlich. Zuerst benötigt Ihr Steuerelement eine RenderTransform, die eine TranslateTransform ist. Wenn Sie dies nicht in XAML einstellen möchten, können Sie es unter this.RenderTransform = new TranslateTransform einstellen.

6. Jetzt müssen wir die X- und Y-Koordinaten auf der RenderTransform festlegen, damit das Steuerelement an eine neue Position verschoben wird. Der folgende Code führt dies

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

Wie Sie sich vorstellen können, gibt es ein Stück Code aufhörte (Variablendeklarationen etc.), aber dies sollte alles, was Sie brauchen, um Sie zu erhalten begonnen :) glücklich Codierung.

EDIT:
Ein Problem, das möglicherweise auftreten, ist, dass Sie damit das Steuerelement aus dem Bereich seiner übergeordneten Kontrolle verschieben können. Hier ist einig schneller und schmutziger Code, Problem zu beheben ...

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

Platzieren Sie diesen Code in Ihrem Mousemove-Ereignisse vor der eigentlichen Bewegung stattfindet. Dadurch wird überprüft, ob das Steuerelement versucht, sich außerhalb der Grenzen des übergeordneten Steuerelements zu bewegen. Der Befehl IsMoving = false bewirkt, dass die Steuerung den Bewegungsmodus verlässt. Dies bedeutet, dass der Benutzer erneut auf den Bewegungsbereich klicken muss, um zu versuchen, das Steuerelement zu verschieben, da es an der Grenze angehalten hat. Wenn Sie möchten, dass die Steuerung die Bewegung automatisch fortsetzt, nehmen Sie einfach diese Linie heraus und die Steuerung springt zurück auf den Cursor, sobald sie wieder in einem legalen Bereich ist.