How can I display multiple images in a loop in a WP7 app?

In my (Silverlight) weather app I am downloading up to 6 seperate weather radar images (each one taken about 20 mins apart) from a web site and what I need to do is display each image for a second then at the end of the loop, pause 2 seconds then start the loop again. (This means the loop of images will play until the user clicks the back or home button which is what I want.)

So, I have a RadarImage class as follows, and each image is getting downloaded (via WebClient) and then loaded into a instance of RadarImage which is then added to a collection (ie: List<RadarImage>)...

//Following code is in my radar.xaml.cs to download the images....
int  imagesToDownload = 6;
int imagesDownloaded = 0;
RadarImage rdr    = new RadarImage(<image url>);    //this happens in a loop of image URLs
rdr.FileCompleteEvent += ImageDownloadedEventHandler;

//This code in a class library.
public class RadarImage
{
    public int ImageIndex;
    public string ImageURL;
    public DateTime ImageTime;
    public Boolean Downloaded;
    public BitmapImage Bitmap;

    private WebClient client;

    public delegate void FileCompleteHandler(object sender);
    public event FileCompleteHandler FileCompleteEvent; 

    public RadarImage(int index, string imageURL)
    {
        this.ImageIndex = index;
        this.ImageURL = imageURL;

        //...other code here to load in datetime properties etc...

        client = new WebClient();
        client.OpenReadCompleted += new OpenReadCompletedEventHandler(wc_OpenReadCompleted);
        client.OpenReadAsync(new Uri(this.ImageURL, UriKind.Absolute));
    }

    private void wc_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)
    {
        if (e.Error == null)
        {
            StreamResourceInfo sri = new StreamResourceInfo(e.Result as Stream, null);
            this.Bitmap = new BitmapImage();
            this.Bitmap.SetSource(sri.Stream);
            this.Downloaded = true;
            FileCompleteEvent(this);         //Fire the event to let the app page know to add it to it's List<RadarImage> collection
        }
    }
}

As you can see, in the class above I have exposed an event handler to let my app page know when each image has downloaded. When they have all downloaded I then run the following code in my xaml page - but only the last image ever shows up and I can't work out why!

    private void ImageD开发者_开发百科ownloadedEventHandler(object sender)
    {
        imagesDownloaded++;
        if (imagesDownloaded == imagesToDownload)
        {
            AllImagesDownloaded = true;

            DisplayRadarImages();
        }
    }

    private void DisplayRadarImages()
    {
        TimerSingleton.Timer.Stop();

        foreach (RadarImage img in radarImages)
        {
            imgRadar.Source = img.Bitmap;
            Thread.Sleep(1000);
        }

        TimerSingleton.Timer.Start();   //Tick poroperty is set to 2000 milliseconds
    }

    private void SingleTimer_Tick(object sender, EventArgs e)
    {
        DisplayRadarImages();
    }

So you can see that I have a static instance of a timer class which is stopped (if running), then the loop should show each image for a second. When all 6 have been displayed then it pauses, the timer starts and after two seconds DisplayRadarImages() gets called again.

But as I said before, I can only ever get the last image to show for some reason and I can't seem to get this working properly.

I'm fairly new to WP7 development (though not to .Net) so just wondering how best to do this - I was thinking of trying this with a web browser control but surely there must be a more elegant way to loop through a bunch of images!

Sorry this is so long but any help or suggestions would be really appreciated.

Mike

You can use a background thread with either a Timer or Sleep to periodically update your image control.

Phạm Tiểu Giao - Threads in WP7

You'll need to dispatch updates to the UI with

Dispatcher.BeginInvoke( () => { /*  your UI code */ } );

Why don't you add the last image twice to radarImages, set the Timer to 1000 and display just one image on each tick?