WPF Image panning limit

Question

I am using the below code to allow the user to pan two images. I want to limit the panning so the image stops at the beginning of the viewbox (so there is never any white space).

I have looked at the other answer I could find (WPF Image Panning Constraints), but I'm not sure how to adapt it to my code. I've tried checking if the image bounds are within the grid (which is the images parent), and they aren't, so no panning can happen.

Not sure if the problem is with the way I'm panning, I use a grid (rather than a border) as I need to pan two images so they appear as one long image. The viewbox is there because without it, the area of the images off the screen weren't painted when moved onto the screen.

Any help would be appreciated.

<UserControl x:Class="RicohToPP_WPF.PanImageControl"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:local="clr-namespace:RicohToPP_WPF"
         mc:Ignorable="d" 
         d:DesignHeight="450" d:DesignWidth="800" BorderBrush="Red" BorderThickness="1">
<Grid>
    <Viewbox x:Name="viewBox1" Stretch="UniformToFill" >
        <Grid x:Name="grid">
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Image x:Name="image1" Stretch="UniformToFill" ClipToBounds="False" Grid.Column="0" MouseLeftButtonDown="image1_MouseLeftButtonDown" MouseLeftButtonUp="image1_MouseLeftButtonUp" MouseMove="image1_MouseMove" Cursor="Cross"/>
            <Image x:Name="image2" Stretch="UniformToFill" ClipToBounds="False" Grid.Column="1" Margin="-2,0,0,0" MouseLeftButtonDown="image2_MouseLeftButtonDown" MouseLeftButtonUp="image2_MouseLeftButtonUp" MouseMove="image2_MouseMove" Cursor="Cross" />
        </Grid>
    </Viewbox>
</Grid>

private void RecalculatePositions(MouseEventArgs e)
{
    var tt1 = (TranslateTransform)((TransformGroup)this.image1.RenderTransform).Children.First(tr => tr is TranslateTransform);
    var tt2 = (TranslateTransform)((TransformGroup)this.image2.RenderTransform).Children.First(tr => tr is TranslateTransform);
    Vector vector = this._startPoint - e.GetPosition(this.grid);

    double newX = this._originPoint.X - vector.X;
    double newY = this._originPoint.Y - vector.Y;

    if (newX <= 0)
    {
        tt1.X = newX;
        tt2.X = newX;
    }

    if (newY <= 0)
    {
        tt1.Y = newY;
        tt2.Y = newY;
    }
}