Haciendo un control móvil en WPF

Question

Tengo un panel, dentro de ese panel hay varios controles rectangulares (el número de controles de los vaires) Quiero que el usuario pueda mover los controles dentro del panel para que puedan organizar los controles en la forma que más les convenga. ¿Alguien tiene recursos que pueda leer o simples consejos que me guiarán por el camino correcto?

gracias

Answer 1

puede encontrar mucha inspiración aquí:

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

me di cuenta de un posible método, sencillo de mover un control en un estilo de arrastrar/movimiento ... Estos son los pasos.

1. Seleccione un elemento en su control que desea ser el área de movimiento. Esta es el área en la que, si el usuario sostiene el mouse hacia abajo, el control se moverá. En mi caso, era un borde rectangular en la parte superior del control.
2. Uso caso OnMouseDown para establecer un valor lógico (en mi caso IsMoving) en true y el evento MouseUp para establecer a false

3. En el primer evento MouseDown, establecer alguna propiedad Point (initialPosition) usando el siguiente código

   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. Ahora que tiene la posición de inicio, necesita obtener la posición del mouse en relación con su control de movimiento. Esto es para que no termine haciendo clic en el centro de su encabezado para moverlo y mueve instantáneamente la parte superior izquierda del control a la ubicación del puntero del mouse. Para ello, colocar este código en el evento MouseDown:

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

5. Ahora usted tiene un punto de control se originó al (startX y StartY), la posición del ratón dentro de su control de movimiento (RelativeX, relativey), solo tenemos que mover el control a una nueva ubicación! Hay algunos pasos involucrados en hacer esto. En primer lugar, su control necesita tener una RenderTransform que es una TranslateTransform. Si no desea configurar esto en XAML, puede configurarlo usando this.RenderTransform = new TranslateTransform.

6. Ahora tenemos que establecer las coordenadas X e Y en RenderTransform para que el control se mueva a una nueva ubicación. El siguiente código realiza esta

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

Como se puede adivinar, hay un poco de código dejado (declaraciones de variables, etc), pero esto debería ser todo lo que necesita para empezar :) feliz de codificación.

EDIT:
Un problema que puede encontrar es que esto le permite mover el control fuera del área de su control principal. Aquí hay un código rápida y sucia para solucionar ese problema ...

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

Coloque este código en su evento MouseMove antes de que el movimiento real tiene lugar. Esto verificará si el control está tratando de moverse fuera de los límites del control principal. El comando IsMoving = false hará que el control salga del modo de movimiento. Esto significa que el usuario deberá hacer clic en el área de movimiento nuevamente para tratar de mover el control ya que se habrá detenido en el límite. Si desea que el control continúe el movimiento automáticamente, simplemente quite esa línea y el control saltará de nuevo al cursor tan pronto como esté de vuelta en un área legal.