Moving strokes between InkCanvas with background color change of only the strokes? (WPF)

Question

Lets say I have three layers (from bottom to top),

1. InkCanvas (the lowest z level),
2. InkCanvas (used for writing),
3. InkCanvas ( the highest z level, on top, used for drawing).

In MVVM (WPF), how can capture of strokes from the highest z-level be moved to the lowest level z-level? (When moved, the bounding rectangle of the strokes is to be filled with a Yellow color. That is, the background color of only the area enclosing the strokes is to be colored yellow--the rest of the InkCanvas is to remain transparent.) Additionally, I wish to keep the strokes at the same coordinates in the target InkCanvas.

TIA

Answer 1

If I understood correctly, you could simply add an additional bottom layer for the yellow rectangles and move your strokes from the top layer to the other layer as soon as they are created.

XAML:

<Grid>
    <Canvas x:Name="canvas"/>
    <InkPresenter x:Name="inkPresenter"/>
    <InkCanvas x:Name="inkCanvas" StrokeCollected="InkCanvas_StrokeCollected" Background="Transparent"/>
</Grid>

Code behind:

void InkCanvas_StrokeCollected(object sender, InkCanvasStrokeCollectedEventArgs e) {
    var stroke = e.Stroke;
    inkCanvas.Strokes.Remove(stroke);
    inkPresenter.Strokes.Add(stroke);
    var bounds = stroke.GetBounds();
    var yellowRect = new Rectangle { Width = bounds.Width, Height = bounds.Height, Fill = Brushes.Yellow };
    Canvas.SetLeft(yellowRect, bounds.X);
    Canvas.SetTop(yellowRect, bounds.Y);
    canvas.Children.Add(yellowRect);
}