Dissecting Hard Rock Memorabilia and Silverlight Deep Zoom - Part 3

In Part 2 we saw the code for arranging the images in a nice clean layout. This post will discuss when to call the ArrangeImages() method.

When the page that contains the Silverlight control is first loaded, the MultiScaleImageControl will load the images and render it on the screen. The issue here is that the ArrangeImages method hasn't had a chance to do its magic yet! Hence we have to intercept the MultiScaleImage control somehow before it renders the images. This can be achieved by the following 2 steps:

1. Set UseSprings to false in the Xaml

<MultiScaleImage x:Name="msi" UseSprings="false"/>

2. Intercept the MultiScaleImage.Motionfinished Event. Call ArrangeImages in this handler

msi.MotionFinished += delegate(object sender, RoutedEventArgs e)
{
  // This is required to ensure that ArrangeImages is called only once
  if(msi.UseSprings == false) {
      ArrangeImages();
      msi.UseSprings = true;
  }
};

In addition, the ArrangeImages method can be called on demand - as in a button click or after the dataset is filtered.

Here is a sample image of what the output looks like after ArrangeImages is called on 17 arbitrarily cropped images