There are two way of dragging and dropping objects in Silverlight. One way is by changing canvas left – top property and second is by changing translate-transform. Both codes are here.
By changing Canvas Left – Top property
XAML –
<UserControl x:Class=”draggingObjects.Page”
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
Width=”Auto” Height=”Auto” xmlns:d=”http://schemas.microsoft.com/expression/blend/2008″ xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″ mc:Ignorable=”d” HorizontalAlignment=”Left” VerticalAlignment=”Top”>
<Grid x:Name=”LayoutRoot” Background=”White”>
<Canvas Margin=”0,0,-100,-100″>
<Rectangle Height=”100″ Fill=”#FFFF7575″ Stroke=”#FF000000″ Width=”100″ x:Name=”rectDraggable” MouseLeftButtonDown=”rectDraggable_MouseDown” MouseLeftButtonUp=”rectDraggable_MouseUp” MouseMove=”rectDraggable_MouseMove” RenderTransformOrigin=”0.5,0.5″ />
</Canvas>
</Grid>
</UserControl>
C#
namespace draggingObjects
{
public partial class Page : UserControl
{
private Point clickPostion;
private bool isMouseCaptured;
public Page()
{
InitializeComponent();
}
private void rectDraggable_MouseDown(object sender, MouseButtonEventArgs e)
{
clickPostion = e.GetPosition(sender as UIElement);
rectDraggable.CaptureMouse();
isMouseCaptured = true;
}
private void rectDraggable_MouseUp(object sender, MouseButtonEventArgs e)
{
rectDraggable.ReleaseMouseCapture();
isMouseCaptured = false;
}
private void rectDraggable_MouseMove(object sender, MouseEventArgs e)
{
if (isMouseCaptured)
{
double diffX = e.GetPosition(this).X – clickPostion.X;
double diffY = e.GetPosition(this).Y – clickPostion.Y;
rectDraggable.SetValue(Canvas.LeftProperty, diffX);
rectDraggable.SetValue(Canvas.TopProperty,diffY);
}
}
}
}
By Changing Translate-Transformation
XAML-
<UserControl x:Class=”draggingObjects.Page”
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
Width=”Auto” Height=”Auto” xmlns:d=”http://schemas.microsoft.com/expression/blend/2008″ xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″ mc:Ignorable=”d” HorizontalAlignment=”Left” VerticalAlignment=”Top”>
<Grid x:Name=”LayoutRoot” Background=”White”>
<Rectangle Height=”100″ Fill=”#FFFF7575″ Stroke=”#FF000000″ Width=”100″ x:Name=”rectDraggable” MouseLeftButtonDown=”rectDraggable_MouseDown” MouseLeftButtonUp=”rectDraggable_MouseUp” MouseMove=”rectDraggable_MouseMove” RenderTransformOrigin=”0.5,0.5″>
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform x:Name=”recttranslateTransform”/>
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
</Grid>
</UserControl>
C# –
namespace draggingObjects
{
public partial class Page : UserControl
{
private Point clickPostion;
private bool isMouseCaptured;
public Page()
{
InitializeComponent();
}
private void rectDraggable_MouseDown(object sender, MouseButtonEventArgs e)
{
clickPostion = e.GetPosition(sender as UIElement);
rectDraggable.CaptureMouse();
isMouseCaptured = true;
}
private void rectDraggable_MouseUp(object sender, MouseButtonEventArgs e)
{
rectDraggable.ReleaseMouseCapture();
isMouseCaptured = false;
}
private void rectDraggable_MouseMove(object sender, MouseEventArgs e)
{
if (isMouseCaptured)
{
double diffX = e.GetPosition(this).X – clickPostion.X;
double diffY = e.GetPosition(this).Y – clickPostion.Y;
recttranslateTransform.X = diffX;
recttranslateTransform.Y = diffY;
}
}
}
}
Remember if you are choosing the left and top property way object should be wrapped in a canvas.
Tech World 