Welcome again to Dotnetfunda. Weeks ago one of our members here at Dotnetfunda asked a question on how to do a drag and drop and there was no answer on his question, so we realized that this type of a question will still come in the future. In this article I will give you a small hello world like demo on how to do a drag and drop in Silverlight.
Introduction
Welcome again to Dotnetfunda. Weeks ago one of our members here at Dotnetfunda asked a question on how to do a drag and drop and there was no answer on his question, so we realized that this type of a question will still come in the future. I this article I will give you a small hello world like demo on how to do a drag and drop in Silverlight.
Background
In this article I will demonstrate to you on how you can implement the drag and drop feature in your Silverlight application. I will not include images where I open visual Studio, everyone knows how to do that. I will only show you the Xaml and the code Behind and one image.
Using the code
We are going to user C# as our language and we will have some xaml to build our UI.
Start
To do a drag and drop feature in your application is very simple. All you need to do is to handle the correct mouse events. Let me give you a logical example.
When you want to drag something , you first select it(Mousedown Event) and while selecting the object you move(MouseMove event) the object to the desired location. When you are happy with the Location of the Object you will release the left mouse button(MouseUp)l.
These will be the only events that will be handled to do the job. Now let us build an object that we will use in our example. Normally what we are going to do is that we are going create a canvas that has an image on and we are going to move the image inside the canvas and it can even overlap. Add the Following Xaml
<
UserControl x:Class="DragAndDrop.MainPage"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"mc:Ignorable="d" Height="300" Width="400">
<Canvas x:Name="MainCanvas" Width="640" Height="480" Background="Silver">
<Image AllowDrop="True" x:Name="imgme" MouseLeftButtonDown="imgme_MouseLeftButtonDown" Visibility="Visible" MouseLeftButtonUp="imgme_MouseLeftButtonUp" MouseMove="imgme_MouseMove" Source="DotNetLogo.jpg"></Image></Canvas></
UserControl>
As you can see the above xaml , we have a canvas and inside a canvas there is an image. I have used the Dotnetfunda login and my code behind looks like this
using
System;using
System.Collections.Generic;using
System.Linq;using
System.Net;using
System.Windows;using
System.Windows.Controls;using
System.Windows.Documents;using
System.Windows.Input;using
System.Windows.Media;using
System.Windows.Media.Animation;using
System.Windows.Shapes;namespace
DragAndDrop{
public partial class MainPage : UserControl{
// Global variables used to keep track of the// mouse position and whether the object is captured// by the mouse.bool isMouseCaptured;double mouseVerticalPosition;double mouseHorizontalPosition;public MainPage(){
InitializeComponent();
}
private void imgme_MouseMove(object sender, MouseEventArgs e){
Image img = sender
as Image;if (isMouseCaptured == true){
//Get the Current Position of the imagedouble CurrentV = e.GetPosition(null).Y - mouseVerticalPosition;double CurrentH = e.GetPosition(null).X - mouseHorizontalPosition;double NewVerticalPos = CurrentV + (double)img.GetValue(Canvas.TopProperty);double NewHorizontalPos = CurrentH + (double)img.GetValue(Canvas.LeftProperty);//set the new position of the imageimg.SetValue(Canvas.TopProperty, NewVerticalPos);
img.SetValue(Canvas.LeftProperty, NewHorizontalPos);
//Make Sure that the Global Variables have the Updated values.mouseVerticalPosition = NewVerticalPos;
//e.GetPosition(null).Y;mouseHorizontalPosition = NewHorizontalPos;
}
}
private void imgme_MouseLeftButtonDown(object sender, MouseButtonEventArgs e){
Image img = sender
as Image;mouseVerticalPosition = e.GetPosition(
null).Y;mouseVerticalPosition = e.GetPosition(
null).X;isMouseCaptured =
true;img.CaptureMouse();
}
private void imgme_MouseLeftButtonUp(object sender, MouseButtonEventArgs e){
Image img = sender
as Image;isMouseCaptured =
false;img.ReleaseMouseCapture();
mouseVerticalPosition = -1;
mouseHorizontalPosition = -1;
}
}
}
I have added the Comments to on the Code. When you run this application you will see that your image in draggable and you can drag it to anywhere in your application.
Conclusion
This is how you can drag a Silverlight object in Silverlight.
Thank you again for visiting DotnetFunda.
Vuyiswa Maseko