CODEWITHSUNDEEP
c#wpfimagescrollviewer
greenoldman
greenoldman

Reputation: 21062

How to continue scaling the image visually?

I have a ScrollViewer with Image in it. I attached listener to MouseWheel event so I could zoom in/out the image. The code looks like this:

private void ImageMouseWheel(object sender, MouseWheelEventArgs e)
{
  Matrix matrix = image.LayoutTransform.Value;

  if (e.Delta > 0)
    matrix.ScaleAt(1.5, 1.5, e.GetPosition(image).X, e.GetPosition(image).Y);
  else
    matrix.ScaleAt(1.0 / 1.5, 1.0 / 1.5, e.GetPosition(image).X, e.GetPosition(image).Y);

  image.LayoutTransform = new MatrixTransform(matrix);
}

It pretty much works, but it has odd quirk -- when the image is so zoomed out that is at state "fit to parent" visually I cannot it zoom out more (visually), but the matrix is scaled still.

This is bad in sense that any computation after this point is wrong, and also it has strange effect in UI, say user starts from "fit to parent" zoom:

Because of those problems I would like either to continue zooming out visually in order to keep both things (internal and visual) in sync.

How to achieve this?

Xaml:

<DockPanel>
    <ScrollViewer Name="imageScrollViewer" Grid.Column="1"  MouseWheel="ImageMouseWheel"  
      CanContentScroll="true" HorizontalScrollBarVisibility="Auto"
      VerticalScrollBarVisibility="Auto">
        <Image MouseWheel="ImageMouseWheel" Name="image" Source="{Binding Path=Bitmap}" 
          MouseMove="Image_MouseMove"></Image>
    </ScrollViewer>
</DockPanel>

Update: Originally I asked how to continue scaling visually or stop internally, but I found out that the last step of zooming out, when the image hits the state "fit to parent" is already out of sync internally-visually. For example position of the mouse is not correctly decoded above such image when moving the mouse around. Only when I zoom in a little the positions are correct. So the only way I see is to scale it visually correctly.

Upvotes: 1

Views: 43

Answers (1)

greenoldman
greenoldman

Reputation: 21062

Hmm, I am tempted to delete this embarrassing question, but on the other hand maybe someone will have the same problem in future.

The problem is image is zoomed out, but later the dock panel zoom it in back. The image does not know about it so the math goes astray. The solution is to add some container which does not do additional scaling on itself, like stack panel.

Thus the solution lies in xaml:

<DockPanel>
  <StackPanel>
    ...
  </StackPanel>
</DockPanel>

Upvotes: 2

Related Questions