Dr. Xu on .NET

In this post, I will discuss how to update UI elements from a background thread in WPF. In the previous three posts about multithreading, I provided solution for WinForm applications. These techniques can also be applied to the WPF Windows applications. The ReportProgress method in WinFowm is almost identical to that in the WPF, so I’ll not discuss it here.

In WinForm, we can use the delegate + Invoke method to update UI elements. In WPF, we have got something similar but more powerful – the Dispatcher. Note that every Visual in WPF inherits from DispatcherObject, which allows you to get a hold of the UI thread’s Dispitcher. Anytime you update a Visual, the work is sent through the Dispatcher to the UI thread.

In the following I present a WPF example. The layout in this example is similar to that used in Part 3. Here is the layout created using the following XAML

<Window x:Class="WpfBackgroundworkerTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="289" Width="305">
    <Grid>
        <TextBlock Height="23" HorizontalAlignment="Left"
                   Margin="28,32,0,0" Name="textBlock1"
                   Text="TextBlock" VerticalAlignment="Top" />
        <TextBox Height="23" HorizontalAlignment="Left"
                 Margin="28,61,0,0" Name="textBox1"
                 VerticalAlignment="Top" Width="227" />
        <TextBox Height="23" HorizontalAlignment="Left"
                 Margin="28,90,0,0" Name="textBox2"
                 VerticalAlignment="Top" Width="227" />
        <TextBlock Height="23" HorizontalAlignment="Left"
                   Margin="28,129,0,0" Name="textBlock2"
                   Text="TextBlock" VerticalAlignment="Top" />
        <Button Content="Start" Height="23"
                HorizontalAlignment="Left" Margin="180,169,0,0"
                Name="btnStart" VerticalAlignment="Top" Width="75"
                Click="btnStart_Click" />
        <Button Content="Cancel" Height="23"
                HorizontalAlignment="Left" Margin="180,198,0,0"
                Name="btnCancel" VerticalAlignment="Top" Width="75"
                Click="btnCancel_Click" />
    </Grid>
</Window>

And below shows code-behind file:

using System;
using System.Windows;
using System.Windows.Shapes;
using System.ComponentModel;
using System.Threading;

namespace WpfBackgroundworkerTest
{
    public partial class MainWindow : Window
    {
        private delegate void UpdateDelegate(object[] x);
        private BackgroundWorker worker1;

        public MainWindow()
        {
            InitializeComponent();
            worker1 = new BackgroundWorker();
            worker1.WorkerReportsProgress = true;
            worker1.WorkerSupportsCancellation = true;
            worker1.DoWork += new DoWorkEventHandler(worker1_DoWork);
                       worker1.RunWorkerCompleted += new RunWorkerCompletedEventHandler(
                worker1_RunWorkerCompleted);
        }

        void worker1_RunWorkerCompleted(object sender, RunWorkerCompletedEventArgs e)
        {
            if (!(e.Cancelled))
              textBlock2.Text = "Calculation Completed!";
            else
              textBlock2.Text = "Calculation Cancelled!";

            btnStart.IsEnabled = true;
            btnCancel.IsEnabled = false;

        }
        void worker1_DoWork(object sender, DoWorkEventArgs e)
        {
            for (int i = 0; i < 500; i++)
            {
                Thread.Sleep(100);
                if (worker1.CancellationPending)
                {
                    e.Cancel = true;
                    return;
                }

                object[] x = new object[] { i, Math.Sin(1.0 * i / 10.0),
                       Math.Cos(1.0 * i / 10.0) };

                UpdateDelegate update = new UpdateDelegate(UpdateUIElements);
                this.Dispatcher.BeginInvoke(update, new object[] { x });
            }
        }

         private void btnStart_Click(object sender, RoutedEventArgs e)
        {
            textBlock2.Text = "Calculation Start!";
            worker1.RunWorkerAsync();
            btnStart.IsEnabled = false;
            btnCancel.IsEnabled = true;
        }

        private void btnCancel_Click(object sender, RoutedEventArgs e)
        {
            worker1.CancelAsync();
        }

        private void UpdateUIElements(object[] x)
        {
            textBlock1.Text = " i = " + x[0].ToString();
            textBox1.Text = "Sin =  " + x[1].ToString();
            textBox2.Text = "Cos =  " + x[2].ToString();
        }
    }
}

There are two things I want to point out here. First, the BackgroundWorker is not a WPF component, so you won’t see it in the toobox, which means you cannot create a backgroundworker object visually in the Designer. You have to create it in the code-behind file. The other point is that you need to replace the Invoke method in WinForm by the Dispatcher.BeginInvoke.

Running this project produces the similar results as in Part 3.

In my previous post, Part 2 , I demonstrated how to update a single UI element from a background thread. In this post, I’ll show you the way to update multiple UI elements from a background thread. We first use the delegate + Invoke method. The layout is still the same as the form1 in Part 1 . Here I first list the code:

using System;
using System.ComponentModel;
using System.Windows.Forms;
using System.Threading;

namespace BkgroundWorkerTest01
{
    private delegate void UpdateDelegate(object[] x);

    public partial class Form1 : Form
    {
         public Form1()
        {
            InitializeComponent();
            backgroundWorker1.WorkerSupportsCancellation = true;
                 backgroundWorker1.DoWork += new DoWorkEventHandler(
                           backgroundWorker1_DoWork);
            backgroundWorker1.RunWorkerCompleted +=
                new RunWorkerCompletedEventHandler(
                           backgroundWorker1_RunWorkerCompleted);
        }
        void backgroundWorker1_RunWorkerCompleted(object sender,
                 RunWorkerCompletedEventArgs e)
        {
            if (!(e.Cancelled))
                label2.Text = "Calculation Completed!";
            else
                label2.Text = "Calculation Cancelled!";
        }

        void backgroundWorker1_DoWork(object sender, DoWorkEventArgs e)
        {
            for (int i = 0; i < 500; i++)
            {
                Thread.Sleep(100);
                if (backgroundWorker1.CancellationPending)
                {
                    e.Cancel = true;
                    return;
                }

                object[] x = new object[] { i, Math.Sin(1.0 * i / 10.0),
                            Math.Cos(1.0 * i /10.0) };
                UpdateDelegate update = new UpdateDelegate(UpdateUIElements);
                textBox1.Invoke(update, new object[] { x });
            }
        }

        private void UpdateUIElements(object[] x)
        {
            label1.Text = " i = " + x[0].ToString();
            textBox1.Text = "Sin =  " + x[1].ToString();
            textBox2.Text = "Cos =  " + x[2].ToString();
        }

        private void btnCancel_Click(object sender, EventArgs e)
        {
            backgroundWorker1.CancelAsync();
        }

        private void btnStart_Click(object sender, EventArgs e)
        {
            backgroundWorker1.RunWorkerAsync();
        }
    }
}

You can see from the above code that the first change you need to make is the delegate function where the input variable becomes the object array. You can report progress for any number of parameters with any data type by using this object array, and then update any number of UI elements using these parameters inside the UpdateUIElements method.

Running this project by pressing F5 produces the results shown in the following figure:

In the following, we will use the ReportProgress method to update the multiple UI elements. Her is the code list:

using System;
using System.ComponentModel;
using System.Windows.Forms;
using System.Threading;

namespace BkgroundWorkerTest01
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
            backgroundWorker1.WorkerSupportsCancellation = true;
            backgroundWorker1.WorkerReportsProgress = true;
            backgroundWorker1.DoWork += new DoWorkEventHandler(
                  backgroundWorker1_DoWork);
            backgroundWorker1.RunWorkerCompleted +=
                new RunWorkerCompletedEventHandler(
                backgroundWorker1_RunWorkerCompleted);
            backgroundWorker1.ProgressChanged +=
                new ProgressChangedEventHandler(
                backgroundWorker1_ProgressChanged);
        }

        void backgroundWorker1_ProgressChanged(object sender,
               ProgressChangedEventArgs e)
        {
               UpdateUIElements((object[])e.UserState);
        }

        void backgroundWorker1_RunWorkerCompleted(object sender,
               RunWorkerCompletedEventArgs e)
        {
            if (!(e.Cancelled))
                label2.Text = "Calculation Completed!";
            else
                label2.Text = "Calculation Cancelled!";
        }

        void backgroundWorker1_DoWork(object sender, DoWorkEventArgs e)
        {
            for (int i = 0; i < 500; i++)
            {
                Thread.Sleep(100);
                if (backgroundWorker1.CancellationPending)
                {
                    e.Cancel = true;
                    return;
                }

                object[] x = new object[] { i, Math.Sin(1.0 * i / 10.0),
                       Math.Cos(1.0 * i / 10.0) };

                backgroundWorker1.ReportProgress(0, x);
            }
        }

        private void UpdateUIElements(object[] x)
        {
            label1.Text = " i = " + x[0].ToString();
            textBox1.Text = "Sin =  " + x[1].ToString();
            textBox2.Text = "Cos =  " + x[2].ToString();
        }

        private void btnCancel_Click(object sender, EventArgs e)
        {
            backgroundWorker1.CancelAsync();
        }

        private void btnStart_Click(object sender, EventArgs e)
        {
            backgroundWorker1.RunWorkerAsync();
        }
    }
}

Running this application, you will get the same results as shown in the above delegate + Involke method.

In the previous post, I showed you the possible issue associated with updating UI Elements from the background thread. In this post, I will show you two easy ways to fix the problem.

The first method is to use the delegate function and the UI elements’ Invoke method. In C#, a delegate is very similar to a function pointer in C and C++, and it encapsulates a reference to a method inside a delegate object. This delegate object can be passed to code that calls the reference method. Unlike function pointer in C or C++, a delegate is object-oriented, type-safe, and more secure.

There are several types of the Invoke methods in .NET. I list them here for your reference:

Delegate.Invoke is used to execute a delagate on the current thread.

Delegate.BeginInvoke is used to execute a delegate on a separate thread. This means you can start an operation which won’t block your current thread and it will be executed on its own thread.

Control.Invoke is used to executed a delegate on the UI thread of that element. If you have a delegate which updates the user interface, you can call this method from the other thread to execute the update operation on the UI thread.

Control.BeginInvoke is similar to the above method, but it does in an asynchronous way. This means while Control.Invoke waits until the UI thread has finished executing the delegate, Control.BinginInvoke returns immediately.

Here I’ll show you how to use the delegate and UI elements’ Invoke method to fix the problem in my previous post. Start with a new Winform project and use the same layout of the form1 as in Part 1. The code is almost identical to Part 1, except for adding a delegate function, a updating UI element method, and a UI element’s Invoke method, as shown in red in the following code list:

using System;
using System.ComponentModel;
using System.Windows.Forms;
using System.Threading;

namespace BkgroundWorkerTest01
{
    public partial class Form1 : Form
    {
        private delegate void UpdateDelegate(double x);
        public Form1()
        {
            InitializeComponent();
            backgroundWorker1.WorkerSupportsCancellation = true;
            backgroundWorker1.DoWork += new DoWorkEventHandler(
                    backgroundWorker1_DoWork);
            backgroundWorker1.RunWorkerCompleted +=
                new RunWorkerCompletedEventHandler(
                backgroundWorker1_RunWorkerCompleted);
         }

        void backgroundWorker1_RunWorkerCompleted(object sender,
                RunWorkerCompletedEventArgs e)
        {
            if (!(e.Cancelled))
                label2.Text = "Calculation Completed!";
            else
                label2.Text = "Calculation Cancelled!";
        }

        void backgroundWorker1_DoWork(object sender, DoWorkEventArgs e)
        {
            for (int i = 0; i < 500; i++)
            {
                Thread.Sleep(100);
                if (backgroundWorker1.CancellationPending)
                {
                    e.Cancel = true;
                    return;
                }

                Double x = Math.Sin(1.0 * i / 10.0);
                UpdateDelegate update = new UpdateDelegate(UpdateUIElement);
                textBox1.Invoke(update, new object[] { x });
                //textBox1.Text = x.ToString();

            }
        }

        private void btnCancel_Click(object sender, EventArgs e)
        {
            backgroundWorker1.CancelAsync();
        }

        private void btnStart_Click(object sender, EventArgs e)
        {
            backgroundWorker1.RunWorkerAsync();
        }

        private void UpdateUIElement(double x)
        {
            textBox1.Text = x.ToString();
        }
    }
}

Now, running the program by pressing F5 and clicking on the “Start” button, you will find the textbox1 is updating the calculation results from the background thread.

In the following, I’ll discuss another method for updating UL elements from the background thread. The BackgroundWorker has a special method called ReportProgress. If you need the background computations to report on its progress, you can call this method to raise the ProgressChanged event. Remember that in order to use this method, you must set the WorkerReportsProgress property value to true, otherwise ReportProgress will throw an InvalidOperationException.

Using the same form1 layout. The following code shows you how to update UI elements using the ReportProgress method:

using System;
using System.ComponentModel;
using System.Windows.Forms;
using System.Threading;

namespace BkgroundWorkerTest01
{
    public partial class Form1 : Form
    {
      //private delegate void UpdateDelegate(double x); 

        public Form1()
        {
            InitializeComponent();
            backgroundWorker1.WorkerSupportsCancellation = true;
            backgroundWorker1.DoWork += new DoWorkEventHandler(
                 backgroundWorker1_DoWork);
            backgroundWorker1.RunWorkerCompleted +=
                new RunWorkerCompletedEventHandler(
                backgroundWorker1_RunWorkerCompleted);
           backgroundWorker1.WorkerReportsProgress = true;
            backgroundWorker1.ProgressChanged +=
                new ProgressChangedEventHandler(
                backgroundWorker1_ProgressChanged);
        }

        void backgroundWorker1_ProgressChanged(object sender,
                          ProgressChangedEventArgs e)
        {
          UpdateUIElement(Convert.ToDouble(e.UserState));
        }

        void backgroundWorker1_RunWorkerCompleted(object sender,
               RunWorkerCompletedEventArgs e)
        {
            if (!(e.Cancelled))
                label2.Text = "Calculation Completed!";
            else
                label2.Text = "Calculation Cancelled!";
        }

        void backgroundWorker1_DoWork(object sender, DoWorkEventArgs e)
        {
            for (int i = 0; i < 500; i++)
            {
                Thread.Sleep(100);
                if (backgroundWorker1.CancellationPending)
                {
                    e.Cancel = true;
                    return;
                }

                Double x = Math.Sin(1.0 * i / 10.0);
                backgroundWorker1.ReportProgress(0, x);
                //UpdateDelegate update = new UpdateDelegate(UpdateUIElement);
                //textBox1.Invoke(update, new object[] { x });

                //textBox1.Text = x.ToString();

            }
        }

        private void btnCancel_Click(object sender, EventArgs e)
        {
            backgroundWorker1.CancelAsync();
        }

        private void btnStart_Click(object sender, EventArgs e)
        {
            backgroundWorker1.RunWorkerAsync();
        }

        private void UpdateUIElement(double x)
        {
            textBox1.Text = x.ToString();
        }
    }
} 

The red part in the above code shows the difference between the Invoke and ReportProgress methods. Now, running this program again, you will see the textBox1 is updating the results from the background thread. Here we use the UserState to report the progress.

You may notice that both the above examples only update a single UI element, textBox1, from the background thread. I also got several emails asking how to update multiple UI elements from a background thread. This will be the topic of my next post.

I got many emails from some new C# developers who asked me the same question – how to update the UI Elements from the backgroundworker. Well, I made the same mistake as you did before. Let’s start with an example using C# and Winform. The form layout is very simple, and it contains two Labels, a TextBox, and two Buttons, as shown below:

In addition, I also added a BackgroundWorker to the Form at design-time using the Visual Studio Designer. Here is the code implemented by a .NET beginner:

using System;
using System.ComponentModel;
using System.Windows.Forms;
using System.Threading;

namespace BkgroundWorkerTest01
{
    public partial class Form1 : Form
    {
        public Form1()
        {
             InitializeComponent();
             backgroundWorker1.WorkerSupportsCancellation = true;
             backgroundWorker1.DoWork += new DoWorkEventHandler(
                 backgroundWorker1_DoWork);
             backgroundWorker1.RunWorkerCompleted +=
                 new RunWorkerCompletedEventHandler(
                        backgroundWorker1_RunWorkerCompleted);
        }

        void backgroundWorker1_RunWorkerCompleted(object sender,
             RunWorkerCompletedEventArgs e)
        {
            if (!(e.Cancelled))
                label2.Text = "Calculation Completed!";
            else
                label2.Text = "Calculation Cancelled!";
        }

        void backgroundWorker1_DoWork(object sender, DoWorkEventArgs e)
        {
            for (int i = 0; i < 100; i++)
            {
                Thread.Sleep(100);
                 if (backgroundWorker1.CancellationPending)
                 {
                     e.Cancel = true;
                     return;
                 }
                 Double x = Math.Sin(1.0 * i / 10.0);
                 textBox1.Text = x.ToString();
            }
        }

        private void btnCancel_Click(object sender, EventArgs e)
        {
             backgroundWorker1.CancelAsync();
        }

        private void btnStart_Click(object sender, EventArgs e)
        {
            backgroundWorker1.RunWorkerAsync();
        }
    }
}

When running the program by pressing F5 and clicking on the “Start” button, you will get the following error:

“Cross-thread operation not valid: Control ‘textBox1′ accessed from a thread other than the thread it was created on.”

The reason for this error message is that controls in .NET are not thread safe. (Console application is an exception, which is thread safe. This is why you can report the background thread progress directly using the Console.WriteLine method). That means you cannot access a control from a thread other than the one where it lives, and the UI elements can be only updated in the UI thread rather than the BackgroundWorker. In Winform, there are two easy ways to fix the problem. I will report the solutions in next post!