Drag and Drop in Silverlight 3/4

Vuyiswamb
Posted by in Silverlight category on for Intermediate level | Points: 250 | Views : 8308 red flag
Rating: 5 out of 5  
 1 vote(s)

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 image

double 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 image

img.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
Page copy protected against web site content infringement by Copyscape

About the Author

Vuyiswamb
Full Name: Vuyiswa Maseko
Member Level: NotApplicable
Member Status: Member,MVP,Administrator
Member Since: 7/6/2008 11:50:44 PM
Country: South Africa
Thank you for posting at Dotnetfunda [Administrator]
http://www.Dotnetfunda.com
Vuyiswa Junius Maseko is a Founder of Vimalsoft (Pty) Ltd (http://www.vimalsoft.com/) and a forum moderator at www.DotnetFunda. Vuyiswa has been developing for 16 years now. his major strength are C# 1.1,2.0,3.0,3.5,4.0,4.5 and vb.net and sql and his interest were in asp.net, c#, Silverlight,wpf,wcf, wwf and now his interests are in Kinect for Windows,Unity 3D. He has been using .net since the beta version of it. Vuyiswa believes that Kinect and Hololen is the next generation of computing.Thanks to people like Chris Maunder (codeproject), Colin Angus Mackay (codeproject), Dave Kreskowiak (Codeproject), Sheo Narayan (.Netfunda),Rajesh Kumar(Microsoft) They have made vuyiswa what he is today.

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)