Make GeometryDrawing interactive map from the UI? (Interact with an SVG image in WPF)

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.

In my opinion it's a lot easier when your conversion results are in just just independent Path's to interact with instead of a consolidated DrawingImage. Personally what I do is use Mike Swanson's [AI to XAML](http://www.mikeswanson.com/xamlexport/) plugin to export from Illustrator straight to XAML and go from there. I'll have a free minute later so if nobodies answered by then I'll dig up an example of an interactive Path Geometry concept to hopefully get you going. — Chris W., Apr 11 '17 at 15:56

score 4 · Accepted Answer · edited May 23 '17 at 11:46

4

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.

edited May 23 '17 at 11:46

Community

1
1

answered Apr 11 '17 at 19:55

Chris W.

22,835
3
60
94

Thank you Chris for your reply. AI to XAML seems to be a great way to produce interactive images made in AI. My problem is more complex unfortunately. A 3rd party tool produces a complex chart-like SVG (loaded with data-points) that I wish to use that SVG and make interactive using WPF. I found a library called SvgToXaml that takes an SVG and translates it into the DrawingImage I showed you. But as you commented a consolidated drawingImage is not easy to work with. Do you know if is there a way to make the DrawingImage interactive? – Luciano Apr 13 '17 at 09:32
@Luciano So you're going to have multiple frustrations doing it that way. DrawingImage has a lot of limitations in that there's no events, etc. Same goes for it's sub classes like GeometryDrawing so you're not going to be able to attach an event to an individual shape for things like Mouse events (Click, etc) without some serious customization. Which would be a headache by itself considering if I remember right a lot of it is sealed. So honestly, at least off the top of my head -- I have no simple answer for you on this one besides the technique I've shown in concept. Sorry amigo. – Chris W. Apr 13 '17 at 16:19
@Chirs I understand, and you confirmed what I was afraid of. Thank yo for your replies. – Luciano Apr 18 '17 at 10:33

Make GeometryDrawing interactive map from the UI? (Interact with an SVG image in WPF)

1 Answers1

Linked