How to stop event propagation when dragging and dropping overlapping UI objects in WPF

Question

I have a use case for dragging an item onto an area which could have multiple UI layers.

Use Case 1: Drag and drop a node from a treeview onto a workspace area(drop target). A chart is created in that workspace area.

Use Case 2: Drag and drop a node from a treeview onto a chart, that sits above the original workspace area. Extra data is added to the chart.

The problem with my implementation is that when I conduct Use Case 2, the drop event for the workspace area (Grid) AND chart are called. Not just the one that is visible.

How are others implementing this scenario?

Answer 1

To stop routed event propagation set e.Handled = true in drop event handler.

Answer 2

I would not call your case as "multi-layer". Instead, it is a normal hierarchy of visual objects. For "multi-layer" I mean, for instance, a drop on several sibling canvas.

Anyway, assuming that there is an unique point where the drop-action in managed, I would listen to the drop event (which is bubbling). In the event handler, there is the " OriginalSource " parameter that indicates the very first visual object involved. At this point, you may scan the visual tree upward ( VisualTreeHelper ), searching for a "chart" element: if you find it, the drop was on a chart, otherwise was on the empty workspace area.

Hope it helps.

Cheers