Drag & Drop Files in WPF  - Page 3
       by kirupa  |  26 May 2009

In the previous page, you enabled drop support and hooked up the events needed to handle any files that get dropped into your ListBox. In this page, we will go further and add some code that will display the file name along with a tooltip for any files that get dropped.

Adding More Code
Right now, all you have is an empty event handler called FilesDropped. What you are going to do is copy and paste the following code into your FilesDropped event handler:

private void FilesDropped(object sender, DragEventArgs e)

{

if (e.Data.GetDataPresent(DataFormats.FileDrop))

{
DropListBox.Items.Clear();
 

string[] droppedFilePaths =
e.Data.GetData(DataFormats.FileDrop, true) as string[];

 

foreach (string droppedFilePath in droppedFilePaths)

{

ListBoxItem fileItem = new ListBoxItem();

 

fileItem.Content = System.IO.Path.GetFileNameWithoutExtension(droppedFilePath);

fileItem.ToolTip = droppedFilePath;

 

DropListBox.Items.Add(fileItem);

}

}

}

Once you have done this, if you run your application and drop files into it, you will notice that they appear inside your ListBox. Hovering over each item in your ListBox displays a tooltip containing the item's full path - just like what I described in the example on the first page.

Let's now look at the code in greater detail:

if (e.Data.GetDataPresent(DataFormats.FileDrop))

The very first thing we do is check to make sure that the drop operation we are looking for is indeed a drop. I can do this easily by using just the built-in methods, and that is made possible by the e object - which is the DragEventArgs parameter that any event handler listening to the Drop event provides.

You may be wondering why I check explicitly for FileDrop. After all, am I not in the Drop event's event handler? The reason is that you cannot assume that what is being dropped is a file. For example, you could easily drag a paragraph of text from Microsoft Word and drop it into your window. In this case, you can't treat what has been dropped as a file. There are other little variations you have to deal with, and you can explore some of them by looking through all of the various things the DataFormats class provides besides FileDrop.

Once I verify that this drop event handler is dealing with dropped content that contains files, then I can continue!

DropListBox.Items.Clear();

The first thing I do is clear out all the files our ListBox is currently storing. This ensures that the ListBox only shows the files from the current drop operation. Pretty straightforward.

string[] droppedFilePaths = e.Data.GetData(DataFormats.FileDrop, true) as string[];

In this line, for every file that was included as part of the drop, I am getting an array of the file paths. Notice that the DataFormats.FileDrop code makes an appearance again. The reason is that, this time, I am filtering on only files that have been dropped by using the GetData method. Remember, in the previous check using GetDataPresent, I merely see if something in our collection of data is a file. This time, I explicitly filter out everything that isn’t a file and storing the data that remains in an array of strings.

foreach (string droppedFilePath in droppedFilePaths)

{

ListBoxItem fileItem = new ListBoxItem();

 

fileItem.Content = System.IO.Path.GetFileNameWithoutExtension(droppedFilePath);

fileItem.ToolTip = droppedFilePath;

 

DropListBox.Items.Add(fileItem);

}

In the next line, I am simply setting up my foreach statement to go through each filepath (droppedFilePath) from the array of filepaths (droppedFilePaths) my earlier filtering operation returns. Any code you see inside this block is executed each time for each file that is contained inside droppedFilePaths.

ListBoxItem fileItem = new ListBoxItem();

 

fileItem.Content = System.IO.Path.GetFileNameWithoutExtension(droppedFilePath);

fileItem.ToolTip = droppedFilePath;

 

DropListBox.Items.Add(fileItem);

The final thing to do once you have the filepath is to add it to our Listbox itself. To do this, I create a new ListBoxItem. This ListBoxItem does two things - It displays the name of the file, and when you hover over it, it displays the full path of the file as a tooltip.

You can display the name of the file from your full filepath by using the Path (System.IO, not System.Windows.Shapes) class’s GetFileNameWithoutExtension method. Setting the Tooltip is much easier. Simply set your Listbox’s Tooltip property to the filepath – which you already have from your droppedFilePath object.

The last thing to do once you have set your ListBoxItem’s Content and Tooltip properties is to add it to our Listbox itself. This ensures that you can actually see your ListBoxItem. That is handled by calling the Add method on DropListBox’s Items collection.

Conclusion
Hopefully this tutorial gave you a basic overview of how to write a simple application that supports dropping of files into it. One thing you need to keep in mind is that the range of content that one can drop into your application goes well beyond files. While what gets dropped will be different, the code that I've provided can easily be modified and extended to support other cases easily.

In case you are curious to know how my implementation of this looks like, feel free to download the source files below:

Download Final Source

Extract the files and open the project in Blend or Visual Studio to take a deeper look at my version of what you have done in this tutorial.

Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!

1 | 2 | 3