Question

I’m working on a windows phone 7 project, with silverlight, and i’m trying to show 4 images in sequence to give the user the feeling of a short movie.
I have 4 urls pointing to 4 different jpeg images, and I’m using an Image control to show these jpeg in sequence.
The way I’m trying to achieve this is by doing:

private void RetrieveImages()
    {            
        image1.ImageOpened += new EventHandler<RoutedEventArgs>(image1_ImageOpened);
        frameNumber = 0;         
        gotoNextImage();
    }

    void image1_ImageOpened(object sender, RoutedEventArgs e)
    {
        System.Threading.Thread.Sleep(400);
        gotoNextImage();
    }

    private void gotoNextImage()
    {
        if (frameNumber < 4)
        {
            webBrowser1.Dispatcher.BeginInvoke(()=> {
            image1.Source = new System.Windows.Media.Imaging.BitmapImage(new Uri(cam.framesUrl[frameNumber]));
            frameNumber++;
            });
        }
        else
        {
             image1.ImageOpened -= image1_ImageOpened;
        }
    }

But this just don’t work as expected. I’m sure I’m missing something about how to interact with the UI.
Can anyone point me in the right direction?
Which is the best way to achieve this?

Edited:

I’ll explain better what’s wrong with my code… probably it’s unclear what happens.
I don’t get any error with my code, but I don’t see the “movie effect” too. It just show 1 single image, without iterating between the image collection.
I think it’s a threading problem… kind of I’m not doing the right thing in the right thread to see the UI updating as expected…

Answer 1

Ok, I figured it out, and I think I also find a nice solution 🙂 IMHO

I basically bound the Image.source to a proprerty of my class (that now extends INotifyPropertyChanged). But this gave me some issue about the transiction between images: since they were downloaded from internet there was a black images occurring between one images an the next one… but only the first time (i’m looping on a set of 4 images, looks like the video repeat), ’cause after that the images are cached.

So, what I’ve done is to cache the images the first time, without displaying the right Image control, but displaying instead another Image control (or whatever else) which says to the user “I’m loading”.
For handle this scenario I’ve created a custom event:

public delegate void FramesPrefetchedEventHanlder();
public event FramesPrefetchedEventHanlder FramesPrefetched;

Now let’s take a look at the RetrieveImages method:

private void RetrieveImages()
{
    frameNumber = 0;
    currentCycle = 0;
    // set e very short interval, used for prefetching frames images
    timer.Interval = new TimeSpan(0, 0, 0, 0, 10);
    timer.Tick += (sender, e) => gotoNextImage();
    // defines what is going to happen when the prefetching is done
    this.FramesPrefetched += () => 
    {
        // hide the "wait" image and show the "movie" one
        imageLoading.Opacity = 0;
        image1.Opacity = 1;
        // set the timer with a proper interval to render like a short movie
        timer.Interval = new TimeSpan(0, 0, 0, 0, 400);
    };

    // when a frame is loaded in the main Image control, the timer restart
    image1.ImageOpened += (s, e) =>
    {
        if (currentCycle <= cycles) timer.Start();
    };
    // start the loading (and showing) frames images process
    gotoNextImage();            

}

Ok, now what we need to handle is the step by step loading of the image and communicate when we finished the prefetching phase:

private void gotoNextImage()
{
    timer.Stop();
    if (frameNumber < 4)
    {
        CurrentFrame = new System.Windows.Media.Imaging.BitmapImage(new Uri(cam.framesUrl[frameNumber]));
        frameNumber++;
    }
    else
    {
        // repeat the frame's sequence for maxCycles times
        if (currentCycle < maxCycles)
        {
            frameNumber = 0;
            currentCycle++;
            // after the first cycle through the frames, raise the FramesPrefetched event
            if (currentCycle == 1)
            {
                FramesPrefetchedEventHanlder handler = FramesPrefetched;
                if (handler != null) handler();
            }
            // step over to next frame
            gotoNextImage();
        }
    }
}

This works pretty fine to me… but since I’m new to Silverlight and Windows Phone 7 developement, any suggestion for improvement is welcome.