Silverlight : Using ViewportOrigin and ViewportWidth in Deep Zoom

I’m posting this because the documentation on ViewportOrigin is wrong and it might be a while before it can be updated on the live site. In the meantime, this post discusses how to use ViewportOrigin and ViewportWidth to control the viewport. Controlling the viewport allows you to specify the magnification level and location on a MultiScaleImage to zoom in on.

Let’s start with ViewportWidth. This value sets how wide the viewport window is relative to the entire image.

• ViewportWidth = 1: Displays the entire image (default).
• ViewportWidth <>: Zooms in on the image. You zoom in deeper into the image the closer you get to zero where zero is “completely zoomed in” and the user cannot see the image at all. The fraction of the width of the image that is visible is the ViewportWidth.
• ViewportWidth > 1: Zooms out from the image. The number of times the viewport is larger than the image is the ViewportWidth.

Note: See diagram below for examples.

Ok, so the width of the Viewport specifies how much in or out to zoom on the image but it does not specify where on the image the Viewport is viewing. To specify this, use the ViewportOrigin. The top left corner of the viewed image (not the MultiScaleImage, the container panel or canvas in which this image renders) is always (0,0).

For ViewportOrigin, the value specifies where the corner of the viewport should be relative to the corner of the image. This means if you want some blank space between the edge of the image and the viewport, you need to move the viewport to a negative location off the image. If you want the viewport to show just a portion of the image, then it will get moved to a positive location within the full image.

Note that in the diagrams above, I’m using coordinate numbers that conveniently place the image or area of the image within a neat square of the conceptual grid. This is only for demonstration purposes since you can specify any numbers (see diagram below); however, numbers outside the appropriate range (too high or too low) for either ViewportOrigin or ViewportWidth will render nothing of the image.

Note: Special thanks to Dan Cory and Lutz Gerhard (Microsoft Program Managers) for their review and feedback regarding this info.

Thanks,

Kaushik