Search code examples
wpfinkcanvas

WPF InkCanvas Z-Index for strokes


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.


Solution

  • 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