Cant drag drop on a Canvas panel

Question

Writing a first program targeting UWP and .NET Core on Windows 10 and wanted to add drag/drop capability to include images dragged from file folders. As I want to allow the user to arrange the dropped images (well thumbnails) as they want on the target panel I chose a Canvas panel but could not get drag/drop to work. Dragging an image file over the panel just resulted in the red circle icon (no drop) being displayed. Changed the panel type to a grid and all worked fine. Any clues on how to get the Canvas panel to co-operate?

xaml

<GridView Grid.Row="1" x:Name="MainPanel" AllowDrop="True" DragEnter="MainPanel_DragEnter" Drop="MainPanel_Drop" >  

</GridView>

Code behind

private void MainPanel_DragEnter(object sender, DragEventArgs e)
    {
        e.AcceptedOperation = DataPackageOperation.Copy;
        e.DragUIOverride.Caption = "drop to add image file to collection";
        e.DragUIOverride.IsCaptionVisible = true;
        e.DragUIOverride.IsContentVisible = true;
    }



private async void MainPanel_Drop(object sender, DragEventArgs e)
        {
            if (e.DataView.Contains(StandardDataFormats.StorageItems))
            {
                var items = await e.DataView.GetStorageItemsAsync();
                // etc.
            }

        }

When trying to use a Canvas panel then the xaml used the keyword Canvas in place of GridView and the Grid.row="1" was omitted.

Answer 1

It seems some Panel control that without setting the Background or the Fill property that will make some event can not work.

Determining whether and where in UI an element is visible to mouse, touch, and stylus input is called hit testing. For touch actions and also for interaction-specific or manipulation events that are consequences of a touch action, an element must be hit-test visible in order to be the event source and fire the event that is associated with the action. Otherwise, the action passes through the element to any underlying elements or parent elements in the visual tree that could interact with that input.

For more info, see Hit testing and input events.

So we should be able to set the Background property of the Canvas that the DragEnter and Drop event can be fired.

For example:

<Canvas Background="Transparent" Grid.Row="1" x:Name="MainPanel" AllowDrop="True" DragEnter="MainPanel_DragEnter" Drop="MainPanel_Drop">
</Canvas>