Prizes & Awards
My Profile
Active Members
TodayLast 7 Days
more...
|
How to drag and move an image or object in Silverlight ?
This tutorial shows how to drag and move an image within a Silverlight canvas control.
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.
See the code for the code behind class:
public partial class Page : UserControl
{
// Global variable to indicate if user has clicked border
// and started/stopped moving.
private bool moving = false;
private double offSetX;
private double offSetY;
public Page()
{
InitializeComponent();
}
private void border1_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
// Left mouse button clicked within border. start moving.
moving = true;
Point offset = e.GetPosition(border1);
offSetX = offset.X;
offSetY = offset.Y;
}
private void border1_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
// Left mouse button release. Stop moving.
moving = false;
}
private void border1_MouseMove(object sender, MouseEventArgs e)
{
if (moving)
{
// Get the new mouse pointer position
Canvas parent = (Canvas)this.border1.Parent;
Point p = e.GetPosition(parent);
double x = p.X - offSetX;
double y = p.Y - offSetY;
// Set the new position for the border control.
this.border1.SetValue(Canvas.LeftProperty, x);
this.border1.SetValue(Canvas.TopProperty, y);
}
}
}
 You can download a sample project for this tutorial.
|
|