Question

I am having trouble with a zoom in button on my scrollviewer.

Inside of the viewer is a grid. And inside of that grid is a bunch of images laid out in a specific ordering. Ideally I would like to go from image to image by a button click, and I have acheived this. I have a functioning zoom out button, but when I zoom in…it does not scroll to where I want it to. I use the margin of the image to scroll to it.

The problem I seem to be having is that the scrollable height and width do not update.

When zoom out is pressed, I call:

zoomFactor = 1;
rosaryScroll.ZoomToFactor(zoomFactor);
rosaryScroll.InvalidateScrollInfo();
setRosaryState(rosaryState);

Set rosary state scrolls to a particular image in the viewer by using its margin and the size of the scrollviewer to center the image onto the scroll viewer.

rosaryScroll.ScrollToHorizontalOffset(
     (selectedBead.Margin.Left
     + (selectedBead.Width / 2)
     + rosaryScroll.Margin.Left / 2)
     * zoomFactor);
rosaryScroll.ScrollToVerticalOffset(
     (selectedBead.Margin.Top
     - (selectedBead.Height / 2)
     - rosaryScroll.Margin.Top / 2)
     * zoomFactor);

When I zoom out (zoomFactor was 5), the scrollable height/width are fine and easy to scroll around.
rosaryScroll.ScrollableHeight= 2336.0 double
rosaryScroll.ScrollableWidth= 2584.0 double

But when I zoom in (zoomFactor was 1), the scrollable height/width remain very small
rosaryScroll.ScrollableHeight= 84.0 double
rosaryScroll.ScrollableWidth= 0.0 double

So how can I update this Scrollable Height and Width after my zoom call? InvalidateScrollInfo() seems to be ineffective…

Answer 1

I’d consider giving up on using a ScrollViewer and roll-out your own solution based on manipulation events and render transforms. As you noticed – ScrollViewer isn’t written for easy programmatic manipulation and it is going to make it hard for you to implement any custom behavior that it wasn’t designed for. The properties don’t update immediately upon request and you might need to wait for some events (e.g. ViewChanged) before you see the new values. You could try using the extensions I wrote to animate the offset and zoom factor values, but be warned that these are a bit hacky and some people had problems with their behavior.