Skip to content

Clamping the objects inside the bounds of the Canvas! #1

@MrFJ

Description

@MrFJ

This project helped me a ton, so I figure I'll pay it back by leaving this for future viewers.

If you want to clamp the elements inside the canvas, add this to the canvas element: x:Name="Canvas"
Then change the code-behind to:

protected bool isDragging;
private Point clickPosition;
private TranslateTransform originTT;
private Rect canvasBounds;

private void Canvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    if (sender is Grid draggableControl)
    {
        originTT = draggableControl.RenderTransform as TranslateTransform ?? new TranslateTransform();
        isDragging = true;
        clickPosition = e.GetPosition(this);
        draggableControl.CaptureMouse();
        canvasBounds = Canvas.RenderTransform.TransformBounds(
            new Rect(0, 0, Canvas.ActualWidth, Canvas.ActualHeight));
    }
}
private void Canvas_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
    isDragging = false;
    if(sender is Grid draggableControl) draggableControl.ReleaseMouseCapture();
}
private void Canvas_MouseMove(object sender, MouseEventArgs e)
{
    if (isDragging && sender is Grid draggableControl)
    {
        Point currentPosition = e.GetPosition(this);
        var transform = draggableControl.RenderTransform as TranslateTransform ?? new TranslateTransform();
        transform.X = Math.Clamp(originTT.X + (currentPosition.X - clickPosition.X), canvasBounds.Left, canvasBounds.Right - draggableControl.ActualWidth);
        transform.Y = Math.Clamp(originTT.Y + (currentPosition.Y - clickPosition.Y), canvasBounds.Top, canvasBounds.Bottom - draggableControl.ActualHeight);
        draggableControl.RenderTransform = new TranslateTransform(transform.X, transform.Y);
    }
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions