ScaleTransform applying Translate effects

Question

I want to create a zooming control, that can be operated with mouse wheel. Scroll up -> zoom in; scroll down -> zoom out.
Additionally, I want the zoom center to be located at wherever the mouse pointer is. So that one can always zoom in on the spot, where the mouse cursor is.

Seems simple enough, yet I can't get to work.
I am using a Grid and applying ScaleTransform to it.

When I zoom in the first time, it works and zooms in that particular spot. But then, if I move the cursor to some other spot and try to zoom in a bit more, the Grid is being offset and my initial center is off.

What is causing this? How can fix this?

My code:

Class MainWindow 
Dim trans As New ScaleTransform
Dim Scale As Double = 1
Private Sub DefGrid_MouseWheel(sender As Object, e As MouseWheelEventArgs) Handles DefGrid.MouseWheel
    If e.Delta > 0 Then
        Scale = Scale + 0.1
    End If

    If e.Delta < 0 Then
        Scale = Scale - 0.1
    End If

    trans.CenterX = e.GetPosition(DefGrid).X
    trans.CenterY = e.GetPosition(DefGrid).Y

    trans.ScaleX = Scale
    trans.ScaleY = Scale

    DefGrid.RenderTransform = trans

End Sub
End Class

And the xaml:

<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525" PreviewMouseWheel="Window_PreviewMouseWheel">
<Grid x:Name="DefGrid" HorizontalAlignment="Left" Height="291" Margin="19,10,0,0" VerticalAlignment="Top" Width="475">
    <Canvas HorizontalAlignment="Left" Height="254" Margin="137,10,0,0" VerticalAlignment="Top" Width="195">
        <Canvas.Background>
            <ImageBrush ImageSource="TestImage.jpg"/>
        </Canvas.Background>
    </Canvas>
</Grid>
</Window>

There's a Canvas image on the grid, just for reference.

score 1 · Accepted Answer · edited May 23 '17 at 11:56

1

It's a bit more complicated unfortunately. If you don't think you'll need scrollbars, check the answers here (I couldn't find VB-specific examples, so these are C#): Pan & Zoom Image If you need scrollbars as well, you will need to scroll to the mouse pointer. In that case you need something like this: http://www.codeproject.com/Articles/97871/WPF-simple-zoom-and-drag-support-in-a-ScrollViewer

edited May 23 '17 at 11:56

Community

1
1

answered Jan 22 '15 at 18:20

mnistic

10,866
2
19
33

you can also look here http://www.codeproject.com/Articles/85603/A-WPF-custom-control-for-zooming-and-panning – stsur Jan 22 '15 at 18:24
That's almost exactly what I intend my result to look like. With the simple exception, that I don't need the zoom level scrollbar. But panning and zooming is exactly what I need. OK, this is going to be hard, since I haven't ever really done anything in C#. Well, I'll try to sink in and understand, somehow. – Emi Jan 22 '15 at 19:02
Thanks to mnistic! I went with the option in the second link. Because in my original code (not the example I posted here), I used the same construction with scrollviewer and grid. Anyways, I carefully (commenting-out trial and error) isolated the C# code parts, that I needed and then even more carefully rewrote everything, line by line from C# to VB. And in the end, it worked! Thank You! – Emi Jan 22 '15 at 22:28
stsur: I tried it, but Visual Studio 2013 throws some errors on those examples and I'm not sure how to fix those, since I really don't know much C#. – Emi Jan 22 '15 at 22:31

ScaleTransform applying Translate effects

1 Answers1