Dissecting Hard Rock Memorabilia and Silverlight Deep Zoom - Part 8

For completion sake, I decided to post the animation and randomize code here. The code to do the actual animation is lifted as is from the Expression Team blog but I did make a few subtle changes -

1. Fixed the memory leak issue by getting rid of the Storyboard after it has achieved its purpose
2. Used a single storyboard to animate multiple images. I don't know if this is better than multiple storyboards (one for each image) so it would be nice to hear some opinions

Code to animate the image

private void AnimateImage(MultiScaleSubImage currentImage, Point futurePosition)
{
    // Create Keyframe
    SplinePointKeyFrame endKeyframe = new SplinePointKeyFrame();
    endKeyframe.Value = futurePosition;
    endKeyframe.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(1));

    KeySpline ks = new KeySpline();
    ks.ControlPoint1 = new Point(0, 1);
    ks.ControlPoint2 = new Point(1, 1);
    endKeyframe.KeySpline = ks;

    // Create Animation
    PointAnimationUsingKeyFrames moveAnimation = new PointAnimationUsingKeyFrames();
    moveAnimation.KeyFrames.Add(endKeyframe);

    Storyboard.SetTarget(moveAnimation, currentImage);
    Storyboard.SetTargetProperty(moveAnimation, "ViewportOrigin");

    // Add the animation to the Storyboard
    _moveStoryboard.Children.Add(moveAnimation);
}

Code to invoke the animation - I decided against animating the hidden images (like Hard Rock) since my goal is to work with large amount of images and I didn't want to incur the additional performance overhead

private Storyboard _moveStoryboard;

public void InitStoryboard()
{
    _moveStoryboard = new Storyboard();
    msi.Resources.Add(_moveStoryboard);

    _moveStoryboard.Completed += (sender, e) => msi.Resources.Remove((Storyboard)sender);
}
       
public void ArrangeImages()
{
    InitStoryboard();
   
    ...
   
    // Then display the displayable images to scale
    for (int i=0; i<_imagesToShow.Count; i++) {
        double X = rows[subImages[i].RowNum].CalcX(subImages[i].ColNum);
        double Y = margin;
        for (int j=0; j<subImages[i].RowNum; j++)
            Y += spaceBetweenImages + rows[j].Height;
       
        _imagesToShow[i].ViewportWidth = containerAspectRatio / subImages[i].Width;
        AnimateImage(_imagesToShow[i], new Point(-(X / subImages[i].Width), -(Y / subImages[i].Width)));
        _imagesToShow[i].Opacity = 1.0;
    }
   
    // Play Storyboard
    _moveStoryboard.Begin();
}

Code to Randomize the images. The code for the RandomizeListOfImages is lifted from the Expression Team blog

buttonRandomize.Click += (sender, e) => RandomizeAndArrange();

private void RandomizeAndArrange() 
{
    _imagesToShow = RandomizedListOfImages();
    ArrangeImages();
}

private List<MultiScaleSubImage> RandomizedListOfImages()
{
    List<MultiScaleSubImage> imageList = new List<MultiScaleSubImage>();
    Random ranNum = new Random();

    // Store List of Images
    _imagesToShow.ForEach(subImage => imageList.Add(subImage));

    // Randomize Image List
    int numImages = imageList.Count;
    for(int i=0; i<numImages; i++) {
        MultiScaleSubImage tempImage = imageList[i];
        imageList.RemoveAt(i);

        int ranNumSelect = ranNum.Next(imageList.Count);

        imageList.Insert(ranNumSelect, tempImage);
    }
    return imageList;
}