The control that you like drag or move with the mouse can be embedded within a Border control and then handle the mouse down, up and move events to make the object move within your layout panel.
See sample .xaml code: |
<Canvas x:Name="LayoutRoot" Background="White">
<Border x:Name="border1"
Canvas.Top="100"
Canvas.Left="10"
MouseLeftButtonDown="border1_MouseLeftButtonDown"
MouseLeftButtonUp="border1_MouseLeftButtonUp"
MouseMove="border1_MouseMove">
<Image x:Name="MyImage" Source="images/Basket.png" Stretch="Uniform" ></Image>
</Border>
</Canvas> |
|
|
|
In the above code, a Border control is placed in the Canvas. The most important code to note is: |
MouseLeftButtonDown="border1_MouseLeftButtonDown"
MouseLeftButtonUp="border1_MouseLeftButtonUp"
MouseMove="border1_MouseMove" |
The above lines define 3 events that we like to handle. As the name indicates, we are handling the mouse button down, mouse button up and mouse move events for the left mouse.
In the code behind, when the left button is pressed, we will set a global variable to indicate that user has started moving. In the mouse move event, we will get the current location of the mouse pointer and then set the new position for the border control. When the left mouse button is released, we will reset the global variable so that we will not move the object any more. |
| You can download a code for this tutorial. |
