2

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.

cadrell0
  • 17,109
  • 5
  • 51
  • 69
John D
  • 201
  • 2
  • 9
  • The colors are probably just there to help with the initial design / layout. Once you have that set up, try setting the Opacity to 0. This will make the image transparent, allowing you to see the original image behind it, but the clicks will go to the overlay. – cadrell0 Dec 05 '12 at 21:50
  • That might work, I'll give it a try. – John D Dec 05 '12 at 21:53

1 Answers1

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.

jschroedl
  • 4,916
  • 3
  • 31
  • 46
  • This works fine. I can create an image, easily create another with solid fills in the areas I need to map, and figure out what I need to do based on the color returned. Nice. – John D Dec 06 '12 at 22:49