Silverlight Flipping Tiles Animation

joel — Fri, 16 May 2008 06:36:30 +0000

Back a few weeks ago I posted an example of how to create a 3D flip animation similar to the effect seen on an iPhone. Today I will build upon that procedural animation and simulate the flipping tile affect seen in the iTunes album art screen saver, available on a Mac.

In my example I have a total of 16 random tiles displayed from a collection of 42 different images. Any image not currently displayed is available to be randomly selected to replace an existing tile. Here is how I achieve the effect.

The project is comprised of a “Tile” UserControl , a class called “Media” and two generic lists (one to store references to the 16 tiles and one to store all 42 URI to the images). The first step is to fill my page.xaml grid with 16 tiles. Here is a snip of the code used to fill the grid.

private void BuildCollection()
{
    int row = -1;
    int col = 0;
    for (int i = 0; i < 42; i++)
    {
        Uri imageUri = new Uri(string.Format("Images/{0}.png", 
		(i+1).ToString()), UriKind.Relative);
        if (i <= 16)
        {
            Tile tile = new Tile();
            Media media =  new Media(imageUri, true);
            tile.Media = media;
 
            if (col % 4 == 0)
            {
                row++;
                col = 0;
            }
            tile.SetValue(Grid.ColumnProperty, col.ToString());
            tile.SetValue(Grid.RowProperty, row.ToString());
            this.LayoutRoot.Children.Add(tile);
 
            col++;
            _tiles.Add(tile);
            _images.Add(media);
 
        }
        else
            _images.Add(new Media(imageUri, false));
    }
}

For those of you just getting familiar with the “Grid” control you might not be aware that it supports implicitly specifying columns and rows. In this example I leverage this to ensure my tiles form a nice 4×4 grid.

As you can see from the code, I have chosen to store only the URI to the image and not store the image itself. I had some difficulty storing a “BitmapImage” object in my collection and retrieving it consistently when I was ready to flip a tile. The URI seems less efficient, was reliable.

Now that I have built up my grid and two collections, I can use a DispacherTimer to randomly select a tile and randomly select an image to be used as the backside of the flip. He is how that code looks.

void _timer_Tick(object sender, EventArgs e)
{
    System.Random RandNum = new System.Random();
    int randomTile = RandNum.Next(16);
 
    bool match = false;
    while(!match)
    {
        int randomImage = RandNum.Next(42);
        if(!_images[randomImage].Displayed)
        {
            _images[randomImage].Displayed = true;
            _tiles[randomTile].Media.Displayed = false;
            _tiles[randomTile].Flip(_images[randomImage]);
            match=true;
            break;
        }
    }
}

As you can see I am using a boolean property in the “Media” object to determine if an image is already displayed. The second level of randomization is there to help ensures that I am giving each image equal chance of getting displayed.

If one were to examine the “Tile” UserControl, it looks almost exactly like the code I created for the 3D flip animation example. In this situation instead of firing the flip based on a button click, I use the followings public method called from my main page.xaml DispatcherTimer tick.

public void Flip(Media media)
{
    this.Media = media;
 
    if (_Front)
    {
        this.ImageBack.Source = new BitmapImage(_Media.ImageUri);
        _sb.Pause();
        _sb.AutoReverse = false;
        _sb.Begin();
        _Front = false;
    }
    else
    {
        this.ImageFront.Source = new BitmapImage(_Media.ImageUri);
        _sb.Pause();
        _sb.AutoReverse = true;
        _sb.Seek(_tsLastFrame);
        _sb.Resume();
 
        _Front = true;
    }
}

Code: LeopardSreenSaver.zip

Silverlight | WPF | Microsoft.Net » Tiles

Silverlight Flipping Tiles Animation