In this article I shall demonstrate how to update the progress bar status with a responsive UI.
In normal applications whenever we do an action the UI gets stuck until the current operation is completed. Nowadays customers request a responsive User Interface.
In this example I shall demonstrate how to update the progress bar status in the UI while performing an action in the background.
Before going through this article, I strongly recommend going through the basics of Delegates and the Task Parallel Library in the .Net Framework. There are many article in c-sharpcorner.com.
Example: Project Type: Windows Application
This project consists of a form with a progress bar, button and a label control as shown in the figure. The Label control value is set to empty and hence it's not displayed at design time.
![Windows Application]()
Step 1: Create a class named DataProcessing as in the following:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Threading;
namespace TPLCallback
{
public class DataProcessing
{
public static void Processdata(Action<string> callBack)
{
Task.Factory.StartNew(() =>
{
for (int i = 1; i <= 50; i++)
{
Thread.Sleep(1000);
callBack(string.Format("Progress : {0} %", i));
}
callBack("Process complete..");
});
}
}
}
The static function ProcessData has an Action delegate as the parameter. This function is the heart of this project. Inside the code the delegate is called to update the UI without any process exception.
Step 2: Main Form
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
using System.Threading.Tasks;
using System.Threading;
namespace TPLCallback
{
public partial class Form1 : Form
{
TaskScheduler uiScheduler;
public Form1()
{
InitializeComponent();
InitializeComponent2();
}
private void InitializeComponent2()
{
pgProcessdata.Maximum = 50;
pgProcessdata.Step = 1;
pgProcessdata.Value = 0;
pgProcessdata.Style = ProgressBarStyle.Continuous;
}
private void button1_Click(object sender, EventArgs e)
{
button1.Enabled = false;
pgProcessdata.Value = 0;
DataProcessing.Processdata((message) => UpdateMyProgressBar(message));
}
private void UpdateMyProgressBar(string message)
{
Task.Factory.StartNew(() =>
{
pgProcessdata.PerformStep();
label1.Text = message;
}, CancellationToken.None, TaskCreationOptions.None, uiScheduler);
}
private void Form1_Load(object sender, EventArgs e)
{
//This is used to have synchronization between the Current Thread and the Main Thread.
uiScheduler = TaskScheduler.FromCurrentSynchronizationContext();
}
}
}
The InitializeComponent2 function sets the progress bar values initially.
The Action delegate is pointed to the UpdateMyProgressBar method.
When the DataProcessing.Processdata method is called it enters into the Processdata function and the process is sleeps for 1000 milliseconds. (In an actual project you might be perfuming some operation.) At the same time the delegate is invoked (callBack(string.Format("Progress : {0} %", i)).
The invoked method is UpdateMyProgressBar.
Hence the status is updated to the UI responsively.
Just try to move or resize the application. Yes; it is a responsive UI.
For a better understanding please go through the attached source code. It will really help you understand how to design a responsive UI.