How to implement Drag & Drop Functionality in Universal Windows Platform (UWP)?

Summary

 

In the software lifecycle, drag and drop is a very useful, common, and impressive feature.

 

From the user perspective also, it is handy to use drag and drop instead of traditional open file dialogue box.

 

In UWP, it’s easy to implement and below, I’ve mentioned the step by step process to implement it.

 

Here are the steps:

1. In Visual Studio, create New Project as “Blank App (Universal Windows)”.
   
   
   
   
2. In MainPage.xaml, create a grid with the two columns, having identical width.
   

   <Grid.ColumnDefinitions>
   <ColumnDefinition Width="*"/>
   <ColumnDefinition Width="*"/>
   </Grid.ColumnDefinitions>

3. Define a Grid, with these three important properties/events. 
   
   “AllowDrop”, “Drop” and “DragOver”.
• AllowDrop is a Boolean property, which indicates whether dropping of the item on this control is allowed or not.
• DragOver is an event, where we will show the user a caption, and glyphs of dragged item.
• Drop event is useful, where we will define all the logic related to reading the file and displaying it (in our case).
  

<Grid Grid.Row="0" Background="Aqua" AllowDrop="True"
Drop="Grid_Drop"
DragOver="Grid_DragOver">

4. Define an Image control, where we will show the dropped image from the folder.
   

   <Image Name="imgMain" Grid.Column="1"/>

   Here, we’ve completed our Layout page. Now, moving to code at the backend file MainPage.xaml.cs.
   
   
5. In MainPage.xaml.cs, inside DragOver event handler, write the code, given below:
   
   

   private void Grid_DragOver(object sender, DragEventArgs e)
   {
       //To specifies which operations are allowed
       e.AcceptedOperation = DataPackageOperation.Copy;
       // To display the data which is dragged
       e.DragUIOverride.Caption = "drop here to view image";
       e.DragUIOverride.IsGlyphVisible = true;
       e.DragUIOverride.IsContentVisible = true;
       e.DragUIOverride.IsCaptionVisible = true;
   }

6. Inside Drop event handler, write the code, given below:
   

   private void Grid_Drop(object sender, DragEventArgs e)
   {
       if (e.DataView.Contains(StandardDataFormats.StorageItems))
       {
           var items = await e.DataView.GetStorageItemsAsync();
           if (items.Any())
           {
               var storageFile = items[0] as StorageFile;
               var contentType = storageFile.ContentType;
               StorageFolder folder = ApplicationData.Current.LocalFolder;
               if (contentType == "image/jpg" || contentType == "image/png" || contentType == "image/jpeg")
               {
                    StorageFile newFile = await storageFile.CopyAsync(folder, storageFile.Name, NameCollisionOption.GenerateUniqueName);
                   var bitmapImg = new BitmapImage();
                   bitmapImg.SetSource(await storageFile.OpenAsync(FileAccessMode.Read));
                   imgMain.Source = bitmapImg;
               }
           }
       }
   }

That’s all. Now run the Application.

 

 

 

P.S.: These drag and drop files are copied to the Application’s localState folder. Thus, you need to take care of the deletion of these files also.

 

 

 

You can find this folder at the location, given below:

 

C:\Users\<UserName>\AppData\Local\Packages\<PackageID>\LocalState.

 

Cheers!!