Software Development

How Do I... Implement Drag-n-Drop in C# applications?

<img src="http://t.cbsimg.net/i/z/200606/how_110x85.jpg" align="right" border="0" height="85" hspace="5" vspace="5" width="110" />Windows users have grown accustomed to the Drag-n-Drop convention, where you click on an item and drag it to another location/program to either move, copy, or modify it. If you are an <a href="http://www.techrepublic.com/5264-1-0.html?query=application%20development" target="_blank">application developer</a> for the Windows environment using the <a href="http://www.techrepublic.com/search/search/Microsoft+.NET+Framework.html?t=11&amp;s=0&amp;o=0" target="_blank">.NET Framework</a>, you need to know how to program Drag-n-Drop functionality.

Windows users have grown accustomed to the Drag-n-Drop convention, where you click on an item and drag it to another location/program to either move, copy, or modify it. If you are an application developer for the Windows environment using the .NET Framework, you need to know how to program Drag-n-Drop functionality.

This blog post is also available in PDF form in a TechRepublic download, which includes a sample Visual Studio project file with all of the sample code mentioned.

The Drag events

There are two main events we will be using to implement drag-n-drop. These events are DragEnter and DragDrop. Both of these events will be set on the target object that the user will be dragging other objects to. In our case this target object is a panel called pnlDragTo. This is a normal C# Panel control placed onto a normal Form. This form and control are shown in Figure A.

Figure A

C# Panel control on a normal Form

The pnlDragTo control is near the top of the form and is dark gray. To enable users to drag objects to this panel we need to do three things:

  1. Set the AllowDrop property of the control to True -- if this isn't set the user will not be able to drop objects onto the control.
  2. Set up an event handler for the DragEnter event -- This event will be used to determine if the object being dragged onto the panel is supported by the panel's drag drop functionality.
  3. Set up an event handler for the DragDrop event -- This event is fired when a user drops an object onto the panel.

Handling the DragEnter event

The DragEnter event is fired any time the user is dragging an object over your panel. You could use this event for many different things. For example you could use this in conjunction with the DragLeave and DragDrop events to change the color of the panel as a user drags objects over it. This is a neat UI trick that is used by many applications to alert the user that they can drop objects into a component.

We'll keep it simple though and use the DragEnter event as an opportunity to examine the object that the user is dragging onto our panel. To do this we will use the DragEventArgs object that is sent to our event handler to see if the data for the object the user is dragging corresponds to a file. The code for this is shown in Figure B.

Figure B

DragEnter

The call to e.Data.GetDataPresent is what tells us what kind of data we are dealing with. In this case, we want to know if the data corresponds to a file being placed into our panel. To do this we send the FileDrop value of the DataFormats object to the GetDataPresent method. If the data corresponds to a file the GetDataPresent method will return true, else it will return false.

If a true value is returned from GetDataPresent we set the effect to Move, else we set the effect to None. Doing this gives the user a visual alert to indicate that the object can or cannot be dropped into our panel.

Handling the DragDrop event

The next event we will work with is the DragDrop event. This event is fired when the user releases the mouse button and the object is "dropped" onto our panel. Generally this event is used to examine the object which was dropped and perform some type of functionality on it. For this article we will use the DragDrop event to determine if the object being dropped is a file, and if it is, display the information associated with the file. The code for this is shown in Figure C and the output is shown in Figure D.

Figure C

DragDrop

Figure D

Output file information

As you can see we use the same GetDataPresent method here that we used in the DragEnter event. This is because we need to examine the object being dropped and make sure that it is of the correct type.

If the object is of the correct type we call the DragEventArgs.Data.GetData method and tell it we're looking for FileDrop data. This GetData method returns an array of strings. Using a string array allows the program to handle multiple files being dropped at the same time. Each string within the array is the full path to a file that was included in the drop.

We then loop through the array and get the information for each of the files included within the array. This is done by creating a new FileInfo object for each file and accessing the needed properties.

Other types of drag-n-drop

While the code shown handles files, it is just as easy to implement drag-n-drop for other types of objects. To do this simple replace DataFormats.FileDrop with whatever type of object you want to accept.

8 comments
mehwissh
mehwissh

HI, I am working with c# windows application. I am adding some controls in the toolbar at design time.After running the form i want to drag and drop the controls from toolbar to panel?How to do?.Any one give me the code plz... Regards,

mehwissh
mehwissh

HI, I am working with c# windows application. I am adding some controls in the toolbar at degin timeAfter running the form i want drag and drop the control from toolbar to panelposition?How to do?.Any one give me the code plz... Regards,

polycoder
polycoder

Nice one! I've just discovered this site, and it's most definitely one for the budding .Net developer. Nice clear examples (rare on the net these days) good use of illustrations too. Definately one to bookmark. Thanks. :)

BALTHOR
BALTHOR

The software is already written and this is a script reader or interpreter program displaying a script interpretation of the program.I am seeing software as written in the Torrent with a click and choose method.What kind of program do you wish to write?Then a click box for stuff like 'file'.I think that it was --Just express an interest in software writing then go as far as you want.

zs_box
zs_box

Sounds good.... I think :)

bakdo03
bakdo03

What are you trying to tell us?

chapman.tim
chapman.tim

That sounds like it would be correct 60% of the time...every time.

Editor's Picks