Implementing a clickable map for an arbitrary image

Question

I have a C# WPF application where I have several possible images, some having irregular shapes within the image. I would like to generate different events when clicking on the different shapes within the image.

For example: If the image was of the front of the house, I would genereate different events when clicking on the doorknob, the door, the windows, the roof, etc.

The image has to be resizable.

I can do it manually with a grid and shapes, but it seems like there should be a more elegant way.

I thought I saw a technique where you could make a "shadow" image that was like the original, but with each clickable region filled in a different color. (A "color map" of the clickable regions.) Then the click handler could access the color of the shadow image and raise the appropriate event. However, I couldn't figure out how to hide the shadow image "under" the display image and still have the click event handler pick up the color.

I'm sure there's a good way to handle this, I just don't normally work with images so I'm completely ignorant of it.

Thanks.

Answer 1

How about having the nice image higher in the Z-order than the "shadow image" and setting topImage.IsHitTestVisible = false;

This would cause clicks to bypass the top, visible image and go straight to the underlying shadow image click handler.

Another technique I have used in production code is to derive a new class from Image and override HitTestCore and test the pixel value myself and if it's a certain color or opacity, I return a different object. This way I control all the action.