I want the WPF Adorner to be drawn only on the desired area

Question

If you obtain the AdornerLayer from the Canvas and draw the Adorner, it will still be drawn outside the Canvas.

                    if(newAdorner != null)
                    {
                        AdornerLayer.GetAdornerLayer(_drawingCanvas).Add(newAdorner);
                        _adorners.Add(shapeItem.Uid, newAdorner);
                    }

        <!--<AdornerDecorator x:Name="DrawingAdorner">-->
            <Canvas x:Name="DrawingCanvas" Background="Transparent">
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="MouseLeftButtonDown">
                        <prism:InvokeCommandAction Command="{Binding CanvasLButtonDownCmd}" />
                    </i:EventTrigger>
                    <i:EventTrigger EventName="MouseLeftButtonUp">
                        <prism:InvokeCommandAction Command="{Binding CanvasLButtonUpCmd}" />
                    </i:EventTrigger>
                    <i:EventTrigger EventName="MouseMove">
                        <prism:InvokeCommandAction Command="{Binding CanvasMouseMoveCmd}" />
                    </i:EventTrigger>
                    <i:EventTrigger EventName="SizeChanged">
                        <prism:InvokeCommandAction Command="{Binding CanvasSizeChangedCmd}" />
                    </i:EventTrigger>
                </i:Interaction.Triggers>
            </Canvas>
        <!--</AdornerDecorator>-->

enter image description here

How can I make the Adorner only appear within the Canvas area?

I try this.

        <AdornerDecorator x:Name="DrawingAdorner">
            <Canvas x:Name="DrawingCanvas" Background="Transparent">
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="MouseLeftButtonDown">
                        <prism:InvokeCommandAction Command="{Binding CanvasLButtonDownCmd}" />
                    </i:EventTrigger>
                    <i:EventTrigger EventName="MouseLeftButtonUp">
                        <prism:InvokeCommandAction Command="{Binding CanvasLButtonUpCmd}" />
                    </i:EventTrigger>
                    <i:EventTrigger EventName="MouseMove">
                        <prism:InvokeCommandAction Command="{Binding CanvasMouseMoveCmd}" />
                    </i:EventTrigger>
                    <i:EventTrigger EventName="SizeChanged">
                        <prism:InvokeCommandAction Command="{Binding CanvasSizeChangedCmd}" />
                    </i:EventTrigger>
                </i:Interaction.Triggers>
            </Canvas>
        </AdornerDecorator>

enter image description here

Answer 1

The code works properly when modified as shown below.

        <AdornerDecorator>
            <Canvas x:Name="DrawingCanvas" Background="Transparent">
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="MouseLeftButtonDown">
                        <prism:InvokeCommandAction Command="{Binding CanvasLButtonDownCmd}" />
                    </i:EventTrigger>
                    <i:EventTrigger EventName="MouseLeftButtonUp">
                        <prism:InvokeCommandAction Command="{Binding CanvasLButtonUpCmd}" />
                    </i:EventTrigger>
                    <i:EventTrigger EventName="MouseMove">
                        <prism:InvokeCommandAction Command="{Binding CanvasMouseMoveCmd}" />
                    </i:EventTrigger>
                    <i:EventTrigger EventName="SizeChanged">
                        <prism:InvokeCommandAction Command="{Binding CanvasSizeChangedCmd}" />
                    </i:EventTrigger>
                </i:Interaction.Triggers>

                <ItemsControl x:Name="BoxItems" ItemsSource="{Binding Boxes}">
                </ItemsControl>
                <ItemsControl x:Name="EllipseItems" ItemsSource="{Binding Ellipses}">
                </ItemsControl>
            </Canvas>
        </AdornerDecorator>

Also I added ClipToBounds="True".

enter image description here