How to use Metro Progress Bar in C#

By FoxLearn 11/15/2024 9:23:03 AM   12.26K
To use the Metro Progress Bar in a C# Windows Forms application, you typically need a library that provides a modern "Metro-style" UI component.

One such library is MetroModernUI which includes controls like MetroProgressBar for creating stylish progress bars.

How to use Metro Progress Bar in C#?

Open your Visual Studio, then click New Project, then select Visual C# on the left, then Windows and then select Windows Forms Application. Name your project "MetroProgressBarDemo" and then click OK

Go to Tools > NuGet Package Manager > Manage NuGet Packages for Solution.

In the Browse tab, search for MetroFramework or MetroModernUI and install it.

install metro modern ui framework

Once the package is installed, follow these steps to use the MetroProgressBar.

If you don't see the metro framework in your toolbox, you can view How to download and install metro framework

Drag and drop MetroProgressBar, MetroLabel, MetroButton from Visual Toolbox onto your form designer, then you can design your metro form as below.

c# metro framework

Create a ProgressReport class to display the complete percentage

public class ProgressReport
{
    public int PercentComplete { get; set; }
}

To make a Metro-style form in a Windows Forms application using MetroFramework, you need to change the base class of your form from the default Form class to MetroForm.

public partial class Form1 : MetroFramework.Forms.MetroForm
{
    public Form1() { InitializeComponent(); }
}

To simulate progress, you can use a loop.

For example:

//Create a task to process import data
Task ProcessImport(List<string> data, IProgress<ProgressReport> progress)
{
    int index = 1;
    int totalProgress = data.Count;
    var progressReport = new ProgressReport();
    //Create a new thread
    return Task.Run(() =>
    {
        for (int i = 0; i < totalProgress; i++)
        {
            progressReport.PercentComplete = index++ * 100 / totalProgress;
            progress.Report(progressReport);
            Thread.Sleep(15);//Simulate
                             //Insert data to database
        }
    });
}

How to calculate ProgressBar percentage in C#?

To calculate the percentage of work completed, divide the current amount of work by the total amount of work, then multiply by 100.

For example, if 200 out of 1000 tasks are completed, the progress is calculated as:

PercentComplete = (200/1000)*100 = 20%

How to set ProgressBar value in C#?

To update a MetroProgressBar during background operations or loops, you need to add a Click Event Handler to the Start button.

Inside the event handler, perform a task such as a loop, then update the MetroProgressBar's value during the task to reflect progress.

//  winform progress bar in c#
private async void btnStart_Click(object sender, EventArgs e)
{
    //Init data
    List<string> list = new List<string>();
    for (int i = 0; i < 1000; i++)
        list.Add(i.ToString());
    lblProcess.Text = "Working...";
    var progressReport = new Progress<ProgressReport>();
    progressReport.ProgressChanged += (o, report) =>
    {
        //Update your percentage
        lblProcess.Text = string.Format("Processing...{0}%", report.PercentComplete);
        metroProgressBar.Value = report.PercentComplete;
        metroProgressBar.Update();
    };
    //Process import data
    await ProcessImport(list, progressReport);
    lblProcess.Text = "Done !!!";
}

In a real application, you might want to use the progress bar with asynchronous operations. You should use async/await to update the progress bar without blocking the UI.

By following these steps, you can easily integrate the Metro Progress Bar into your Windows Forms application using the MetroFramework.

VIDEO TUTORIAL