Wpf touch UI limit image (or any element) to its parent

See more:

C#

Windows

XAML

WPF

Microsoft

touch

I'm trying to develop an app for windows desktop that support touch screens
so i want let user zoom or move pics with touch
but my problem is with this code the picture will move around the windows not just in its parent (Canvas)
i want to limit picture (rectangle) in it's parent (canvas)

this is a sample code to move or zoom a rectangle :

xaml

<Canvas Background="Green"  x:Name="_canvas"
       ManipulationStarting="_canvas_ManipulationStarting"
       ManipulationDelta="_canvas_ManipulationDelta" Margin="76,105,117,46">
           <rectangle ismanipulationenabled="True" fill="Red" width="100" height="100"></rectangle>
       </Canvas>

C#

private void _canvas_ManipulationStarting(object sender,
                      ManipulationStartingEventArgs e)
{
    e.ManipulationContainer = _canvas;
    e.Handled = true;
}


private void _canvas_ManipulationDelta(object sender,
                         ManipulationDeltaEventArgs e)
{

    var element = e.OriginalSource as UIElement;

    var transformation = element.RenderTransform
                                         as MatrixTransform;
    var matrix = transformation == null ? Matrix.Identity :
                                   transformation.Matrix;

    matrix.ScaleAt(e.DeltaManipulation.Scale.X,
                   e.DeltaManipulation.Scale.Y,
                   e.ManipulationOrigin.X,
                   e.ManipulationOrigin.Y);

    matrix.RotateAt(e.DeltaManipulation.Rotation,
                    e.ManipulationOrigin.X,
                    e.ManipulationOrigin.Y);

    matrix.Translate(e.DeltaManipulation.Translation.X,
                     e.DeltaManipulation.Translation.Y);

    element.RenderTransform = new MatrixTransform(matrix);
    e.Handled = true;
}

What I have tried:

i try to add touch support to my application