[WPF]Drag’n’Move d’un objet sur une surface
Voici comment implémenter une fonctionnalité de Drag’n’Move sur une surface comme un Canvas par exemple.
Tout d’abord, voici l’architecture des contrôles que l’on utilisera pour réaliser cette fonctionnalité du côté XAML :
<Window x:Class="DragNMove.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid>
<Canvas x:Name="drag_surface" Background="Azure">
<Label x:Name="drag_label"
MouseDown="drag_label_MouseDown"
MouseMove="drag_label_MouseMove"
MouseUp="drag_label_MouseUp"
Content="Mon Label">
</Label>
</Canvas>
</Grid>
</Window>
Dans mon exemple j’ai choisi de pouvoir déplacer un label dans un canvas.
On peut noter que l’on va s’abonner à 3 évènements afin de réaliser notre fonctionnalité :
- MouseDown : Cet évènement va nous permettre de verrouiller le mouvement de la souris sur notre label : même si la souris sort hors des limites du contrôle, la fonctionnalité de drag’n’move sera active.
Il est aussi possible de préciser le bouton de la souris sur lequel on souhaite activer la fonctionnalité.
- MouseMove : C’est dans cet évènement que l’on va déplacer le contrôle dans notre surface.
- MouseUp : C’est dans cet évènement que le déverrouillera le mouvement de la souris sur le contrôle.
Voici donc l’implémentation de ces 3 évènements :
private void drag_label_MouseDown(object sender, MouseButtonEventArgs e)
{
//On verrouille la souris sur le label
//si le bouton gauche est pressé
if (e.LeftButton.Equals(MouseButtonState.Pressed))
this.drag_button.CaptureMouse();
}
private void drag_label_MouseMove(object sender, MouseEventArgs e)
{
if (e.LeftButton.Equals(MouseButtonState.Pressed))
{
//On modifie la position du label dans le canvas
//en récupérant la position de la souris
Canvas.SetLeft(this.drag_button, e.GetPosition(this.drag_surface).X);
Canvas.SetTop(this.drag_button, e.GetPosition(this.drag_surface).Y);
}
}
private void drag_label_MouseUp(object sender, MouseButtonEventArgs e)
{
//On déverrouille la souris
this.drag_button.ReleaseMouseCapture();
}
Et voilà c’est terminé !…il vous est tout de même possible d’améliorer le tout pour limiter le déplacement à l’intérieur du canvas.