What is the best way in Silerlight to make areas of a large graphic clickable?

Question

In a Silverlight application I have large images which have flow charts on them.

I need to handle the clicks on specific hotspots of the image where the flow chart boxes are.

Since the flow charts will always be different, the information of where the hotspots has to be dynamic, e.g. in a list of coordinates.

I've found article like this one but don't need the detail of e.g. the outline of countries but just simple rectangle and circle areas.

I've also found articles where they talk about overlaying an HTML image map over the silverlight application, but it has to be easier than this.

What is the best way to handle clicks on specific areas of an image in silverlight?

Answer 1

Place the Image and a Canvas in a Grid so that the Canvas overlays the Image.

Add shapes of appropriate sizes and placed as needed to the canvas. All shapes will a transparent fill and no border, hence the user only sees the Image. On the Canvas MouseDown (or Up events) use OriginalSource to determine which shape generated the click. Use the Tag property of each shape to associate it with some object that represents the flowchart element being mapped.

Answer 2

I found an easy way to do this without a canvas:

http://stackoverflow.com/questions/2452941/how-to-get-the-coordinates-of-an-image-mouse-click-in-the-event-handler/2453011#2453011