Question

I’m new to do C# Windows Phone programming.

In a nutshell, I am currently building an app that will:

Load image A

Load image B

and then Load image C

then use these 3 images to do some post processing.

My Image B and Image C are build as Content within the project.
Image A is chosen from Gallery or taken via camera, or we can simply assume that Image A is load from Isolated Storage.

I am experiencing a problem which I believe caused by asynchronous image loading.

Here’s my code:

...
// I intend to load the 3 pictures by calling the method: LoadImage(int id) and LoadCImage();

            else if (ListBox.SelectedIndex == 0)
            {
                Debug.WriteLine("Selected 0");
                PhotoProcessor pp = new PhotoProcessor();
                WriteableBitmap imageA = new WriteableBitmap(AImage);
                WriteableBitmap imageB = LoadImage(0);
                WriteableBitmap imageC = LoadCImage();
                WriteableBitmap mix = pp.Mix(pp.CalcAverageColour(0), imageA, imageB, imageC);
                resultPic.Source = mix;
            }
...

And:

private WriteableBitmap LoadImage(int id)
        {
            //String uriString = "/Assets/img0.jpg";            
            //BitmapImage img = new BitmapImage(new Uri(uriString, UriKind.Relative));
            BitmapImage img = new BitmapImage();
            img.CreateOptions = BitmapCreateOptions.None;
            //img.SetSource(Application.GetResourceStream(new Uri("/Assets/facetemplate0.jpg", UriKind.Relative)).Stream);
            img.UriSource = new Uri("/Assets/img" + id + ".jpg", UriKind.Relative);

            //img.UriSource = new Uri(uriString, UriKind.Relative);
            return new WriteableBitmap(img);
        }

        private WriteableBitmap LoadCImage()
        {
            //BitmapImage img = new BitmapImage(new Uri("/Assets/imgC.jpg", UriKind.Relative));
            BitmapImage bmp = new BitmapImage();
            bmp.CreateOptions = BitmapCreateOptions.None;
            //img.SetSource(Application.GetResourceStream(new Uri("/Assets/imgC.jpg", UriKind.Relative)).Stream);
            bmp.UriSource = new Uri("/Assets/imgC.jpg", UriKind.Relative);
            return new WriteableBitmap(bmp);
        }

Now my question is:

When I’m trying to run this code, it will throw a Null Reference Exception, which is because of the function mix can’t load Image A B and C (loading this images are asynchronously).

I wonder if there’s a way to let me sequentially load these images then let me to pass them to the mix function?

What I’ve tried:

1. By checking this great blog post, I’m able to know that there do have some way to load the image synchronously, but as you can see throughout my code, I tried to use SetSource(stream) like the blogpost, but unfortunately I got the same Null Reference Exception.

2. I’ve also thought about the EventHandler method, however I don’t think its a good idea in this case. If I implement EventHandler, would it be something like(pseudo code):

   imageA_Opened()
   {
   LoadImageB += imageB_Opened();
   }
   
   imageB_Opened()
   {
    LoadImageC += imageC_Opened();
   }
   
   imageC_Opened()
   {
   PhotoProcessor pp = new PhotoProcessor();
   pp.Mix(averageColour, A, B, C);
   }
   

Am I right?

Answer 1

You’re not supposed to be able to download an image sequentially. It would certainly be easier to develop, yes, but it wouldn’t be nearly as effective because you would be blocking the processor for an extended period of time, thus freezing your application.

I’ve also thought about the EventHandler method, however I don’t think its a good idea in this case. If I implement EventHandler, would it be something like (pseudo code):

Yep, it would follow that general pattern as you have described it. That’s the appropriate way to address this problem.