Comment faire glisser un UserControl à l'intérieur d'un Canvas

Je suis en train d'écrire ma première application WPF. J'ai une Toile dans laquelle l'utilisateur peut ajouter un UserControl sous-classes contenant un formulaire. L'utilisateur doit être en mesure de faire glisser ces UserControl autour de la Toile. Quelle est la meilleure pratique de le faire avec WPF?
Merci.

source d'informationauteur loris

  1. 36

    Ceci est fait dans silverlight et pas dans WPF, mais il devrait fonctionner de la même.

    Créer deux propriétés privées sur le contrôle: 

    protected bool isDragging;  
private Point clickPosition;

    Puis attatch certains gestionnaires d'événements dans le constructeur de la commande:

    this.MouseLeftButtonDown += new MouseButtonEventHandler(Control_MouseLeftButtonDown);
this.MouseLeftButtonUp += new MouseButtonEventHandler(Control_MouseLeftButtonUp);
this.MouseMove += new MouseEventHandler(Control_MouseMove);

    Maintenant créer ces méthodes:

    private void Control_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    isDragging = true;
    var draggableControl = sender as UserControl;
    clickPosition = e.GetPosition(this);
    draggableControl.CaptureMouse();
}

private void Control_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
    isDragging = false;
    var draggable = sender as UserControl;
    draggable.ReleaseMouseCapture();
}

private void Control_MouseMove(object sender, MouseEventArgs e)
{
    var draggableControl = sender as UserControl;

    if (isDragging && draggableControl != null)
    {
        Point currentPosition = e.GetPosition(this.Parent as UIElement);

        var transform = draggableControl.RenderTransform as TranslateTransform;
        if (transform == null)
        {
            transform = new TranslateTransform();
            draggableControl.RenderTransform = transform;
        }

        transform.X = currentPosition.X - clickPosition.X;
        transform.Y = currentPosition.Y - clickPosition.Y;
    }
}

    Quelques choses à noter ici:

    1. Ce ne doit pas être dans une toile. Il peut être dans un stackpanel, ou de la grille.

    2. Cela rend le contrôle entier déplaçable, ce qui signifie que si vous cliquez n'importe où dans le contrôle et faites-le glisser faites glisser le contrôle de l'ensemble. Vous ne savez pas si c'est exactement ce que vous voulez.

    Edit-

    L'expansion sur certains des détails à votre question:
    La meilleure façon que j'ai mise en œuvre de cette est de créer une classe qui hérite de UserControl, peut-être appelé DraggableControl qui est construite avec ce code, puis tous les déplaçable contrôles devraient étendre la DraggableControl.

    Edit 2 - Il y a un petit problème lorsque vous avez un datagrid dans ce contrôle. Si vous trier une colonne dans la grille de la MouseLeftButtonUp événement se déclenche jamais. J'ai mis à jour le code de sorte que isDragging est protégé. J'ai trouvé la meilleure solution est de combiner cette méthode anonyme à la LostMouseCapture cas de la grille de données: 

    this.MyDataGrid.LostMouseCapture += (sender, e) => { this.isDragging = false; };
  2. 2

    Concernant Corey Sunwold solution - je me suis débarrassé de MouseUp et les événements MouseDown et je me suis simplifié la méthode MouseMove à l'aide de MouseButtonState comme ci-dessous 🙂 je suis en utilisant la Toile.SetLeft() et de la Toile.SetTop() à la place RenderTransform je n'ai pas besoin de stocker de l'ancienne position d'événement MouseDown.

    if (e.LeftButton == MouseButtonState.Pressed && draggableControl != null)
{
   //...
}
  3. 0

    Ce code fonctionne parfaitement!

    Button newBtn = new Button();
newBtn.AddHandler(Button.ClickEvent, new RoutedEventHandler(BtTable_Click));
newBtn.AddHandler(Button.PreviewMouseLeftButtonDownEvent, new MouseButtonEventHandler(BtTable_MouseLeftButtonDown));
newBtn.AddHandler(Button.PreviewMouseLeftButtonUpEvent, new MouseButtonEventHandler(BtTable_MouseLeftButtonUp));
newBtn.AddHandler(Button.PreviewMouseMoveEvent, new MouseEventHandler(BtTable_MouseMove));

    Bouton Déplacer

    private object movingObject;
private double firstXPos, firstYPos;
private int ButtonSize = 50;
private void BtTable_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
Button newBtn = sender as Button;
Canvas canvas = newBtn.Parent as Canvas;
firstXPos = e.GetPosition(newBtn).X;
firstYPos = e.GetPosition(newBtn).Y - ButtonSize;
movingObject = sender;
//Put the image currently being dragged on top of the others
int top = Canvas.GetZIndex(newBtn);
foreach (Button child in canvas.Children)
if (top < Canvas.GetZIndex(child))
top = Canvas.GetZIndex(child);
Canvas.SetZIndex(newBtn, top + 1);
Mouse.Capture(null);
}
private void BtTable_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
Button newBtn = sender as Button;
Canvas canvas = newBtn.Parent as Canvas;
movingObject = null;
//Put the image currently being dragged on top of the others
int top = Canvas.GetZIndex(newBtn);
foreach (Button child in canvas.Children)
if (top > Canvas.GetZIndex(child))
top = Canvas.GetZIndex(child);
Canvas.SetZIndex(newBtn, top + 1);
Mouse.Capture(newBtn);
}
private void BtTable_MouseMove(object sender, MouseEventArgs e)
{
if (e.LeftButton == MouseButtonState.Pressed && sender == movingObject)
{
Button newBtn = sender as Button;
Canvas canvas = newBtn.Parent as Canvas;
//Horizontal
double newLeft = e.GetPosition(canvas).X - firstXPos - canvas.Margin.Left;
//newLeft inside canvas right-border?
if (newLeft > canvas.Margin.Left + canvas.ActualWidth - newBtn.ActualWidth)
newLeft = canvas.Margin.Left + canvas.ActualWidth - newBtn.ActualWidth;
//newLeft inside canvas left-border?
else if (newLeft < canvas.Margin.Left)
newLeft = canvas.Margin.Left;
newBtn.SetValue(Canvas.LeftProperty, newLeft);
//Vertical
double newTop = e.GetPosition(canvas).Y - firstYPos - canvas.Margin.Top;
//newTop inside canvas bottom-border?
//-- Bottom --
if (newTop > canvas.Margin.Top + canvas.ActualHeight - newBtn.ActualHeight - ButtonSize)
newTop = canvas.Margin.Top + canvas.ActualHeight - newBtn.ActualHeight - ButtonSize;
//newTop inside canvas top-border?
//-- Top --
else if (newTop < canvas.Margin.Top - ButtonSize)
newTop = canvas.Margin.Top - ButtonSize;
newBtn.SetValue(Canvas.TopProperty, newTop);
}
}

    Heureux de codage 😉

  4. 0

    Corey réponse est la plupart du temps correct, mais il manque un élément essentiel: la mémoire de ce que la dernière transformation a été. Sinon, lorsque vous déplacez un élément, relâchez le bouton de la souris, puis cliquez sur cet élément nouveau, la transformation se remet à (0,0) et le contrôle revient à son origine.

    Voici une version légèrement modifiée qui fonctionne pour moi:

    public partial class DragItem : UserControl
{
protected Boolean isDragging;
private Point mousePosition;
private Double prevX, prevY;
public DragItem()
{
InitializeComponent();
}
private void UserControl_MouseLeftButtonDown(Object sender, MouseButtonEventArgs e)
{
isDragging = true;
var draggableControl = (sender as UserControl);
mousePosition = e.GetPosition(Parent as UIElement);
draggableControl.CaptureMouse();
}
private void UserControl_MouseLeftButtonUp(Object sender, MouseButtonEventArgs e)
{
isDragging = false;
var draggable = (sender as UserControl);
var transform = (draggable.RenderTransform as TranslateTransform);
if (transform != null)
{
prevX = transform.X;
prevY = transform.Y;
}
draggable.ReleaseMouseCapture();
}
private void UserControl_MouseMove(Object sender, MouseEventArgs e)
{
var draggableControl = (sender as UserControl);
if (isDragging && draggableControl != null)
{
var currentPosition = e.GetPosition(Parent as UIElement);
var transform = (draggableControl.RenderTransform as TranslateTransform);
if (transform == null)
{
transform = new TranslateTransform();
draggableControl.RenderTransform = transform;
}
transform.X = (currentPosition.X - mousePosition.X);
transform.Y = (currentPosition.Y - mousePosition.Y);
if (prevX > 0)
{
transform.X += prevX;
transform.Y += prevY;
}
}
}
}

    La clé est de stocker la précédente décalages X et Y, et puis de les utiliser pour augmenter le courant du mouvement de décalage pour arriver à la bonne agrégation de décalage.

  5. -1

    J'ai eu quelques difficultés avec les solutions et qui a abouti à ceci:

        public partial class UserControlDraggable : UserControl
{
public UserControlDraggable()
{
InitializeComponent();
MouseLeftButtonDown += new MouseButtonEventHandler(Control_MouseLeftButtonDown);
MouseLeftButtonUp += new MouseButtonEventHandler(Control_MouseLeftButtonUp);
MouseMove += new MouseEventHandler(Control_MouseMove);
}
private void Control_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
_isDragging = true;
_mouseLocationWithinMe = e.GetPosition(this);
CaptureMouse();
}
private void Control_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
_isDragging = false;
this.ReleaseMouseCapture();
}
private void Control_MouseMove(object sender, MouseEventArgs e)
{
if (_isDragging)
{
var mouseWithinParent = e.GetPosition(Parent as UIElement);
Canvas.SetLeft(this, mouseWithinParent.X - _mouseLocationWithinMe.X);
Canvas.SetTop(this, mouseWithinParent.Y - _mouseLocationWithinMe.Y);
}
}
protected bool _isDragging;
Point _mouseLocationWithinMe;
}

    Fondamentalement, c'est Corey exemple, mais tire parti des conseils de l'Hawlett. Il ne fonctionne que lorsque le conteneur parent est une Toile. Aussi, il mérite d'être pomponnée avec des limites à garder à l'utilisateur de faire glisser le contrôle à des endroits qu'il ne devrait vraiment pas être.