UI Updates – Part 1 | Versatile Digital DNA

Updating the UI is a problem and it is tricky. There are very few simple rules to follow. Let’s see Here we’ll see some smart ways to perform UI updates on Console applications, Windows Forms, WPF, ASP.NET, Silverlight, Windows Phone and Windows Store apps.

Console Applications

Do they have UI ? No. But we’ll check how different threads perform updates on Console applications. Look at the following code. It has a main thread and another thread (worker thread) perform some time consuming task and updates the UI. Main thread shows a rotating bar till the worker thread completes.

class Program
    {
        static void Main(string[] args)
        {
            Console.WriteLine("Application Start");
            Thread worker = new Thread(PerformTask);
  
            worker.Start();
  
            ShowConsoleWaitAnimation(worker);
  
            Console.WriteLine("Application End");
            Console.ReadKey();
  
        }
  
  
        private static void PerformTask()
        {
            // job time 4 - 10 seconds
            int time = new Random().Next(4,11);
            Thread.Sleep(1000 * time);
            Console.WriteLine("Hello from worker - ran for {0} seconds",time);
        }
  
  
        private static void ShowConsoleWaitAnimation(Thread thread)
        {
            while (thread.IsAlive)
            {
                Console.Write("Processing - /\r");
                Thread.Sleep(100);
                Console.Write("Processing - -\r");
                Thread.Sleep(100);
                Console.Write("Processing - \\\r");
                Thread.Sleep(100);
                Console.Write("Processing - |\r");
                Thread.Sleep(100);
            }
        }
    }

Windows Forms

Look at the below code. In a simple Windows Forms application, for a button click event, a time consuming task runs in a separate thread and tries to update a Label control.

private void BtnStartWork_Click(object sender, EventArgs e)
{
    Thread worker = new Thread(PerformTask);
    worker.Start();
}
  
private void PerformTask()
{
    // job time 4 - 10 seconds
    int time = new Random().Next(4, 11);
    Thread.Sleep(1000 * time);
    LblStatus.Text = String.Format("Work completed - ran for {0} seconds", time);
} 

When you run the above code, you will get this famous Exception. Because the Label control is created in UI thread and our worker thread tries to reach it. Cross thread referencing cannot happen as this is a violation of operating system thread handling policies. ( Do not mistake the cross thread communication and cross thread referencing, cross thread communication can happen among threads)

There are plenty of solutions for this problem, but the ready made one is to use BackgroundWorker class. The below code shows how you can use BackgroundWorker class and perform UI updates and also shows a progress bar on the UI. Events are coded inline to reduce the number of methods for this small demo.

public partial class Form1 : Form
{       
       private BackgroundWorker _bgWorker = new BackgroundWorker();
       private string _result = String.Empty;
  
       public Form1()
       {
           InitializeComponent();
       }
  
       private void BtnStartWork_Click(object sender, EventArgs e)
       {
           _bgWorker.WorkerReportsProgress = true;
  
           _bgWorker.DoWork += (s, ev) =>
               {
                   _result = PerformTask();
               };
           
           _bgWorker.ProgressChanged += (s, ev) =>
               {
                   workerProgressBar.Value = ev.ProgressPercentage * 100;
               };
  
           _bgWorker.RunWorkerCompleted += (s, ev) =>
               {
                   LblStatus.Text = _result;
               };
  
           _bgWorker.RunWorkerAsync();
       }
  
  
       private string PerformTask()
       {
           // job time 4 - 10 seconds
           int time = new Random().Next(4, 11);
           int fullTime = time;
  
           while (time >= 0)
           {
               Thread.Sleep(1000);
               _bgWorker.ReportProgress(1 - (time / fullTime));
               time--;
           }
  
           return String.Format("Work completed - ran for {0} seconds", fullTime);
        }
          
} 

WPF

In WPF we can use the BackgroundWorker, but also there’s a well refined solution in the WPF is to use the Dispatcher object. WPF model has Dispatcher object common across all the controls. So we can use this to update the UI.

Little modification in the PerformTask() and make it return the result.

private string PerformTask()
{
    // job time 4 - 10 seconds
    int time = new Random().Next(4, 11);
    int fullTime = time;
  
    Thread.Sleep(time);      
  
    return String.Format("Work completed - ran for {0} seconds", fullTime);
} 

Button click event.

private void BtnWork_Click(object sender, RoutedEventArgs e)
{
    Thread thread = new Thread(() =>
        {
            string result = PerformTask();
            Dispatcher.Invoke(() =>
                {
                    TxtStatus.Text = result;
                });
        });
    thread.Start();
}

Part 2 – will discuss about UI updates in ASP.NET and Silverlight.

Share this:

Related