Make GeometryDrawing interactive map from the UI?

Question

I am new to WPF and I have been trying hard for several days to figure out how to interact with elements of a vector image. In my case GeometryDrawing elements.

I understand that in WPF one would normally use shapes when needing to create interactive GUI elements, as they are uielements so there are all sorts of event handling goodness on them. Sadly I need to interact with a collection of GeometryDrawings which don’t seem to be designed for interactivity.

My problem:

I need to load an SVG image and allow the user to interact with some of its elements. Imagine loading an SVG map and make some countries clickable.

What I have managed:

I managed to convert the SVG into xaml using a very cool library called SvgToXaml.

With this library, I can load a given SVG image and convert it into xaml. So I end up with something like this after the conversion:

<DrawingImage x:Key="iconDrawingImage">
  <DrawingImage.Drawing>
    <DrawingGroup ClipGeometry="M0,0 V600 H600 V0 H0 Z">
      <DrawingGroup>
        <GeometryDrawing Geometry="F1 M600,600z M0,0z M371.987,227.641C419.615,275.269 457.026,326.349 478.901,371.193 505.259,425.226 508.997,470.915 490.004,489.907 470.211,509.7 421.737,505.791 364.273,476.928 320.828,455.107 272.242,417.809 227.031,372.597 180.677,326.243 142.081,277.052 120.364,232.781 92.884,176.758 90.307,129.038 109.721,109.624 128.559,90.785 172.969,93.568 226.415,119.381 271.574,141.193 323.895,179.548 371.987,227.641z">
          <GeometryDrawing.Pen>
            <Pen Brush="#FFE91E63" Thickness="24" StartLineCap="Flat" EndLineCap="Flat" LineJoin="Miter" MiterLimit="1" />
          </GeometryDrawing.Pen>
        </GeometryDrawing>
        <GeometryDrawing Geometry="F1 M600,600z M0,0z M272.931,201.125C337.983,183.66 400.92,176.771 450.698,180.223 510.672,184.383 552.118,203.97 559.083,229.911 566.342,256.944 538.738,296.984 485.029,332.345 444.421,359.078 387.84,382.533 326.088,399.114 262.776,416.112 200.881,424.972 151.68,421.667 89.42,417.486 46.796,395.878 39.676,369.361 32.769,343.63 57.364,306.55 106.426,273.147 147.879,244.923 207.243,218.761 272.931,201.125z">
          <GeometryDrawing.Pen>
            <Pen Brush="#FFE91E63" Thickness="24" StartLineCap="Flat" EndLineCap="Flat" LineJoin="Miter" MiterLimit="1" />
          </GeometryDrawing.Pen>
        </GeometryDrawing>
    </DrawingGroup>
  </DrawingImage.Drawing>
</DrawingImage>

I used this xaml as an image source and I can render the image but I have not figured out how to interact with it elements.

I thought that because I had the SVG tranlated into XAML I should be able to identify and interact with the shapes or geometries.

So far I have not found a way, and google does not seem to be able to help me find a solution.

Is it even possible to interact with GeometryDrawing or DrawingImage elements all?

Is there any other way to achieve this in WPF? My alternative is to work on HTML using javascript to parse the SVG and add event handlers to the elements I need to interact with. But I was hoping to use WPF.

Thank you very much for your advice.

Answer 1

So while your question is way too broad for a full answer (maybe if someone else has that kind of free time I suppose) but I can at least offer a quickie example related to your goal. You can plop the following example wherever and give it a shot. What the PoC is conveying is how you can interact with a Path in various ways (Red on MouseOver, Green on Click) but I didn't take the time to wire up any actual commands or anything because realistically that becomes a lot more work and I'd likely be doing things like turning each shape into a ButtonBase like ToggleButton type to retain properties like IsChecked and making cooler animations like Marching Ants around the selection etc.

Anyway, hope this helps get creative juices flowing. The primary tools used for the PoC below are Mike Swanson's AI to XAML export plugin, and Blend. Hope it helps, cheers.

Visual Example (in a choppy gif, sorry);

and some XAML to play with you can plop wherever;

PASTEBIN LINK : https://pastebin.com/u6qP2qFt

Sorry had to use PasteBin to plop the sample, ran over the character limit for an answer submission.