Image control mouse move inside Scrollviewer

Hello all,

I have a image inside stackpanel and scrollviewer. I pan and zoom using mousedown and mousemove events using rendertransform. I want to restrict the image movement when zoomed in and out. The image should be dragged only to certain distance from the grid border.Now it is draggable even to the edge of the grid leaving background black of the grid.How could I do that?

Some code snippet:

<Grid Background="Black" Grid.Row="1" Name="grid" Grid.Column="1" Margin="0,0,0,0" ><ScrollViewer x:Name="ScrollViewer1"  HorizontalScrollBarVisibility="Hidden" verticalScrollBarVisibility="Hidden"><StackPanel Width="{Binding ActualWidth, ElementName=ScrollViewer1}" Height="{Binding ActualHeight, ElementName=ScrollViewer1}" Orientation="Horizontal" >
<Image x:Name="img" Focusable="True" Stretch="Fill" HorizontalAlignment="Left" VerticalAlignment="Top" Width="{Binding ActualWidth, ElementName=ScrollViewer1}" Height="{Binding ActualHeight, ElementName=ScrollViewer1}"/></StackPanel>/ScrollViewer>
Events:
-------
private void image_MouseMove(object sender, MouseEventArgs e)
 {
if (!img.IsMouseCaptured) return;
Point p = e.GetPosition(ScrollViewer1);
Matrix m = img.RenderTransform.Value;
m.OffsetX = origin.X + (p.X - start.X);
m.OffsetY = origin.Y + (p.Y - start.Y);
img.RenderTransform = new MatrixTransform(m);

}
 private void image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            if (img.IsMouseCaptured) return;           
            img.CaptureMouse();
            start = e.GetPosition(ScrollViewer1);
            origin.X = img.RenderTransform.Value.OffsetX;
            origin.Y = img.RenderTransform.Value.OffsetY;
        }
private void image_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {  img.ReleaseMouseCapture();}

Thanks.