Product and Development Musings

Drag and Drop with the ImageMan.NET WinForms Controls

22. December 2009 12:11

The ImageMan.NET Windows Forms controls make it easy to implement drag and drop functionality in your own applications.  To showcase this feature, lets extend one of the VS.NET 2008 Thumbnail control samples (TestThumbCol for C# or TestThumbColVb for VB.NET) that ships with ImageMan.NET.  This code will also work in Visual Studio.NET 2005.

We will add the ability for a user to select one or more image files from Windows Explorer and drop them on to the Viewer control.  The images will then be added to the Thumbnail Browser control and one of the images will be opened in the Viewer.

  • Run Visual Studio.NET 2008
  • Open the solution file found under:

For C#:
C:\Program Files\ImageMan.Net V2\Visual Studio 2008 Samples\C#\TestThumbCol\TestThumbCol.sln

or

For VB.NET:
C:\Program Files\ImageMan.Net V2\Visual Studio 2008 Samples\VB\TestThumbColVb\TestThumbColVB.sln

  • Open Form1 in design view
  • Select the Viewer control
  • In the Properties window, set AllowDrop to True:

DND1

  • Open the Events list for the Viewer control and double click on the DragDrop event to have Visual Studio.NET automatically create the event:

DND2

  • Return to the design view and double click on the DragOver event to have Visual Studio.NET automatically generate the event:

DND3

  • Staying in code view, let's add some code to the DragDrop event which will add the selected files to the Viewer's image collection.  Because the Thumbnail Browser is synchronized with the Viewer's image collection (in the Form's constructor), the Thumbnail Browser will also be updated.  In the DragDrop event, add the following code:

For C#:

private void thumbNail1_DragDrop(object sender, DragEventArgs e)
{
    string[] fileNames = (string[])e.Data.GetData(DataFormats.FileDrop);

    // handle each file passed as needed
    foreach (string fileName in fileNames)
    {
        // Open each image and add to collection
        viewer1.Images.Add(DTI.ImageMan.ImImage.Load(fileName));
    }
}

For VB.NET:

Private Sub viewer1_DragDrop(ByVal sender As System.Object, ByVal e _
    As System.Windows.Forms.DragEventArgs) Handles viewer1.DragDrop
    
    Dim fileNames As String() = _
        DirectCast(e.Data.GetData(DataFormats.FileDrop), String())

    ' handle each file passed as needed
    For Each fileName As String In fileNames
        ' Open each image and add to collection
            viewer1.Images.Add(DTI.ImageMan.ImImage.Load(fileName))
    Next
End Sub
  • To add the appropriate visual feedback to the user interface, update the DragOver event with the code shown below:

For C#:

private void thumbNail1_DragOver(object sender, DragEventArgs e)
{
    if (e.Data.GetDataPresent(DataFormats.FileDrop))
        e.Effect = DragDropEffects.Copy;
    else
        e.Effect = DragDropEffects.None;
}

For VB.NET:

Private Sub viewer1_DragOver(ByVal sender As System.Object, ByVal e _
    As System.Windows.Forms.DragEventArgs) Handles viewer1.DragOver
     
    If e.Data.GetDataPresent(DataFormats.FileDrop) Then
        e.Effect = DragDropEffects.Copy
    Else
        e.Effect = DragDropEffects.None
    End If
End Sub
  • Build the application and give it a test run
  • Open Windows Explorer and navigate to a folder that contains images
  • Select one or more images and drag them on to the Viewer control.  Notice that the cursor will change indicating that you are allowed to drop the files on that control surface.
  • Drop the files on to the Viewer control and notice that the Thumbnail Browser updates to include those files and that one of the files will be displayed in the Viewer:

DND4

You can follow the steps outlined below to add similar functionality to the Thumbnail Browser control as well.  This implementation of drag and drop is consistent with the default Windows controls set and makes it easy for you add the user interactions your users have come to expect with desktop applications.

Log in