c# - WPF moving border around on screen -

i'm making game inventory system have grid , borders take grid space have background image of icon. example in grid position 0,0 have border background of health potion. want able drag border other grid location. right i'm working on clicking , dragging border follow mouse.

what have far sort of works not really. if sort of freaks out when left click on icon , move slowly. can move out of icon fast , doesn't keep stops moving until i'm on it. ideas on how kind of functionality?

public partial class mainwindow : window     {         translatetransform trans = new translatetransform();         border border;          public mainwindow()         {             initializecomponent();              // create broder , set it's background image             border = new border();              border.visibility = system.windows.visibility.visible;             var img = (image)mastergrid.findresource("notepad");             var imgbrush = new imagebrush(img.source);             border.background = imgbrush;             border.margin = new thickness(2.0);              // add border grid             grid.setrow(border, 0);             grid.setcolumn(border, 1);             grid.setrowspan(border, 2);             grid.setcolumnspan(border, 1);             invgrid.children.add(border);              // hook events             _00.mouseup += new system.windows.input.mousebuttoneventhandler(_00_mouseup);             border.mousedown += border_mousedown;             border.mousemove += border_mousemove;         }          void border_mousemove(object sender, mouseeventargs e)         {             // make border follow mouse position             trans.x = e.getposition(border).x;             trans.y = e.getposition(border).y;         }          void border_mousedown(object sender, mousebuttoneventargs e)         {             border.rendertransform = trans;         }          private void _00_mouseup(object sender, system.windows.input.mousebuttoneventargs e)         {             messagebox.show("test");         }     } 

it's not easy, give steps:

1. you should know sizes of cells, able calculate position of each one.

2. prepare container (a grid example), moving purpose.

3. when start dragging put item in container (2.), set position under cursor , hide cell's content.

4. when drop item, calculate on cell (maybe there function control under cursor) , rest of logic.

i'm not sure if dragging possible in case of regular controls, maybe have replace grid canvas.

try this:

<grid>     <border x:name="dragcontainer" width="40" height="40" />      <!-- other stuff - grid items --> </grid> 

and modify border's margin.

another way do dragging inside canvas, able set canvas.left, canvas.top - should work properly.

<canvas>     <border x:name="dragcontainer" width="40" height="40" />      <!-- other stuff - grid items --> </canvas>