WPF mouse capture interacts with controls--uielement.capturemouse

The scenario is this, I need to drag an element to move on the screen, register the MouseMove event of the moved element, but when the mouse moves to the outside of the moved element, the movement fails, and the mouse gesture becomes the normal arrow shape, then found the following solution.

This example implements a simple example of moving a mouse control control to achieve the desired effect with mouse capture:

1. To create a new WPF application, to demonstrate the effect, the XAML is simply modified as follows: A total of two circles (green, yellow), below will implement how to drag them with the mouse to move.

<window x:class= "Wpfapplication.mainwindow"
Xmlns= "Http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x= "Http://schemas.microsoft.com/winfx/2006/xaml"
Title= "MainWindow" height= "width=" 525 ">
<canvas x:name= "LayoutRoot" mouseleftbuttondown= "Layoutroot_mouseleftbuttondown" mouseleftbuttonup= "LayoutRoot _mouseleftbuttonup "mousemove=" Layoutroot_mousemove ">
<ellipse canvas.left= "canvas.top=", "width=", "height=" and "fill="/>
<ellipse canvas.left= "" "canvas.top=" "width=" "All" height= "fill=" Yellow
</Canvas>
</Window>

2. Background CS as follows

<summary>
The interactive logic of MainWindow.xaml
</summary>
public partial class Mainwindow:window
{
Public MainWindow ()
{
InitializeComponent ();
}

Point pbefore = new Point ();//mouse click Front coordinate
Point ebefore = new Point ();//circle Move Front coordinate
BOOL Ismove = false;//whether to move

Root left mouse button press event
private void Layoutroot_mouseleftbuttondown (object sender, MouseButtonEventArgs e)
{
if (e.originalsource.gettype () = = typeof (Ellipse))
{
This.pbefore = E.getposition (null);//Get pre-click mouse coordinates
Ellipse el = (Ellipse) E.originalsource;
This.ebefore = new Point (Canvas.getleft (EL), Canvas.gettop (EL));//Get the coordinates of the front circle of the Click
Ismove = true;//began to move.
El. CaptureMouse ();//mouse captures this circle
}
}

Root left mouse button release event
private void Layoutroot_mouseleftbuttonup (object sender, MouseButtonEventArgs e)
{
if (e.originalsource.gettype () = = typeof (Ellipse))
{
Ellipse el = (Ellipse) E.originalsource;
Ismove = false;//ended up moving
El. Releasemousecapture ();//mouse Release this circle
}
}

Root Mouse Move Event
private void Layoutroot_mousemove (object sender, MouseEventArgs e)
{
if (E.originalsource! = null && e.originalsource.gettype () = = typeof (Ellipse) && ismove)
{
Ellipse el = (Ellipse) E.originalsource;
Point P = e.getposition (null);//Get coordinates in mouse movement
Canvas.setleft (el, ebefore.x + (p.x-pbefore.x));
Canvas.settop (el, Ebefore.y + (P.Y-PBEFORE.Y));
}
}

}

Because do not know the mouse will click on which part of the circle, so you need to calculate the mouse coordinate pbefore, set the coordinates of the circle Ebefore;
Here in the left mouse button click on the circle, set the capturemouse, in the mouse release left button, set releasemousecapture, try to comment out the two lines, observe the different effects of the program running:

(1). Move one of the circles when it touches the other circles:

Set the mouse capture, the moving circle will pass through the other circles without causing any effect;

Without setting the mouse capture, moving the circle, touching other circles, will happen to jump, to move the other circle;

(2). Move the circle to the edge of the window, even outside the window:

Set the mouse capture, the circle can be moved outside the window;

Without setting the mouse capture, the circle will be bound within the window;

You can try to keep only capturemouse, while commenting out Releasemousecapture, the mouse will not be released after capturing the circle, you will not even be able to click the Close button in the upper left corner of the window;

Mouse capture and release CaptureMouse and Releasemousecapturewill have a big effect on some mouse interaction with controls, because when you capture a control, The mouse will no longer be able to manipulate other controls, nor will it be affected by other controls;

WPF mouse capture interacts with controls--uielement.capturemouse