Centering mouse-scroll zoom onto the current mouse position

Question

I am able to zoom in to my image using this code:

var transformGroup = (TransformGroup)image.RenderTransform;
var transform = (ScaleTransform)transformGroup.Children[0];

double zoom = e.Delta > 0 ? ZoomSpeed : -ZoomSpeed;

if (!(transform.ScaleX < minScale) || zoom > 0)
{
    transform.ScaleX += zoom;
    transform.ScaleY += zoom;
}

And it works just fine, but I would like the image to zoom in at the point where the mouse is positioned when I scroll.

I tried copying this answer:

var matTrans = image.RenderTransform as MatrixTransform;
var pos1 = e.GetPosition(image);

var scale = e.Delta > 0 ? ZoomSpeed : -ZoomSpeed;

var mat = matTrans.Matrix;
mat.ScaleAt(scale, scale, pos1.X, pos1.Y);
matTrans.Matrix = mat;
e.Handled = true;

but for some reason I get a NullReferenceException on the first line, even though I can see that image definitely contains the object from my xaml window.

I would really appreciated and help on this one - I have pretty much no experience with performing this kind of transformation.

Here is my xaml:

<Grid>
    <Border Name="border" Margin="10,26,10.4,27.8">
        <Image Name="image" Source="{Binding DisplayedImage, Mode=OneWay, IsAsync=True}" Opacity="1" Margin="0,0,-0.4,0.2" />
    </Border>
</Grid>

score 0 · Accepted Answer · answered Dec 24 '17 at 01:47

By combining the 2 snippets in my question I came up with this

var transformGroup = (TransformGroup)image.RenderTransform;
var transform = (ScaleTransform)transformGroup.Children[0];
var pos1 = e.GetPosition(image);
double zoom = e.Delta > 0 ? ZoomSpeed : -ZoomSpeed;

if (!(transform.ScaleX < minScale) || zoom > 0) 
{
    transform.ScaleX += zoom;
    transform.ScaleY += zoom;

    transform.CenterX = pos1.X;
    transform.CenterY = pos1.Y;
}

And it does pretty much what I need it to do, which is center the image at the current mouse position.

Centering mouse-scroll zoom onto the current mouse position

1 Answers1