Hotspot and image drag drop?

[Rob A.]

I'm using WPF to create an application that will using drag and drop elements from a large image.  For example I have a image of a panel and I want to be able to drag and drop sections of the image over to another image and drop it.  This action will trigger some underlying work.

I'm not really sure of the best way to do this with WPF and/or if there are any helpful Telerik UI WPF controls that will make this process easier.  My thought is:

1.  Sub divide my main large image into smaller individual images.

2.  Organize the smaller images using a control (here is where I'm not really sure what control to use) such that they can position next to each other making up what would appear to be a single "seamless" large image (kinda like a completed jigsaw puzzle but all the pieces are rectangular).

3.  User can drag and drop the image onto another image (which would be sub divided also), this would then trigger some internal process on the drop.

OR 

...is there some more refined/better approach where all I need to do is define hotspots for a single image and do a drag/drop operation that uses the defined hotspot area/coordinates?

Thoughts?

Cheers, Rob.

[Martin Ivanov]

Hello Robin,

There is no control in the Telerik UI for WPF suite that does meet those requirements at once, but you can achieve the desired functionality by combining several controls. Here is some guidance on a possible approach for achieving what you are looking for.

• You can use RadImageEditor or an Image control to show the bigger picture.
• Then, you can display a Grid panel or UniformGrid panel over the image control. The panel can be populated with some transparent UI elements (Borders or something like this).
• Each UI element in the overlay panel can be subscribed to the drag drop events and can start a drag operation. For the drag/drop you can use DragDropManager.
• When the drag start, you can get the bounds of the dragged element from the overlay panel and based on the size and position, crop a portion of the original image. Consider using RadBitmap which supports cropping.
• Save the cropped image in the drag/drop arguments.
• The other image (where you will drop) can have the same overlay (with a Grid or UniformGrid panel).
• When you drop onto the second image, you can get the cropped image portion from the drag source and merge it with the drop target image.

I hope this helps.

Regards,
Martin Ivanov
Progress Telerik

[Rob A.]

Hi Martin,

Thanks for the suggestion, unfortunately the subdivision of my main source image is not uniform so a grid would not work well.  The destination image from the drag and drop operation will work well with a grid.  But I like your idea even if not suited. 

Is there some other approach that I can define "hot spots"?  Am I moving into the realm of DX11/12 and making that work with WPF?

Also, if I'm using WPF and DX and drag and drop operations, is MVVM still the best approach or should I go the code behind route with x:Name?

Cheers, Rob.

[Martin Ivanov]

Hello Rob,

I am afraid that I am not that familiar with DX so I cannot tell what is the best approach there. You can post this question in the Microsoft communication channels or any of the community driven websites as stackoverflow and similar.

As for another distribution of the subdivisions, I cannot suggest a good alternative approach that would fit here. My guess would be that you will need to create a custom panel and override its MeasureOverride and ArrangeOverride properties. This will allow you to manually position the child elements. Also, you can consider using a Canvas panel. In both cases, you will need to manually set the position and size of the subdivision.

Regards,
Martin Ivanov
Progress Telerik