WPF Panning Image - Prevent Image Edge From Panning out of View/Border

Question

I'm using this project as a reference: https://www.codeproject.com/Articles/168176/Zooming-and-panning-in-WPF-with-fixed-focus , but I want to limit the image from being panned off screen. I'd like panning to stop in an axis when the edge of the image is some fixed distance from the edge of the border. For example, the right edge of the image should always be at least +70 from the left edge of the border.

I've found some answered and unanswered questions, but this one seems to get me closer:
wpf-image-panning-constraints

I've modified the mouse move code as follows:

    private void image_MouseMove(object sender, MouseEventArgs e)
    {
        if (!image.IsMouseCaptured) return;
        Point p = e.MouseDevice.GetPosition(border);

        Point relativePoint = image.TransformToAncestor(border)
                      .Transform(new Point(0, 0));

        

        Matrix m = image.RenderTransform.Value;
        var xDelta = p.X - start.X;
        var yDelta = p.Y - start.Y;
        m.OffsetX = origin.X + (xDelta);
        m.OffsetY = origin.Y + (yDelta);

        var currentImageBounds = ImageBounds();
        var relativePosition  = image.TransformToAncestor(border).Transform(new Point(0, 0));
        if (currentImageBounds.Right <= 70 && xDelta<0)
        {
            //I'm messing with this code to modify/fix the x offset  
            m.OffsetX = origin.X;//CurrentImageBounds.Left + 70 ; //+ CurrentImageBounds.Width+70;
        }
        image.RenderTransform = new MatrixTransform(m);
    }


    private void image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        if (image.IsMouseCaptured) return;
        image.CaptureMouse();

        start = e.GetPosition(border);
        origin.X = image.RenderTransform.Value.OffsetX;
        origin.Y = image.RenderTransform.Value.OffsetY;
    }

    private Rect ImageBounds()
    {
        var rect = new Rect(image.RenderSize);
        var bounds = image.TransformToAncestor(border).TransformBounds(rect);
        //CurrentImageBounds = bounds;
        Debug.WriteLine($"ImageRight: {bounds.Right}");
        return bounds;
    }

When I get to the 70px threshold, the image just bounces around on the edge. I'm missing something here and stuck.

How do I accomplish this?

Answer 1

Here is a short example of zooming and panning an Image element in a Canvas. It handles the mouse events on the Canvas, not on the Image.

Take a look at the code block if (translateConstraint > 0) { ... } in the MouseMove event handler, where the possible amount of translation in each direction is limited. The bounds of the transformed Image element are determined by using the Matrix property of the MatrixTransform in the Image#s RenderTransform.

Something similar would have to be added to the MouseWheel event handler.

It is also worth to note that the code does not reassign the Image's RenderTransform on each update, but just reassigns the Matrix property of the MatrixTransform that is assigned in XAML.

XAML:

<Canvas Background="Transparent"
        MouseLeftButtonDown="CanvasMouseLeftButtonDown"
        MouseLeftButtonUp="CanvasMouseLeftButtonUp"
        MouseMove="CanvasMouseMove"
        MouseWheel="CanvasMouseWheel">
    <Image x:Name="image" Stretch="None">
        <Image.RenderTransform>
            <MatrixTransform/>
        </Image.RenderTransform>
    </Image>
</Canvas>

Code behind:

private Point? mousePosition;
private int translateConstraint = 70;

private void CanvasMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    var canvas = (Canvas)sender;
    if (canvas.CaptureMouse())
    {
        mousePosition = e.GetPosition(canvas);
    }
}

private void CanvasMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
    var canvas = (Canvas)sender;
    canvas.ReleaseMouseCapture();
    mousePosition = null;
}

private void CanvasMouseMove(object sender, MouseEventArgs e)
{
    if (mousePosition.HasValue)
    {
        var canvas = (Canvas)sender;
        var p = e.GetPosition(canvas);
        var matrix = ((MatrixTransform)image.RenderTransform).Matrix;
        var dx = p.X - mousePosition.Value.X;
        var dy = p.Y - mousePosition.Value.Y;
        mousePosition = p;

        if (translateConstraint > 0)
        {
            var imageSize = new Point(image.ActualWidth, image.ActualHeight);
            var imageBounds = new Rect(
                matrix.Transform(new Point()),
                matrix.Transform(imageSize));

            var dxMin = translateConstraint - imageBounds.Right;
            var dxMax = canvas.ActualWidth - translateConstraint - imageBounds.Left;
            dx = Math.Min(Math.Max(dx, dxMin), dxMax);

            var dyMin = translateConstraint - imageBounds.Bottom;
            var dyMax = canvas.ActualHeight - translateConstraint - imageBounds.Top;
            dy = Math.Min(Math.Max(dy, dyMin), dyMax);
        }

        matrix.Translate(dx, dy);
        ((MatrixTransform)image.RenderTransform).Matrix = matrix;
    }
}

private void CanvasMouseWheel(object sender, MouseWheelEventArgs e)
{
    var canvas = (Canvas)sender;
    var p = e.GetPosition(canvas);
    var matrix = ((MatrixTransform)image.RenderTransform).Matrix;
    var scale = e.Delta >= 0 ? 1.1 : (1.0 / 1.1); // choose appropriate scaling factor

    matrix.ScaleAt(scale, scale, p.X, p.Y);
    ((MatrixTransform)image.RenderTransform).Matrix = matrix;
}