This article is compatible with the latest version of Silverlight.
Introduction
With this article I continue the series for the MultiscaleImage. Yesterday I wrote about the MultiscaleImage control and the SubImages collection. Today I am going to explain how to randomize the SubImage collection by changing the order of the images in it and how to apply this change on the screen using animations. I will use the tarantula again, assuming that you have already get used to it. Don’t forget to check out the live demo and download the source code if you want to take a look at the whole application.
Live demo | Source code
Randomizing the images
Let's start with randomizing the order of the images in the SubImages collection. We do that we the help of the Random class. Here is the method:
private List<MultiScaleSubImage> Randomize()
{
List<MultiScaleSubImage> imageList = new List<MultiScaleSubImage>();
Random number = new Random();
foreach( MultiScaleSubImage subImage in MyMultiscaleImage.SubImages )
{
imageList.Add( subImage );
}
for( int i = 0; i < imageList.Count; i++ )
{
MultiScaleSubImage tempImage = imageList[ i ];
imageList.RemoveAt( i );
int newIndex = number.Next( imageList.Count );
imageList.Insert( newIndex, tempImage );
}
return imageList;
}
First we store the SubImages into a new list and then for each of the images we do the following - remove it from the list, generate a random number less then the size of the collection using the Random class and finally add it to the list at the position with index that number.
Rearranging the images on the screen
Since we can randomize the order of the images in certain collection, we can also rearrange them on the screen using some animation:
private void ShuffleImages()
{
List<MultiScaleSubImage> randomList = Randomize();
for( int i = 0; i < randomList.Count; i++ )
{
MultiScaleSubImage currentImage = randomList[ i ];
Point currentPosition = currentImage.ViewportOrigin;
Point futurePosition = new Point( -1.14 * i, 0 );
//Creating the Animation
Storyboard moveStoryboard = new Storyboard();
PointAnimationUsingKeyFrames moveAnimation = new PointAnimationUsingKeyFrames();
SplinePointKeyFrame startKeyframe = new SplinePointKeyFrame();
startKeyframe.Value = currentPosition;
startKeyframe.KeyTime = KeyTime.FromTimeSpan( TimeSpan.Zero );
startKeyframe = new SplinePointKeyFrame();
startKeyframe.Value = futurePosition;
startKeyframe.KeyTime = KeyTime.FromTimeSpan( TimeSpan.FromSeconds( 1 ) );
KeySpline ks = new KeySpline();
ks.ControlPoint1 = new Point( 0, 1 );
ks.ControlPoint2 = new Point( 1, 1 );
startKeyframe.KeySpline = ks;
moveAnimation.KeyFrames.Add( startKeyframe );
Storyboard.SetTarget( moveAnimation, currentImage );
Storyboard.SetTargetProperty( moveAnimation, new PropertyPath( "ViewportOrigin" ) );
moveStoryboard.Children.Add( moveAnimation );
moveStoryboard.Begin();
}
}
We get the randomized list of images. For each image we get the current position, which is stored in the ViewportOrigin property, and calculate the future position. The Y position of the image depends on the order number and the coefficient -1.14, which means that on the left of the image there will be space equal to the 1.14 of the size of the image. After that we create the animation using the current and the future position of the image. Furthermore, we set the target and the target property of the Storyboard. This method is applicable only when we have one column or one row (just change the coefficient). If you want to arrange your images into a grid with n columns and n rows, you must add some help variables and change the code a little. Here it is:
private void ShuffleImages( int columns, int rows )
{
List<MultiScaleSubImage> randomList = Randomize();
int totalImagesAdded = 0;
int imagesCount = randomList.Count;
for( int i = 0; i < rows; i++ )
{
for( int j = 0; j < columns; j++ )
{
if( imagesCount != totalImagesAdded )
{
MultiScaleSubImage currentImage = randomList[ totalImagesAdded ];
Point currentPosition = currentImage.ViewportOrigin;
Point futurePosition = new Point( -1.14 * j, -0.8 * i );
//Creating the Animation
Storyboard moveStoryboard = new Storyboard();
//Setting up the animation the same way as in the above example
moveStoryboard.Begin();
totalImagesAdded++;
}
else
{
break;
}
}
}
}
The columns and the rows can be passed as arguments. After that we iterate by i and j and depending on them and the coefficients we calculate the future position of the image. At the end we increment the count of the images added to our grid. It's not necessary that the count of the images matches the capacity of the grid, so every time you iterate you’d better check whether the count of the added images equals to the total count of images in the list. Note: As explained above -1.14 means that the image is moved with 1.14 of its width to the right. The important here is that when calculating the vertical offset of the image the coefficient is also applied to the width. In other words the ViewportOrigin is calculated on the base of the width of the image, so calculate your coefficients having this in mind. If you want to understand fully the ViewportOrigin take a look at this article by Jaime Rodriguez.
Summary
That was all about the rearranging of the images in the SubImages collection and on the screen. You can see that it's not that complicated and what you need it to understand the SubImage collection and its most important properties - the ViewportWidth and the ViewportOrigin. With the next article I'll continue to examine the MultiscaleImage control and give examples to the amazing things we can do with it so stay tuned.
private void ShuffleImages()
{
List<MultiScaleSubImage> randomList = Randomize();
for( int i = 0; i < randomList.Count; i++ )
{
MultiScaleSubImage currentImage = randomList[ i ];
Point currentPosition = currentImage.ViewportOrigin;
Point futurePosition = new Point( -1.14 * i, 0 );
//Creating the Animation
Storyboard moveStoryboard = new Storyboard();
PointAnimationUsingKeyFrames moveAnimation = new PointAnimationUsingKeyFrames();
SplinePointKeyFrame startKeyframe = new SplinePointKeyFrame();
startKeyframe.Value = currentPosition;
startKeyframe.KeyTime = KeyTime.FromTimeSpan( TimeSpan.Zero );
startKeyframe = new SplinePointKeyFrame();
startKeyframe.Value = futurePosition;
startKeyframe.KeyTime = KeyTime.FromTimeSpan( TimeSpan.FromSeconds( 1 ) );
KeySpline ks = new KeySpline();
ks.ControlPoint1 = new Point( 0, 1 );
ks.ControlPoint2 = new Point( 1, 1 );
startKeyframe.KeySpline = ks;
moveAnimation.KeyFrames.Add( startKeyframe );
Storyboard.SetTarget( moveAnimation, currentImage );
Storyboard.SetTargetProperty( moveAnimation, new PropertyPath( "ViewportOrigin" ) );
moveStoryboard.Children.Add( moveAnimation );
moveStoryboard.Begin();
}
}
private void ShuffleImages()
{
List<MultiScaleSubImage> randomList = Randomize();
for( int i = 0; i < randomList.Count; i++ )
{
MultiScaleSubImage currentImage = randomList[ i ];
Point currentPosition = currentImage.ViewportOrigin;
Point futurePosition = new Point( -1.14 * i, 0 );
//Creating the Animation
Storyboard moveStoryboard = new Storyboard();
PointAnimationUsingKeyFrames moveAnimation = new PointAnimationUsingKeyFrames();
SplinePointKeyFrame startKeyframe = new SplinePointKeyFrame();
startKeyframe.Value = currentPosition;
startKeyframe.KeyTime = KeyTime.FromTimeSpan( TimeSpan.Zero );
startKeyframe = new SplinePointKeyFrame();
startKeyframe.Value = futurePosition;
startKeyframe.KeyTime = KeyTime.FromTimeSpan( TimeSpan.FromSeconds( 1 ) );
KeySpline ks = new KeySpline();
ks.ControlPoint1 = new Point( 0, 1 );
ks.ControlPoint2 = new Point( 1, 1 );
startKeyframe.KeySpline = ks;
moveAnimation.KeyFrames.Add( startKeyframe );
Storyboard.SetTarget( moveAnimation, currentImage );
Storyboard.SetTargetProperty( moveAnimation, new PropertyPath( "ViewportOrigin" ) );
moveStoryboard.Children.Add( moveAnimation );
moveStoryboard.Begin();
}
}