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

Introduction

 

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 the 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 an 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 the 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 the dragged items.
• 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 the 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 local state 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.

 

Summary

 

In this article, we learned about How to implement Drag & Drop Functionality in the Universal Windows Platform (UWP).