.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
david stephan

Home >> Articles >> Silverlight >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Create Drag and Drop Feature in Silverlight Application

Posted By:Diptimaya Patra       Posted Date: April 12, 2010    Points: 25    Category: Silverlight    URL: http://www.dotnetspark.com  

Create Drag and Drop Feature in Silverlight Application. In this article we will see how can we implement Drag and Drop in Silverlight Application with an example.
 

Introduction

In this article we will see how can we implement Drag and Drop in Silverlight 3 Application.

Crating Silverlight Project

Fire up Visual Studio 2008 and create a Silverlight Application. Name it as DragAndDropInSL3.

image1.gif

Open the solution in Blend 3 to design. Actually there is nothing to design but I wanted a good Panel to Drag and Drop. J

I have just designed the Drag Panel.

image2.gif

As you see in the Object and Timeline Pane I have added a Border and named it as "MyPanel" and added a Grid with a Text Block saying "Information Bar".

On the property side I have filled the Border with Linear Gradient and made the Opacity to 50%.

Here is the Xaml code for your reference.


              
                        
                                    
                                                
                                                
                                    
                        
                        
                                    
                        
              

Dragging and Dropping is nothing but a Translate Transform from one position to another. So we will add a Render
Transform for the Border.

                

As you see from above xaml code, I have added the Translate Transform, gave it a name "BorderTransform" and values 0 to X and Y.

Now come to C# code behind, open the file MainPage.xaml.cs

Here is the idea how we will achieve drag and drop for an object.

We will have a Boolean value isMouseCapture which will make us true or false during dragging and dropping.

And, we will take a Point variable clickPosition which will describe the position we clicked.

private Boolean isMouseCapture = false;
private Point clickPosition; 

Now we will have three important events of the Border as follows:

MouseMove="MyPanel_MouseMove"
MouseLeftButtonDown="MyPanel_MouseLeftButtonDown"
MouseLeftButtonUp="MyPanel_MouseLeftButtonUp"


This is very basic, when we drag an object we do Mouse Down, and move the object by Mouse Move and dropping the object by Mouse Up. So we are taking the above events to be fired respectively.

In Mouse Down event write the following code:
private void MyPanel_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
            clickPosition = e.GetPosition(sender as UIElement);
            this.MyPanel.CaptureMouse();
            isMouseCapture = true;
} 

In Mouse Move event write the following code:
private void MyPanel_MouseMove(object sender, MouseEventArgs  e)
{
            if (isMouseCapture)
            {
                this.BorderTransform.X = e.GetPosition(this).X - clickPosition.X;
                this.BorderTransform.Y = e.GetPosition(this).Y - clickPosition.Y;
            }
} 

And finally add the following code to Mouse Up event.
private void MyPanel_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
            this.MyPanel.ReleaseMouseCapture();
            isMouseCapture = false;
}

Now that we are ready to test our application, press F5 to run the application and Drag and Drop anywhere.

Enjoy Coding.
 Subscribe to Articles

     

Further Readings:

Responses

No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend