Drag and Drop elements instead of using a FilePicker on Windows 10

Picking files with a FilePicker is no fun, why not let our users be able to drag and drop files in your application?

In this example I will show you who to implement a very simple drag and drop feature so that your users can just select a file they what to add to your app and just drag and drop it into your application.

First lest start by creating a Stackpanel and then we can start looking in the properties called Drop DragOver and AllowDrop:

Information taken from my IDE (Visual Studio):

We can see that Drop has the following information:

public event Windows.UI.Xaml.DragEventHandler Drop
    Member of Windows.UI.Xaml.UIElement

Summary:
Occurs when the input system reports an underlying drop event with this element as the drop target.
---------------------------------------------------------------------------------------------------------------------

We can see that DragOver has the following information:

public event Windows.UI.Xaml.DragEventHandler DragOver
    Member of Windows.UI.Xaml.UIElement

Summary:
Occurs when the input system reports an underlying drag event with this element as the potential drop target.
---------------------------------------------------------------------------------------------------------------------
And that AllowDrop has the following information:

public bool AllowDrop { get; set; }
    Member of Windows.UI.Xaml.UIElement

Summary:
Gets or sets a value that determines whether this UIElement can be a drop target for purposes of drag-and-drop operations.

Returns:
true if this UIElement can be a drop target for purposes of drag-and-drop operations; otherwise, false. The default is false.
---------------------------------------------------------------------------------------------------------------------

Lets get coding

In you XAML page you are going to want to create a StackPanel with the properties we saw above and add a small piece of text so that your users can see where to drop the file.

<StackPanel  
 Drop="StackPanel_Drop" 
 DragOver="StackPanel_DragOver" 
 AllowDrop="True">           
 
 <TextBlock    
  Margin="44,24,44,0"
  FontSize="24"
  Text="Drag and Drop your File here" />
</StackPanel>

In your .cs file you just need to handle the events  StackPanel_Drop and StackPanel_DragOver. In the event StackPanel_Drop you will just need to handle the file that the user is dropping in it, thanks to e.DataView.GetStorageItemsAsync() you are able to fecth the file the user wants to share with you and then you convert the first element in the array into a StorageFile and you are good to go.

Here is the code:

private async void StackPanel_Drop(object sender, DragEventArgs e)

        {
            if (e.DataView.Contains(StandardDataFormats.StorageItems))
            {
                var items = await e.DataView.GetStorageItemsAsync();
                if (items.Any())
                {
                    var storeFile = items[0] as StorageFile;
                    //Do what ever you wish with the StoreFile
                    //You code goes here
                }
            }
        }

private void StackPanel_DragOver(object sender, DragEventArgs e)
        {
            e.AcceptedOperation = DataPackageOperation.Copy;
        }

From here you can now upload the file to your server, or do whatever you wish!

Bonus: Just to make sure that users dont send you the wrong kind of file, its always a good idea to check the file extension. Here is a tiny method that will allow you check for different extensions on you file:

 private bool CheckFileExtension(string fileExtension)
        {
            string[] AllowedExtensions = new[] {".abc", ".def", 
            ".air",
            ".klm",
            ".fre",
            ".aqs",
            ".ovf" };

            return !AllowedExtensions.Contains(fileExtension);
        }

Happy Coding!