c# - MouseDown event moves cursor to upper left of control -

i've got simple usercontrol placed in canvas on window control. i've attached events mousedown, mouseup, , mousemove in order me drag control around canvas. i've attempted using previewmousedown, previewmouseup, , previewmousemove same result.

this part works there annoying behavior of usercontrol shifting such upper left corner of (point 0,0) moved cursor location click usercontrol. code below limited think essential issue.

window.xaml

<window x:class="dragndropbetweencontrols.mainwindow"         xmlns:local="clr-namespace:dragndropbetweencontrols"         title="mainwindow" minheight="350" minwidth="525">     <canvas>         <local:usercontrol2/>     </canvas> </window> 

usercontrol.xaml

 <usercontrol x:class="dragndropbetweencontrols.usercontrol2" >      <canvas background="antiquewhite">          <grid height="25" width="100" allowdrop="true" name="b2"              mousedown="b2_onmousedown"              mouseup="b2_onmouseup"              mousemove="ui2_mousemove" >              <rectangle fill="aqua" />              <textblock text="move control" verticalalignment="center" horizontalalignment="center" />          </grid>      </canvas> </usercontrol> 

usercontrol.xaml.cs

public partial class usercontrol2 : usercontrol {     private bool ismousedown = false;     public usercontrol2()     {         initializecomponent();     }     private void b2_onmousedown(object sender, mousebuttoneventargs e)     {         uielement ui = (uielement)sender;         ismousedown = true;         ui.capturemouse();     }             void ui2_mousemove (object sender, mouseeventargs e)     {         grid b = (grid)sender;         if (!ismousedown)             return;         uielement parent = (uielement)b.parent;         canvas.setleft(b, e.getposition(parent).x);         canvas.settop(b, e.getposition(parent).y);         e.handled = true;     }     private void b2_onmouseup(object sender, mousebuttoneventargs e)     {         ismousedown = false;         uielement ui = (uielement)sender;         ui.releasemousecapture();         e.handled = true;     } } 

so want cursor , control stay @ same positions relative each other when clicked , throughout move process.

you thoughts/help appreciated!

this might help:

public partial class usercontrol2 : usercontrol {     bool _pinned;     point _offset;      public usercontrol2()     {         initializecomponent();     }      private void b2_onmousedown(object sender, mousebuttoneventargs e)     {         var control = (uielement)sender;         control.capturemouse();          _offset = e.getposition(control);         _pinned = true;     }      private void ui2_mousemove(object sender, mouseeventargs e)     {         if (!_pinned)             return;          var control = (frameworkelement)sender;         var parent = (frameworkelement)control.parent;          canvas.setleft(control, e.getposition(parent).x - _offset.x);         canvas.settop(control, e.getposition(parent).y - _offset.y);         e.handled = true;     }      private void b2_onmouseup(object sender, mousebuttoneventargs e)     {         _pinned = false;         var control = (uielement)sender;         control.releasemousecapture();         e.handled = true;     } } 

disclaimer: haven't tried compile it. sorry that, idea.