Drag and drop photos into Windows 10 Universal apps

Drag and drop photos into Windows 10 Universal apps

The new Windows 10 platform brings drag-and-drop functionality to Windows Universal apps for scenarios such as dragging a document or a photo from a folder straight into app. It allows us developers to support more intuitive experiences. Find out how simple it is to drag and drop a photo from desktop into your Windows 10 Universal apps in the rest of the article.

Note that that everything here is written using Windows 10 Technical Preview build 10074 and Technical Preview Tools, so things can change.

Drag and drop photos into Windows 10 Universal apps

Let's start by creating a new, blank Windows Universal app. This creates one blank page, MainPage.xaml which holds just one Grid, on which we can set AllowDrop property to true. I'll also attach an event handler to Drop event, which will be used to handle an event of dropping someone on the grid, an event handler to DragOver event, which will be used to allow image copying while it's dragged over the grid, and I'll add an Image object inside to be able to show the photo which was dropped.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"  
      AllowDrop="True" Drop="Grid_Drop" DragOver="Grid_DragOver">
    <Image x:Name="DroppedImage"/>
</Grid>  

The event handlers implementations are next. When photo is being dragged over the grid, I'm going to allow copying operation. Basically it means checking the DragEventArgs.AcceptedOperation to DataPackageOperation.Copy.

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

Then when the photo gets dropped, I'm going to take it from the StorageItems collection and set as Source for DroppedImage image.

private async 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 bitmapImage = new BitmapImage();

            bitmapImage.SetSource(await storageFile.OpenAsync(FileAccessMode.Read));

            DroppedImage.Source = bitmapImage;
        }
    }
}

Note that there are a couple of assumptions made here that are making this code quite fragile, but for the sake of the post simplicity, I am assuming that a photo is being dragged and dropped. If you try with something else, it will fail.

Drag and drop photos into Windows 10 Universal apps

Customizing the drag adorner

If you want to customize the drag adorner, there's a property on DragEventArgs called DragUIOverride that you can use.

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

    e.DragUIOverride.Caption = "you are dragging a photo";
    e.DragUIOverride.IsCaptionVisible = true;
    e.DragUIOverride.IsContentVisible = true;
    e.DragUIOverride.IsGlyphVisible = true;
    e.DragUIOverride.SetContentFromBitmapImage(new BitmapImage(new Uri("ms-appx:///Assets/clippy.jpg")));
}

Drag and drop photos into Windows 10 Universal apps with custom content

You can change the text and show it or hide it, show or hide the glyph, and even set a completely custom image for content. I chose Clippy, for fun. :)

Scaling issues

Watch out for scaling issues! There seems to be a problem with the position of the drag adorner when scaling is above 100%. See the following GIF which shows what happens.

Drag adorner placing issues when scaled

This will probably get fixed, but now it looks bad.

Conclusion

Dragging and dropping photos from desktop to Windows 10 Universal apps is pretty straightforward. This will open up many new interesting scenarios to developers that were previously impossible.

Igor Ralic

igor ralic

View Comments
Microsoft Certified Solutions Developer: Windows Store Apps in C#