Adding Drag-and-Drop Behavior

Silverlight 4 gives us inherent drag and drop events on all controls (DragOver, DragLeave, Drop, etc.). This enables us to manage a drag-and-drop process among virtually any elements. But more importantly, Silverlight 4 enables us to drag items from outside the Silverlight application. All you have to do is set the AllowDrop property for your container to True, and then handle the Drop event to grab the files and do what you please. In this sample we will be taking some code from a sample posted by Microsoft. We will use the C1CheckeredBorder control as our drop-enabled control.

XAML	Copy Code
<c1ext:C1CheckeredBorder Name="checkeredBack" AllowDrop="True" Drop="DropTarget_Drop" /> private void DropTarget_Drop(object sender, DragEventArgs e) { // Get FileInfo array from DragEventArgs IDataObject dataObject = e.Data; var files = (FileInfo[])dataObject.GetData(DataFormats.FileDrop); //Grab first file if (files != null) { FileInfo file = files[0]; if (IsImageFile(file.Extension)) { Stream stream = file.OpenRead(); LoadImageStream(stream); } } }

XAML

Copy Code

<c1ext:C1CheckeredBorder Name="checkeredBack" AllowDrop="True" Drop="DropTarget_Drop" />
private void DropTarget_Drop(object sender, DragEventArgs e)
 {
     // Get FileInfo array from DragEventArgs
     IDataObject dataObject = e.Data;
     var files = (FileInfo[])dataObject.GetData(DataFormats.FileDrop);
     //Grab first file
     if (files != null)
     {
         FileInfo file = files[0];
         if (IsImageFile(file.Extension))
         {
             Stream stream = file.OpenRead();
             LoadImageStream(stream);
         }
     }
 }

Notice when you drag an image file from your computer onto the Web browser, you see the cursor change to signify a drop. Now, this sample is designed to only accept one file (image extension check is performed), but you can easily drop multiple files at once, as Microsoft's sample demonstrates.