How do I load images in the background?

Question

I am trying to load an image in the background and then update the UI. I have been playing with this all day and I don\'t know what I am missing. I keep getting the follow

Answer 1

You want to incorporate multiple threads in your WPF application. As stated in the article below, WPF forces you to do all UI work on the thread that created the UI.

Check this out: http://pjbelfield.wordpress.com/2007/10/29/worker-threads-and-the-dispatcher-in-wpf/

and for intensive UI work:

http://eprystupa.wordpress.com/2008/07/28/running-wpf-application-with-multiple-ui-threads/

Answer 2

Your code to load the image (.jpg) into memory should be done in the background. Code to load the image from memory into a WPF control must be done in the normal UI WPF thread. Only slow/long running tasks should be put into a background thread. Once the long task is complete, it must signal the UI thread to update the view with the result of the long task.

My favourite way is using the BackgroundWorker class:

var bg = new System.ComponentModel.BackgroundWorker();
bg.DoWork += Work_Function;
bg.RunWorkerCompleted += UI_Function;
bg.RunWorkerAsync();

void Work_Function(object sender, DoWorkEventArgs e) { ... }
void UI_Function(object sender, RunWorkerCompletedEventArgs e) { ... }

When you call RunWorkerAsync(), first your Work_Function() is called. When it is complete, the UI_Function() is called. The work function may place one variable in the DoWorkEventArgs.Result property, which is accessible from the RunWorkerCompletedEventArgs.Result property.

I think you might also be interested in this article: http://www.codeproject.com/KB/WPF/WPF_Explorer_Tree.aspx It shows how to set up Lazy Loading in a tree view in WPF. I think the basic concept (add a dummy node, intercept the display of the dummy node by loading the next image instead) will apply to your work.

Answer 3

One more thing we had in our project. Since ImageSource is placed into UI you have to check if it is frozen:

public void SetImage(ImageSource source)
{
   ImageSource src = null;
   if(!source.IsFrozen)
       src = source.GetAsFrozen();
   else
       src = source; 
   this.BackgroundImage.Source = src;
}

Answer 4

What I tend to use the ThreadPool.QueueUserWorkItem to load the image, then when the operation completes I call back to the UI thread using the thread-safe Dispatcher object. The image source is not thread safe, you will have to use something like the JpegBitmapDecoder, there is also a PngBitmapDecoder.

For Example:

public Window()
{
    InitializeComponent();

    ThreadPool.QueueUserWorkItem(LoadImage,
         "http://z.about.com/d/animatedtv/1/0/1/m/simp2006_HomerArmsCrossed_f.jpg");
}

public void LoadImage(object uri)
{
    var decoder = new JpegBitmapDecoder(new Uri(uri.ToString()), BitmapCreateOptions.PreservePixelFormat, BitmapCacheOption.OnLoad);
    decoder.Frames[0].Freeze();
    this.Dispatcher.Invoke(DispatcherPriority.Send, new Action<ImageSource>(SetImage), decoder.Frames[0]);
}

public void SetImage(ImageSource source)
{
    this.BackgroundImage.Source = source;
}

Answer 5

The error you are getting now is good news, it means that BackgroundWorker is working. You could try cloning it in the RunWorkerCompleted with brush.Clone();.

Try removing the Dispatcher.BeingInvoke part. The whole point of BackgroundWorker is that the event is marshaled back into the UI thread for you automatically so you don't have to worry.