HisTech Up

UWP: Drag and Drop



Christian Hissibini

I am a Tech enthusiast who loves to blend Dev & Design on Web and Mobile Platforms. I am also a Windows Platform Dev MVP


What are the differences between Data Mining, Machine Learning and Deep Learning? 11th February, 2018

What are the challenges of using Artificial Intelligence? 15th January, 2018

Mobile Development

UWP: Drag and Drop

Posted on .

This article explains how to add dragging and dropping in your Universal Windows Platform (UWP) app. Drag and drop is a classic, natural way of interacting with content such as images and files. Once implemented, drag and drop works seamlessly in all directions, including app-to-app, app-to-desktop, and desktop-to app.

Set valid areas

Use the AllowDrop and CanDrag properties to designate the areas of your app valid for dragging and dropping.

The following markup shows how to set a specific area of the app as valid for dropping by using the AllowDrop in XAML. If a user tries to drop somewhere else, the system won’t let them. If you want users to be able to drop items anywhere on your app, set the entire background as a drop target.

<Grid AllowDrop="True" DragOver="Grid_DragOver" Drop="Grid_Drop"
      Background="LightBlue" Margin="10,10,10,353">
    <TextBlock>Drop anywhere in the blue area</TextBlock>

With dragging, you’ll usually want to be specific about what’s draggable. Users will want to drag certain items, such as pictures, not everything in your app. Here’s how to set CanDrag by using XAML.

<Image x:Name="Image" CanDrag="True" Margin="10,292,10,0" Height="338"></Image>

You don’t need to do any other work to allow dragging, unless you want to customize the UI (which is covered later in this article). Dropping requires a few more steps.

Handle the DragOver event

The DragOver event fires when a user has dragged an item over your app, but not yet dropped it. In this handler, you need to specify what kind of operations your app supports by using the AcceptedOperation property. Copy is the most common.

private void Grid_DragOver(object sender, DragEventArgs e)
    e.AcceptedOperation = DataPackageOperation.Copy;

Process the Drop event

The Drop event occurs when the user releases items in a valid drop area. Process them by using the DataView property.

For simplicity in the example below, we’ll assume the user dropped a single photo and access it directly. In reality, users can drop multiple items of varying formats simultaneously. Your app should handle this possibility by checking what types of files were dropped and how many there are, and process each accordingly. You should also consider notifying the user if they’re trying to do something your app doesn’t support.

private async void Grid_Drop(object sender, DragEventArgs e)
    if (e.DataView.Contains(StandardDataFormats.StorageItems))
        var items = await e.DataView.GetStorageItemsAsync();
        if (items.Count > 0)
            var storageFile = items[0] as StorageFile;
            var bitmapImage = new BitmapImage();
            bitmapImage.SetSource(await storageFile.OpenAsync(FileAccessMode.Read));
            // Set the image on the main page to the dropped image
            Image.Source = bitmapImage;

Customize the UI

The system provides a default UI for dragging and dropping. However, you can also choose to customize various parts of the UI by setting custom captions and glyphs, or by opting not to show a UI at all. To customize the UI, use the DragEventArgs.DragUIOverride property.

private void Grid_DragOverCustomized(object sender, DragEventArgs e)
    e.AcceptedOperation = DataPackageOperation.Copy;
    e.DragUIOverride.Caption = "Custom text here"; // Sets custom UI text
    e.DragUIOverride.SetContentFromBitmapImage(null); // Sets a custom glyph
    e.DragUIOverride.IsCaptionVisible = true; // Sets if the caption is visible
    e.DragUIOverride.IsContentVisible = true; // Sets if the dragged content is visible
    e.DragUIOverride.IsGlyphVisible = true; // Sets if the glyph is visibile

Open a context menu on an item you can drag with touch

When using touch, dragging a UIElement and opening its context menu share similar touch gestures; each begins with a press and hold. Here’s how the system disambiguates between the two actions for elements in your app that support both:

  • If a user presses and holds an item and begins dragging it within 500 milliseconds, the item is dragged and the context menu is not shown.
  • If the user presses and holds but does not drag within 500 milliseconds, the context menu is opened.
  • After the context menu is open, if the user tries to drag the item (without lifting their finger), the context menu is dismissed and the drag will start.

Designate an item in a ListView or GridView as a folder

You can specify a ListViewItem or GridViewItem as a folder. This is particularly useful for TreeView and File Explorer scenarios. To do so, explicitly set the AllowDrop property to True on that item.

The system will automatically show the appropriate animations for dropping into a folder versus a non-folder item. Your app code must continue to handle the Drop event on the folder item (as well as on the non-folder item) in order to update the data source and add the dropped item to the target folder.





Christian Hissibini

I am a Tech enthusiast who loves to blend Dev & Design on Web and Mobile Platforms. I am also a Windows Platform Dev MVP

There are no comments.

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

View Comments (0) ...