Blog on the Bog

I have seen a few people struggling with how to center their single image Deep Zooms on a specific point on their screen. Here’s how I do it.

void msi_Reset()
{
    msi.UseSprings = false;
    msi.ViewportOrigin = new Point(0, 0);

    msi.MotionFinished += new RoutedEventHandler(msi_Center);

    double MSISize = 3;
    if (msi.AspectRatio > 1)
    {
        msi.ViewportWidth = MSISize;
    }
    else
    {
        msi.ViewportWidth = MSISize / msi.AspectRatio;
    }

}

void msi_Center(object sender, RoutedEventArgs e)
{
    msi.MotionFinished -= msi_Center;

    Point center = msi.ElementToLogicalPoint(new Point(-msi.ActualWidth / 2, -msi.ActualHeight / 2));
    center.X += 0.5;
    center.Y += 0.5 / msi.AspectRatio;

    msi.ViewportOrigin = center;

    msi.UseSprings = true;
}

In the msi_Reset() function I move the image to the top left corner of the screen and then resize it to 1/3 the width of the screen.

if (msi.AspectRatio > 1) - Checks to see if the image is a portrait or landscape. AspectRatio is the images width/height. So if it’s greater than 1 it’s a landscape, etc.

When this has finished resizing and positioning the image, the msi_Center() function is called. This then converts the center point of the screen into logical coordinates. Then adds 0.5 to the X moving the image to the left by half of its width, and 0.5 to the Y moving the image up by half of its width.

I have found that this only works when I have the msi.ViewPortOrigin set to (0,0)  at the start. This is a bit of problem if you have msi_Reset() hooked up to a window resize event as it makes the image jump around.