0

In WPF InkCanvas, ink is rendered on top and strokes don't have z-index property. I have other UIElements like shape, images on InkCanvas and can't bring UIElements to top. Is there any work around for this problem. I have tried
below things.

1) use two different InkCanvas (one for strokes & one for UIElements) - Can't achieve sandwich effect in this (i.e. UIElement between strokes Something like this in this circle is UIElement 2) Masking strokes using geometry path and add as UIElement - If I add strokes as UIElements (using path) then I will loose erase functionality.

Himanshu Mange
  • 104
  • 1
  • 10

1 Answers1

1

The map editor which is part of our game suite uses ink to draw terrain so I have recent experience of this sort of thing.

The way my app works is you select a thing you're drawing ( woods, road, contour etc ) and draw a stroke using ink.

I then process that stroke and obtain a geometry. I pass that to a viewmodel > itemssource > itemscontrol. This is then templated into a piece of terrain. This itemscontrol is below the inkcanvas. The user can manipulate the z-index of those by moving them up and down in the observablecollection. I rely on just the order to define z-index.

I also retain the data from each stroke by serialising it.

You're thinking "how about erase?". To do that I'd have an explicit erase-this-thing mode. Let them pick a shape and get it's stroke data, add the stroke back to the inkcanvas. Once they finish erasing then use a "save changes" button or something to re-process the stroke(s) and switch back to edit mode.

Since this is a game map editor I'm working on, drawing produces area and line types of terrain but their area/line is defined by a geometry translated from a stroke. ZIndex corresponds to the order of objects in the left panel. The buttons you can see with the chevrons pointing up and down move the order of a enter image description here

Andy
  • 11,864
  • 2
  • 17
  • 20
  • I appreciate your help. But again sandwich effect (strokes-UIElements-strokes) can't be achieved using your solution. I have attached image for your reference In original question. – Himanshu Mange Dec 14 '18 at 06:13
  • Yes it can. The itemscontrol in my app has a canvas for it's itemspanel. Geometries are used to template into objects on that. The zindex is defined by the order I add the viewmodels. The red one would be first, then yellow then black, then blue. They would overlay each other like your picture. I also have a mechanism to re-order the viewmodels to change that zindex.. – Andy Dec 14 '18 at 09:21