Drag and drop is actually the same as copy & paste using the mouse instead of the keyboard. In both cases you have a source control (where you are cutting or copying from) and a target control (where you are pasting to). During either operation, a copy of the data is maintained in memory. Cut and paste uses the Clipboard; drag and drop uses a DataObject object, which is in essence a private clipboard.
VB6 supported several drag and drop types: Standard and OLE drag and drop with manual and automatic modes for both types.
1.1. Standard Drag and Drop
Data is passed by using the source control as a drag and drop parameter. The drag operation sets the source control in drag and drop mode. DragOver and DragDrop event handlers in the target control receive the source control so they can obtain the data to be copied or moved from the source control itself.
Hello, I'm trying to drag drop file/s into a textbox from windows explorer using vb6. I can't figure it out how to create textboxes at runtime depending on how many file selection did I make for dragdrop purposes.
1.2. OLE Drag and Drop
Data is passed by using the source control as a drag and drop parameter. The data to be copied or moved is set at the beginning of the drag and drop operation inside the OLEStartDrag event handler or by demand by the OLESetData event handler. The OLEDragOver and OLEDragDrop event handlers received the data in a DataObject parameter.
1.3. .NET drag and drop
Drag and Drop in .NET is very similar to VB6 manual OLE drag and drop. The concept and functionality is the same but the names and sequences of events are different.
Handling of the DragOver event is very different in .NET. VB6 provided one handler with the action specified by a state parameter. In .NET the handling is now realized by three different event handlers, one handler for each possible DragOver “states”: drag enter, drag over and drag leave.
Programming of the drag and drop feedback to the user has changed as well. In VB6, the visual notification of allowed drag and drop operations had to be programmed in the DragOver event, where the mouse icon could be changed to another to indicate that the control allows drag and drop operations. The code in the DragDrop event was the one that managed what to do with the data dropped into the control. In .NET, the controls that allow drag and drop events need to have that feature enabled first. The feature is enabled by setting the AllowDrop property of the control to true. Also, the types of allowed drag and drop operations must be specified by setting a DragDropEffect value in the drag over or drag enter event handlers.
.NET now handles automatically the changes in mouse icons during drag and drop operations. If the programmer desires to handle mouse pointer icons manually, the procedure for doing it is somewhat different than in VB6. In VB6’s standard drag and drop, the mouse pointer changes had to be specified in the event handlers of each one of the target controls. In .NET, handling this functionality can be simplified by handling the mouse pointer changes in the GiveFeedback event handler of the source control.
1.4. Differences between VB6 standard drag and drop and .NET drag and drop.
Functionality | Visual Basic 6.0 | .NET |
Start drag method | object.Drag | object.DoDragDrop |
Drag drop event handler | object_DragDrop | object_DragDrop |
Drag Over event handler | object_DragOver | object_DragEnter object_DragOver object_DragLeave |
Drag Over states | state parameter of DragOver event handler | object_DragEnter object_DragOver object_DragLeave |
Drag icon property | object.DragIcon in each control’s DragOver event handler | 1.GiveFeedbackEventArgsparameter in drag over event handler (auto) 2.object.Cursor property of target control (custom) |
1.5. Differences between VB6 OLE drag and drop and .NET drag and drop.
Functionality | Visual Basic 6.0 | .NET |
Start drag method | object.OLEDrag | object.DoDragDrop |
Start drag event handler | object_OLEStartDrag | N/A (use DoDragDrop method) |
Drag Drop event handler | object_OLEDragDrop | object_DragDrop |
Drag Over event handler | object_OLEDragOver | object_DragEnter object_DragOver object_DragLeave |
Feedback event handler | object_OLEGiveFeedback | object_GiveFeedback |
Drag complete handler | object_OLECompleteDrag | object_DragDrop (target) |
Set Data event handler | object_OLESetData | N/A ( use DragEventArgs Data.SetData method in DragDrop event handler) |
See also:
- 1. VB6 Drag and Drop Overview
This walkthrough demonstrates how to create a custom user control that can participate in drag-and-drop data transfer in Windows Presentation Foundation (WPF).
In this walkthrough, you will create a custom WPF UserControl that represents a circle shape. You will implement functionality on the control to enable data transfer through drag-and-drop. For example, if you drag from one Circle control to another, the Fill color data is copied from the source Circle to the target. If you drag from a Circle control to a TextBox, the string representation of the Fill color is copied to the TextBox. You will also create a small application that contains two panel controls and a TextBox to test the drag-and-drop functionality. You will write code that enables the panels to process dropped Circle data, which will enable you to move or copy Circles from the Children collection of one panel to the other.
This walkthrough illustrates the following tasks:
- Create a custom user control.
- Enable the user control to be a drag source.
- Enable the user control to be a drop target.
- Enable a panel to receive data dropped from the user control.
Prerequisites
You need Visual Studio to complete this walkthrough.
Create the Application Project
In this section, you will create the application infrastructure, which includes a main page with two panels and a TextBox.
- Create a new WPF Application project in Visual Basic or Visual C# named
DragDropExample
. For more information, see Walkthrough: My first WPF desktop application. - Open MainWindow.xaml.
- Add the following markup between the opening and closing Grid tags.This markup creates the user interface for the test application.
Add a New User Control to the Project
In this section, you will add a new user control to the project.
- On the Project menu, select Add User Control.
- In the Add New Item dialog box, change the name to
Circle.xaml
, and click Add.Circle.xaml and its code-behind is added to the project. - Open Circle.xaml.This file will contain the user interface elements of the user control.
- Add the following markup to the root Grid to create a simple user control that has a blue circle as its UI.
- Open Circle.xaml.cs or Circle.xaml.vb.
- In C#, add the following code after the parameterless constructor to create a copy constructor. In Visual Basic, add the following code to create both a parameterless constructor and a copy constructor.In order to allow the user control to be copied, you add a copy constructor method in the code-behind file. In the simplified Circle user control, you will only copy the Fill and the size of the of the user control.
Add the user control to the main window
- Open MainWindow.xaml.
- Add the following XAML to the opening Window tag to create an XML namespace reference to the current application.
- In the first StackPanel, add the following XAML to create two instances of the Circle user control in the first panel.The full XAML for the panel looks like the following.
Implement Drag Source Events in the User Control
In this section, you will override the OnMouseMove method and initiate the drag-and-drop operation.
If a drag is started (a mouse button is pressed and the mouse is moved), you will package the data to be transferred into a DataObject. In this case, the Circle control will package three data items; a string representation of its Fill color, a double representation of its height, and a copy of itself.
To initiate a drag-and-drop operation
- Open Circle.xaml.cs or Circle.xaml.vb.
- Add the following OnMouseMove override to provide class handling for the MouseMove event.This OnMouseMove override performs the following tasks:
- Checks whether the left mouse button is pressed while the mouse is moving.
- Packages the Circle data into a DataObject. In this case, the Circle control packages three data items; a string representation of its Fill color, a double representation of its height, and a copy of itself.
- Calls the static DragDrop.DoDragDrop method to initiate the drag-and-drop operation. You pass the following three parameters to the DoDragDrop method:
dragSource
– A reference to this control.data
– The DataObject created in the previous code.allowedEffects
– The allowed drag-and-drop operations, which are Copy or Move.
- Press F5 to build and run the application.
- Click one of the Circle controls and drag it over the panels, the other Circle, and the TextBox. When dragging over the TextBox, the cursor changes to indicate a move.
- While dragging a Circle over the TextBox, press the Ctrl key. Notice how the cursor changes to indicate a copy.
- Drag and drop a Circle onto the TextBox. The string representation of the Circle’s fill color is appended to the TextBox.
By default, the cursor will change during a drag-and-drop operation to indicate what effect dropping the data will have. You can customize the feedback given to the user by handling the GiveFeedback event and setting a different cursor.
Give feedback to the user
- Open Circle.xaml.cs or Circle.xaml.vb.
- Add the following OnGiveFeedback override to provide class handling for the GiveFeedback event.This OnGiveFeedback override performs the following tasks:
- Checks the Effects values that are set in the drop target's DragOver event handler.
- Sets a custom cursor based on the Effects value. The cursor is intended to give visual feedback to the user about what effect dropping the data will have.
- Press F5 to build and run the application.
- Drag one of the Circle controls over the panels, the other Circle, and the TextBox. Notice that the cursors are now the custom cursors that you specified in the OnGiveFeedback override.
- Select the text
green
from the TextBox. - Drag the
green
text to a Circle control. Notice that the default cursors are shown to indicate the effects of the drag-and-drop operation. The feedback cursor is always set by the drag source.
Implement Drop Target Events in the User Control
In this section, you will specify that the user control is a drop target, override the methods that enable the user control to be a drop target, and process the data that is dropped on it.
To enable the user control to be a drop target
- Open Circle.xaml.
- In the opening UserControl tag, add the AllowDrop property and set it to
true
.
The OnDrop method is called when the AllowDrop property is set to
true
and data from the drag source is dropped on the Circle user control. In this method, you will process the data that was dropped and apply the data to the Circle.To process the dropped data
- Open Circle.xaml.cs or Circle.xaml.vb.
- Add the following OnDrop override to provide class handling for the Drop event.This OnDrop override performs the following tasks:
- Uses the GetDataPresent method to check if the dragged data contains a string object.
- Uses the GetData method to extract the string data if it is present.
- Uses a BrushConverter to try to convert the string to a Brush.
- If the conversion is successful, applies the brush to the Fill of the Ellipse that provides the UI of the Circle control.
- Marks the Drop event as handled. You should mark the drop event as handled so that other elements that receive this event know that the Circle user control handled it.
- Press F5 to build and run the application.
- Select the text
green
in the TextBox. - Drag the text to a Circle control and drop it. The Circle changes from blue to green.
- Type the text
green
in the TextBox. - Select the text
gre
in the TextBox. - Drag it to a Circle control and drop it. Notice that the cursor changes to indicate that the drop is allowed, but the color of the Circle does not change because
gre
is not a valid color. - Drag from the green Circle control and drop on the blue Circle control. The Circle changes from blue to green. Notice that which cursor is shown depends on whether the TextBox or the Circle is the drag source.
Setting the AllowDrop property to
true
and processing the dropped data is all that is required to enable an element to be a drop target. However, to provide a better user experience, you should also handle the DragEnter, DragLeave, and DragOver events. In these events, you can perform checks and provide additional feedback to the user before the data is dropped.When data is dragged over the Circle user control, the control should notify the drag source whether it can process the data that is being dragged. If the control does not know how to process the data, it should refuse the drop. To do this, you will handle the DragOver event and set the Effects property.
To verify that the data drop is allowed
- Open Circle.xaml.cs or Circle.xaml.vb.
- Add the following OnDragOver override to provide class handling for the DragOver event.This OnDragOver override performs the following tasks:
- Sets the Effects property to None.
- Performs the same checks that are performed in the OnDrop method to determine whether the Circle user control can process the dragged data.
- If the user control can process the data, sets the Effects property to Copy or Move.
- Press F5 to build and run the application.
- Select the text
gre
in the TextBox. - Drag the text to a Circle control. Notice that the cursor now changes to indicate that the drop is not allowed because
gre
is not a valid color.
You can further enhance the user experience by applying a preview of the drop operation. For the Circle user control, you will override the OnDragEnter and OnDragLeave methods. When the data is dragged over the control, the current background Fill is saved in a placeholder variable. The string is then converted to a brush and applied to the Ellipse that provides the Circle's UI. If the data is dragged out of the Circle without being dropped, the original Fill value is re-applied to the Circle.
To preview the effects of the drag-and-drop operation
- Open Circle.xaml.cs or Circle.xaml.vb.
- In the Circle class, declare a private Brush variable named
_previousFill
and initialize it tonull
. - Add the following OnDragEnter override to provide class handling for the DragEnter event.This OnDragEnter override performs the following tasks:
- Saves the Fill property of the Ellipse in the
_previousFill
variable. - Performs the same checks that are performed in the OnDrop method to determine whether the data can be converted to a Brush.
- If the data is converted to a valid Brush, applies it to the Fill of the Ellipse.
- Add the following OnDragLeave override to provide class handling for the DragLeave event.This OnDragLeave override performs the following tasks:
- Applies the Brush saved in the
_previousFill
variable to the Fill of the Ellipse that provides the UI of the Circle user control.
- Applies the Brush saved in the
- Press F5 to build and run the application.
- Select the text
green
in the TextBox. - Drag the text over a Circle control without dropping it. The Circle changes from blue to green.
- Drag the text away from the Circle control. The Circle changes from green back to blue.
Enable a Panel to Receive Dropped Data
In this section, you enable the panels that host the Circle user controls to act as drop targets for dragged Circle data. You will implement code that enables you to move a Circle from one panel to another, or to make a copy of a Circle control by holding down the Ctrl key while dragging and dropping a Circle.
- Open MainWindow.xaml.
- As shown in the following XAML, in each of the StackPanel controls, add handlers for the DragOver and Drop events. Name the DragOver event handler,
panel_DragOver
, and name the Drop event handler,panel_Drop
. - Open MainWindows.xaml.cs or MainWindow.xaml.vb.
- Add the following code for the DragOver event handler.This DragOver event handler performs the following tasks:
- Checks that the dragged data contains the 'Object' data that was packaged in the DataObject by the Circle user control and passed in the call to DoDragDrop.
- If the 'Object' data is present, checks whether the Ctrl key is pressed.
- If the Ctrl key is pressed, sets the Effects property to Copy. Otherwise, set the Effects property to Move.
- Add the following code for the Drop event handler.This Drop event handler performs the following tasks:
- Checks whether the Drop event has already been handled. For instance, if a Circle is dropped on another Circle which handles the Drop event, you do not want the panel that contains the Circle to also handle it.
- If the Drop event is not handled, checks whether the Ctrl key is pressed.
- If the Ctrl key is pressed when the Drop happens, makes a copy of the Circle control and add it to the Children collection of the StackPanel.
- If the Ctrl key is not pressed, moves the Circle from the Children collection of its parent panel to the Children collection of the panel that it was dropped on.
- Sets the Effects property to notify the DoDragDrop method whether a move or copy operation was performed.
- Press F5 to build and run the application.
- Select the text
green
from the TextBox. - Drag the text over a Circle control and drop it.
- Drag a Circle control from the left panel to the right panel and drop it. The Circle is removed from the Children collection of the left panel and added to the Children collection of the right panel.
- Drag a Circle control from the panel it is in to the other panel and drop it while pressing the Ctrl key. The Circle is copied and the copy is added to the Children collection of the receiving panel.