Silverlight | WPF | Microsoft.Net » DispatcherTimer

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 Circular Collision Animation

joel — Wed, 14 May 2008 19:34:55 +0000

Building on the sample I created on Circular Motion, in this example I add a concept of collision. In physics, deflection is the event that occurs where an object collides and bounces off of another surface. In my example, two spheres collide at a given X/Y causing each ball to reverse direction and maintains its current speed and angle.

Just as in my previous example I use a single DispatcherTimer and a generic collection of UserConrols. To keep track of the direction that each ball is traveling I added a boolean property to my “Ball” user control to determine if it was rotating clockwise.

void _timer_Tick(object sender, EventArgs e)
{
    foreach (Ball ball in _balls)
    {
        double x = 0.0;
        double y = 0.0;
        double angle = ball.Rotate.Angle;
 
        CalculatePosition(ball.Clockwise, ref x, ref y, ref angle, 1);
        //update the position of the ball
        ball.Rotate.Angle = angle;
        ball.Translate.X = x;
        ball.Translate.Y = y;
 
        //check to see if a collision has occured
        if (ball.CollisionType == Ball.CollisionTypes.Deflect)
        {
            foreach (Ball ball2 in _balls)
            {
                if (!ball.Equals(ball2))
                {
                    double b2X = 0.0;
                    double b2Y = 0.0;
                    double b2A = ball2.Rotate.Angle;
                    //if we wait until the two balls are at the same X/Y then the balls
                    //will have overlapped.  Instead, predict by looking 5 degrees ahead 
                    //then switching direction.
                    CalculatePosition(ball2.Clockwise, ref b2X, ref b2Y, ref b2A, 5);
                    if (Math.Ceiling(x).Equals(Math.Ceiling(b2X))
                        && Math.Ceiling(y).Equals(Math.Ceiling(b2Y)))
                    {
                        ball.Clockwise = !ball.Clockwise;
                        ball2.Clockwise = !ball2.Clockwise;
                        //ball.sound.Position = TimeSpan.FromMilliseconds(0);
                        //ball.sound.Play();
                        break;
                    }
                }
            }
        }
    }
}

As you can see in the code above, I am doing a quick check to see if my rotating ball is defined to deflect upon collision. In this example, this is the only type of collision supported. In the future, I might add things like exploding on impact or magnetism upon the collision.

The first step in the circular rotation is to move each ball to its new X/Y position. Once moved, I check to see if any other balls overlap its current X/Y location. To make the collision more realistic (no overlap), I predict where each additional ball will exist 5 degrees forward of its current angle. This allows me to simulate the ball just touching each other before reversing directions.

Code: CircularCollision.zip

Silverlight Circular Motion Animation

joel — Tue, 13 May 2008 06:36:56 +0000

In this sample I demonstrate how to take a series of UserControls (Simple ellipses) and rotate each in a counter-clockwise circular motion.

The first step in the process is to define a user control and expose both the TranslateTransform and RotateTransform from the TransformGroup object. This allows us to rotate and move each user control on a specified tick (DispatcherTimer tick). The timer is controlled by the main page.xaml.

In this example, I start with a single “ball”, begin rotating it, and every second add an additional ball to the animation. Instead of having each user control have its own animation, I have chosen to use a single DispatcherTimer that iterates over a generic collection of UserControls, to generate the circular motion

void Page_Loaded(object sender, RoutedEventArgs e)
{
    _centerX = this.Width/2;
    _centerY = this.Height / 2;
    _timerAnimation.Interval = TimeSpan.FromMilliseconds(20);
    _timerAnimation.Tick += new EventHandler(_timer_Tick);
 
    _timerInserter.Interval = TimeSpan.FromSeconds(1);
    _timerInserter.Tick += new EventHandler(_timer2_Tick);
 
    PlaceBall("Bo");
 
    _timerAnimation.Start();
    _timerInserter.Start();
}

In this handler I determine the center of my circle, place the first control, and define two DispatcherTimers, one for the animation, and one for inserting additional controls into the main Grid. Since the speed of rotation is consistent for each “ball”, I am able to use a single timer which iterates over a generic collection of UserControls. Each time the Animation timer fires, I will call the following method.

void _timer_Tick(object sender, EventArgs e)
{
    foreach(KeyValuePair ball in _balls)
    {
        ball.Value.Rotate.Angle -= 5;
        ball.Value.Rotate.Angle %= 360;
        // Transform angle degrees to radian value
        double radians = ((ball.Value.Rotate.Angle / 180) * Math.PI);
        ball.Value.Translate.X = _centerX + Math.Cos(radians) * _radius;
        ball.Value.Translate.Y = _centerY + Math.Sin(radians) * _radius;
    }
}

The math in this method is pretty basic, on each tick I rotate the ball between 1 and 360 degrees. The angle I am looking for is the remainder of the angle of my rotation from 360 degrees. To calculate this, I apply the modulus assignment operator to my new angle. To determine the appropriate X and Y position I transform my angle into Radians and apply a bit of trigonometry to calculate X/Y based on the sin and cosine of the radian. Thanks again to Paul Ortchanian flash site, reflektions for a Flash sample I could translate into Silverlight.

Code: CircularMotion.zip

Silverlight how to: RSS feed stored as JSON in Isolated Storage

joel — Fri, 28 Mar 2008 22:07:51 +0000

This week I was reading two of my favorite Microsoft Evangelist blogs; Kirk Allen Evans’ and Tim Heuer and was inspired to build upon two of their posts. Kirk wrote a great entry on Creating a JSON Service with WebGet and WCF 3.5 and Tim on
Calling web services with Silverlight 2. I thought it would be interesting to take the concepts covered in both of these posts and put them together into my own how to. In my sample I read an RSS feed into a JSON string, stores it in Isolated storage, and displays it in a ListBox. Once displayed, I will check every 30 seconds to see if the RSS feed has changed. Out-of-the-box my solution is not practical, but illustrates a flexible technique for caching a serialized collection of data in the event the service is unavailable.

In the first part of my sample I check to see if I have a cache of RSS in Isolated Storage. If so, I use the “DataContractJsonSerializer” class to de-serialize the JSON array. Once de-serialized, I can bind it to my ListBox control in “Page.xaml”

void Page_Loaded(object sender, RoutedEventArgs e)
{
    RssService.RssItem[] items;
    if (_isf.FileExists("blog.json"))
    {
        //Read from IsolatedStorage the last set of blog entires
        using (IsolatedStorageFileStream isfs = 
         new IsolatedStorageFileStream("blog.json", System.IO.FileMode.Open, _isf))
        {
            //Deserialize the JSON array that was stored in Isolated storage.
            DataContractJsonSerializer djson = 
             new DataContractJsonSerializer(typeof(RssService.RssItem[]));
 
            items = djson.ReadObject(isfs) as RssService.RssItem[];
 
            isfs.Position = 0;
            using (StreamReader sr = new StreamReader(isfs))
            {
                this.txtBlock.Text = sr.ReadToEnd();
            }
            isfs.Close();
        }
        listBox.ItemsSource = items;
    }
 
    . . . . . . 
}

After we update our presentation of RSS, I will insert a animating UserControl to be use when we go to retrieve additional RSS items. This retrieval from our WCF 3.5 service will be executed every 10 seconds when our “DispatcherTimer” fires.

    //insert a UserControl that animates a spinner when we are retrieving 
    //an update of RSS data
    _indicator.HorizontalAlignment = HorizontalAlignment.Center;
    _indicator.VerticalAlignment = VerticalAlignment.Center;
    this.LayoutRoot.Children.Add(_indicator);
    _indicator.Visibility = Visibility.Collapsed;
 
    //we will use a timer here to simulate a 5 second delay in grabbing 
    //the next rss update
    _dt.Interval = new TimeSpan(0, 0, 10);
    _dt.Tick += new EventHandler(_dt_Tick);
    _dt.Start();

Upon successful retrieval from our WCF service, we will update our isolated storage by serializing our array of RssItems[] into JSON, and writing that text to a file.

void wcf_GetFeedsCompleted(object sender, 
    IsolatedStorage.RssService.GetFeedsCompletedEventArgs e)
{
    try
    {
        RssService.RssItem[] items = e.Result as RssService.RssItem[];
        //if we were able to grab a new set of Rss items then update Isolated storage
        if (items.Length > 0)
        {
            if (_isf.FileExists("blog.json"))
            {
                _isf.DeleteFile("blog.json");
            }
            using (IsolatedStorageFileStream isfs = 
             new IsolatedStorageFileStream("blog.json", System.IO.FileMode.Create, _isf))
            {
                //Take the array of RssItem[] objects and convert it to a JSON array.
                DataContractJsonSerializer djson = new DataContractJsonSerializer(items.GetType());
                MemoryStream ms = new MemoryStream();
                djson.WriteObject(ms, items);
 
                this.txtBlock.Text = System.Text.Encoding.UTF8.GetString
                   (ms.GetBuffer(), 0, Convert.ToInt16(ms.Length));
 
                isfs.Write(ms.GetBuffer(), 0, Convert.ToInt16(ms.Length));
                isfs.Close();
            }
            listBox.ItemsSource = items;
        }
        this.listBox.Opacity = 1;
        _indicator.Animation.Stop();
        _indicator.Visibility = Visibility.Collapsed;
    }
    catch (Exception ex)
    {
        this.txtBlock.Text = ex.Message;
    }
}

Thanks again to Tim and Kirk for the majority of my example.

Code: IsolatedStorage.zip