Drag-and-Drop Target
Silverlight 4 introduced the ability for your application to act as a drop target for files that have been dragged from the desktop or Windows Explorer. This feature is even available when the application is running within the browser. This provides an alternative means for reading a file from the user's file system, without the user having to go via the open file dialog. For example, you might want to create a file uploader, where users can drag files onto your application and have them automatically uploaded to the server.
The first step when implementing this feature is to decide where you want files to be able to be dropped within your application. For this simple demonstration, let's enable the user to drop a file on an Image control and have that control display that file if it is an image file. Unfortunately, despite supporting the required events, the Image control won't raise the drag-and-drop events when a file is dragged over and dropped on the control, but you can place it inside a Border control, which will raise these events for us.
Note The Border control requires its Background property to be assigned a value, or its drag-and-drop events won't be raised either.
Therefore, the Border control in your view will be a drop target, and to enable it to accept dropped files, you need to set its AllowDrop property to true and handle the drag-and-drop events that you require:
<Border Name="imageBorder" Height="300" Width="300" AllowDrop="True"
BorderThickness="1" BorderBrush="Black" Background="White"
Drop="imageBorder_Drop">
<Image Name="droppedImage" Stretch="Uniform" />
</Border>
Now, when the user drags a file from the file system over this control, the DragEnter event will be raised when the file is dragged within the bounds of the control, the DragOver event will be raised as the dragged file is moved over the control, and the DragLeave event will be raised when the file is dragged outside of the bounds of the control again. However, the event you are most interested in is the Drop event, which is raised when a file is dropped onto the control.
private void imageBorder_Drop(object sender, DragEventArgs e)
{
// Code to open/read the dropped files goes here
}
The DragEventArgs object passed through to this event handler enables you to get the details of the files dropped on the control, using the GetData method of the IDataObject object that it exposes:
FileInfo[] files = e.Data.GetData(DataFormats.FileDrop) as FileInfo[];
Now you can loop through these files, opening them and reading their contents as required, in the same manner as demonstrated when discussing the open file dialog. The following code demonstrates opening a dropped file, ensuring it is an image file, reading its contents, and displaying it in the Image control in your view:
if (files.Length != 0)
{
// Ensure that the file is an image (by validating the extension)
string[] validExtensions = new string[] { ".jpg", ".png" };
// NOTE: Multiple files can be dropped on the application, but we are
// displaying only the first file.
if (validExtensions.Contains(files[0].Extension.ToLower()))
{
try
{
// Open the file, read it into a BitmapImage object, and
// display it in the Image control.
using (FileStream fileStream = files[0].OpenRead())
{
BitmapImage bitmap = new BitmapImage();
bitmap.SetSource(fileStream);
fileStream.Close();
droppedImage.Source = bitmap;
}
}
catch { }
}
}
Note that you will need to add using directives to the following namespaces to the top of your code file:
using System.IO;
using System.Linq;
using System.Windows.Media.Imaging;
Note Unfortunately, dropping files on a Silverlight application when it's running on a Mac requires some workarounds to support the feature and will work only in Safari. These workarounds are documented in the MSDN article found at http://msdn.microsoft.com/en-us/library/ee670998.aspx.