Tools Used: Visual C# .NET
Drag and Drop in C# has been a question on the UseNet and many websites on C# so I have decided to tackle the problem here. This is an update of the directory tree component download on this web site. The directory component allows you to peruse directories and files. To demonstrate drag and drop, I've added to the component the capability of dragging and dropping files from within the treeview. If you hold the control key down, you can also copy files. All the source for this is in the download above.
Drag and Drop in C#
Microsoft has added a series of properties and events to help you use drag and drop with your controls. You must set the AllowDrop property to allow for dragging and dropping within the tree view. Also, there are about 5 major events available for trapping drag-drop operations. We use 4 of them here: ItemDrag, DragOver, DragEnter, and DragDrop.
Event |
How It is Triggered |
ItemDrag |
The Initial Event triggered when the user starts to drag an item in the treeview. |
DragOver |
This is specific to treeviews and listviews and traps the item being dragged in the event parameter. AlsoHere is where you call DoDragDrop |
DragEnter |
This event occurs when the user drags over a drag and drop control with the mouse during a drag-drop operation |
DragLeave |
Occurs when the user moves the mouse onto the control when dragging an object. |
DragDrop |
Occurs when the user releases the mouse over the drop target |
GiveFeedback |
Gives feedback about the effects and the current cursor |
The Drag and Drop functionality also has another facet of control called DragDropEffects. Below is a table of these enumerations:
Effects |
Description |
Move |
The drag appears as a box along with the cursor. Data is moved to the target through the drop operation. |
Copy |
The drag appears as a box with a plus sign along with the cursor. Data is copied to the target through the drop operation. |
Scroll |
The drop target is scrolling while the item is being dragged. |
Link |
Data from the source of the item being dragged is linked to the target it is being dropped into. |
All |
The data is moved and scrolled in the drop target |
The only effects we are concerned with in this example is the Move and Copy Effects. When the user begins dragging, the delegated method below is called and it is here where we initiate the drag drop functionality by calling DoDragDrop. Do drag drop passes the data and the effect to initiate. We set the effect based on whether the user has pressed the control key or not. In this example, we don't actually use the data, since it's part of the same control, so it isn't so important what the first parameter is. We just maintain what is being dragged in a field of our class. Note that the Node being dragged is determined from the ItemDragEventArg received in this method:
- protected void treeView1_ItemDrag(object sender, System.WinForms.ItemDragEventArgs e)
- {
-
- TreeNode aNode = (TreeNode)e.Item;
- Bitmap bmp = imageList1.GetBitmap(2);
-
- if (aNode.ImageIndex == 2)
- {
- StartNode = aNode;
-
-
-
- if (CurrentEffect == DragDropEffects.Move)
- {
- CurrentState = States.Move;
- }
- else
- {
- CurrentState = States.Copy;
- }
-
-
- this.DoDragDrop(imageList1.GetBitmap(aNode.ImageIndex), CurrentEffect);
- }
- }
Once the drag and drop operation is set in motion, we need to handle the events along the way. Below we handle DragOver by highlighting folders as we drag over them. DragEnter just maintains the effect:
- protected void treeView1_DragOver(object sender, System.WinForms.DragEventArgs e)
- {
-
- e.Effect = CurrentEffect;
-
-
- TreeNode aNode = FindTreeNode(e.X, e.Y);
- if (aNode != null)
- {
-
-
- if ((aNode.ImageIndex == 1) || (aNode.ImageIndex == 0))
- {
- aNode.BackColor = Color.DarkBlue;
- aNode.ForeColor = Color.White;
- if ((OldNode != null) && (OldNode != aNode))
- {
- OldNode.BackColor = OriginalNode.BackColor;
- OldNode.ForeColor = OriginalNode.ForeColor;
- }
- OldNode = aNode;
- }
- }
- }
- protected void treeView1_DragEnter(object sender, System.WinForms.DragEventArgs e)
- {
- e.Effect = CurrentEffect;
- }
When we let go of the mouse while dragging, the DragDrop event is triggered. Here we can copy or move our file node, depending on what effect was set.
-
- protected void treeView1_DragDrop(object sender, System.WinForms.DragEventArgs e)
- {
-
- bool movingFile = (CurrentEffect == DragDropEffects.Move);
-
- TreeNode DropNode = FindTreeNode(e.X, e.Y);
-
- CurrentState = States.Idle;
- CurrentEffect = DragDropEffects.Move;
-
- if (DropNode.ImageIndex != 2)
- {
-
- if (movingFile)
- {
- MoveFile(StartNode, DropNode);
- }
- else
- {
- CopyFile(StartNode, DropNode);
- }
- this.Invalidate(new Region(this.ClientRectangle));
- treeView1.SelectedNode = DropNode;
- }
- }
The CopyFile and MoveFile methods perform some directory and file operations from the System.IO namespace. They also populate and depopulate the tree, accordingly. Below is the MoveFile method for doing a file move and restructuring the directory tree:
- private void MoveFile(TreeNode Node1, TreeNode Node2)
- {
- string strdir1 = Node1.Parent.FullPath;
- string strdir2 = Node2.FullPath;
- strdir1 = strdir1 + "\\" + Node1.Text;
- strdir2 = strdir2 + "\\" + Node1.Text;
- Directory.Move(strdir1, strdir2);
- TreeNode aNode = new TreeNode(Node1.Text, 2, 2);
- Node1.Remove();
- Node2.Nodes.Add(aNode);
- }
I hope that this article reveals some of the mystery behind drag and drop. I'm still trying to figure out how to get the image to actually drag with the mouse (rather than a gray box) like it did in Visual C++.