How to use Metro Progress Bar in C#
By FoxLearn 11/15/2024 9:23:03 AM 12.26K
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.
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.
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
- How to Create a Modern Windows 8 UI with the Metro Framework in C#
- How to create a Metro Wait Form in C#
- How to create a Metro Message Box in C#
- How to create a Metro Live Tiles in C#
- How to Create a Metro ListView in C#
- How to Create a Metro GridView in C#
- How to Create a Modern UI Login Form in C#
- How to Create a Metro TextBox in C#