WPF InkCanvas draw even on space beyond bounds of Clip. Override Hit Test

Question

I am using InkCanvas.Clip property to clip my InkCanvas to the shape I need (I am using PathGeometry for that). I can only start drawing in this area, but I want to be able to start drawing outside of it. Of course, stoke parts beyond this area would not be displayed. How can I do that? I thought about overriding HitTestCore of InkCanvas, perhaps by default HitTest fails outside of my allowed drawing area

@Iron nowhere. Right now if you start drawing inside and go outside, strokes are registered, but they are not displayed outside (if you remove the Clip, you will be able to see them outside). I want to be able to start drawing outside and come inside. Strokes should be displayed only inside — IntegerOverlord, Aug 06 '18 at 15:01
As the `InkCanvas` was clipped, it can't receive the `MouseDown` event, which fires the drawing. So, you are unable to start drawing outside and come inside. — Iron, Aug 06 '18 at 15:11
@Iron I thought that maybe Hit Test is negative outside and I can override it. Is it possible? — IntegerOverlord, Aug 06 '18 at 15:38
Yes, the `HitTest` is invalid outside. Unfortunately, you can't override it, as clipped `UIElement` will be penetrated in WPF. — Iron, Aug 06 '18 at 15:47

Iron · Accepted Answer · 2018-08-07T03:05:51.843

Maybe OpacityMask can achieve what you want:

Stroke to be clipped outside
To start drawing outside and come inside.

<Grid Background="LightSalmon">
    <InkCanvas Background="LightBlue">
        <InkCanvas.OpacityMask>
            <DrawingBrush>
                <DrawingBrush.Drawing>
                    <GeometryDrawing>
                        <GeometryDrawing.Brush>
                            <SolidColorBrush Color="Black"/>
                        </GeometryDrawing.Brush>
                        <GeometryDrawing.Geometry>
                            <PathGeometry>
                                <PathGeometry.Figures>
                                    <PathFigure StartPoint="0,0">
                                        <PathFigure.Segments>
                                            <PolyLineSegment Points="100,0 100,100 0,100 0,0"/>
                                            <PolyLineSegment Points="100,0 100,100 0,100 0,0"/>
                                            <PolyLineSegment Points="30,30 70,30 70,70 30,70 30,30"/>
                                        </PathFigure.Segments>
                                    </PathFigure>
                                </PathGeometry.Figures>
                            </PathGeometry>
                        </GeometryDrawing.Geometry>
                    </GeometryDrawing>
                </DrawingBrush.Drawing>
            </DrawingBrush>
        </InkCanvas.OpacityMask>
    </InkCanvas>
</Grid>

Appended:

To avoid the shifting as @SaintMSent mentioned, we should enable the ClipToBounds property of the InkCanvas's AdornerDecorator:

<InkCanvas x:Name="MyInkCanvas" Background="LightBlue" Loaded="MyInkCanvas_OnLoaded">
    ......
</InkCanvas>

Code-behind:

private void MyInkCanvas_OnLoaded(object sender, RoutedEventArgs e)
{
    var adornerDecorator = VisualTreeHelper.GetChild(MyInkCanvas, 0) as AdornerDecorator;
    if (adornerDecorator != null)
    {
        adornerDecorator.ClipToBounds = true;
    }
}

I tried it. Seems to work ok, but there is one problem. When I go beyond bounds of the window, something weird happens. I just pasted your code into fresh WPF project. How can it be fixed? https://youtu.be/DCD9wr3s19g — IntegerOverlord, Aug 06 '18 at 19:56
To enable the `ClipToBounds` property of the InkCanvas's `AdornerDecorator`. — Iron, Aug 07 '18 at 03:07

WPF InkCanvas draw even on space beyond bounds of Clip. Override Hit Test

1 Answers1