WinForms - Using Custom Cursors With Drag & Drop

A week or so ago, a comment was left on the WinForms Custom Cursors tutorial asking about how to change the cursor during a drag and drop operation. This is a great question, because, well, its not at all obvious how to do. The first time I needed to do it, it took me quite a while to find out how - and I had to piece the answer together from a number of different sources.

But no more! That comment reminded me of that pain, so I decided to write up a tutorial explaining exactly how to set the cursor to whatever you want during a drag drop operation. This tutorial won't go in depth into the standard Drag & Drop code - there are dozens and dozens of tutorials out there that go through basic WinForms drag-drop (although, if you'd like us to write one of our own, just let us know in the comments). So without further ado, a picture of the simple app we will be creating:

So what do we have here? Well, its a tree view with some nodes, and an empty list box. We are going to make it so that you can drag a node from the tree view into the list box - a pretty simple application of drag and drop. What is going to make this special is that the cursor will be the text of the node you are dragging when your mouse is over the list box, like so:

So lets start building this class. I'm going to assume you know how to use the form designer to pull in a list view and a tree view, so I'm not going to explain/show the designer created code :P. In the code below, the variable _DragSrc is the Tree View, and the variable _DragDest is the List View. First we are going to set up the basic drag drop stuff:

So with the code above, you can drag a node from the tree view and drop it in the list box (And the standard drag copy cursor will be used). Lets do a quick walkthrough of what this code is doing. In the constructor, I attach to 3 events - the MouseDown on the tree view, and the DragEnter and DragDrop events on the list view. Also, we set the property AllowDrop to true on the list view - because otherwise, the list view would never receive any drag events. We will take a look at the action in the DragSource_MouseDown function first.

Here, we ignore the mouse down if it is not the left mouse, and we also ignore it if where the user clicked is not over a node in the tree. Otherwise, we save the initial click point in the field _OrigMousePoint, and attach two more events to the tree view. These are MouseMove, so we can actually detect when the drag starts, and MouseUp so we can detect if the user didn't actually want to drag. The DragSource_MouseUp is really simple - we just detach our hooks from the MouseUp and MouseMove events. The DragSource_MouseMove is a bit more complicated.

This is because it is generally nice to have a drag threshold, since most of the time users do not keep there mouse perfectly still. We don't want to initiate a drag operation unless the user really wants it, so in this case we wait until the mouse has moved MinimumDragDistance in either the X or the Y direction (in this case 4 pixels). But once we have passed that threshold, we can detach our hooks from the MouseMove and MouseUp events, and (if the left mouse button is down), actually initiate the drag. First, just as a nicety, we set the selected node to the node that was clicked on (the tree view default behavior does not select a node until MouseUp). And then we start a drag drop operation by calling DoDragDrop on the tree view, with the text of the node as the data, and the only allowed D&D effect being Copy.

Now that we got something to start dragging, lets take a look at the dropping side of things. First, we have the function DragDest_DragEnter, which is attached to the DragEnter event on _DragDest (the list view). This event will be fired whenever the mouse enters the list view while dragging something. A little side note here, in case people were wondering - the regular mouse events do not fire during a drag operation - so you will not get events like MouseEnter, MouseLeave, or MouseMove. You have to attach to the corresponding DragEnter, DragLeave, or DragOver events.

When our DragDest_DragEnter function gets called, we first check what kind of data the drag is carrying. In this case, we only accept strings, so if there is no string data present, we set the drag drop effect to None. This will cause the cursor to be the "No" symbol while over the list view. If there is string data preset, we set the effect to Copy, and we will get a standard "copy" cursor over the list view.

And now for the actual drop - DragDest_DragDrop. This is called when the user drops something on the list view. We again check there is string data, and if there isn't, we do nothing. Otherwise, we pull the string out, and add it to the list view.

Ok, so all that was for your standard drag & drop. But what we actually care about today is changing the cursor - we don't want to use the standard "copy" cursor in this case. And to do that, we have to take a look at yet another event in this drag and drop world - the GiveFeedback event. This is an event that you can attach to on the source of the drag. It gets called whenever anything changes about the drag - for instance, when someone changes the current effect (like we do in the DragDest_DragEnter function). So in the case of this code, we attach the following function to the GiveFeedback event on the tree view:

The main thing you can do with this event is the exact thing we want to do - we want to turn off the default cursors. So here, I am saying that if the drag effect is equal to Copy, we do not want to use the default cursors. You could potentially set the actual cursor here as well, but I'm not going to do that in this case. I'm going to add code to the DragDest_DragEnter function:

Now that we've set UseDefaultCursors to false, we can actually set the cursor. However, we can't do it the normal way - by setting the Cursor property on the control we care about to the cursor we want. Instead, we have to set the static variable Current on the Cursor class to the cursor we want - this is because drag drop operations don't ever pay attention to the cursors set for an individual control.

So here (if there is string data) we pull it out, and then measure it. You can't measure a string without a graphics object, so we initially create a tiny bitmap just so we can get a graphics object out. Once we have the correct size of the string, we make a new bitmap, and draw the string on that bitmap. Then, of course, we create a cursor out of that bitmap (using the cursor creation code from here, and we set the current cursor to that new cursor. Finally, we clean up and dispose some things.

And now, with that code, you will get the text of the node as the cursor over the list view instead of the normal copy cursor! Here is all the code in its full glory:

Hopefully this tutorial anwsers everyone's questions about the interations between cursors and drag drop operations. You can download the Visual Studio solution for the application displayed above here if you would like. As always, questions and comments are welcome.