Progress bar custom Control


Introduction :

The first user control you'll consider is a simple coupling of A Progress Bar and Label control. This control solves a minor annoyance associated with the Progress Bar-there is No way to show a standard text description that indicates the percent of work complete. You can easily get around this limitation by adding a label to every form that uses the Progress Bar, and manually synchronizing the two.

How to Create the Progress bar custom Control :

Now we are going to make a progress bar user custom control. To begin, the user control is created with a label and a progress bar. When you use the Progress control in a project, you'll discover that you can't access the Progress Bar or Label child controls directly. Instead, the only properties and methods that are available are those that belong to the user control itself, such as those that allow you to modify the default font and background color (as you can with a form), but not much more. To actually make the Progress user control functional, you need to wrap all the important methods and properties of the child controls with new methods and properties in the user control. This delegation pattern can add up to a lot of extra code for an advanced control. Fortunately, when you create a user control you will usually restrict and simplify the interface so that it's more consistent and targeted for a specific use. For example, in the Progress user control you might decide not to allow the hosting form to set the font or background color for the label control.

Step 1: Start Visual Studio and take a Window Forms Control Library named same as.

step_1_1.gif

Step 2: Open the UserControl1.cs file and drag and drop a Label, Button, Progress Bar and a timer.

Fig shows how it looks like.

step_11.gif

Step 3: Here we will code for a class in which we are going to make three property name as Value, Maximum , Step and a method name as Perform Step(), Update Label().

Code :

public partial class UserControl1 : UserControl
{
     public UserControl1()
     {
         InitializeComponent();
     }
     public int Value
     {
         get { return PRB.Value; }
         set
         {
             PRB.Value = value;
             UpdateLabel();
         }
     }
     public int Maximum
     {
         get { return PRB.Maximum; }
         set { PRB.Maximum = value; }
     }
     public int Step
     {
         get { return PRB.Step; }
         set { PRB.Step = value; }
     }
     public void PerformStep()
     {
         PRB.PerformStep();
         UpdateLabel();
     }
     private void UpdateLabel()
     {
         lblPbar.Text = (Math.Round((decimal)(PRB.Value * 100) /
         PRB.Maximum)).ToString();
         lblPbar.Text += "% Done";
     }
}

Step 4: To increment the value of progress bar, In this case, a timer is used for this purpose. Each time the timer fires, The Perform Step() method increments the counter by its Step value. Code for timer given below.

Code :

private void timer1_Tick(object sender, EventArgs e)
{
    PRB.PerformStep();
    if (PRB.Maximum == PRB.Value)
    timer1.Stop();
}

Step 5: In this Step We will write code for button click event.

Code :

private void button1_Click(object sender, EventArgs e)
{
   timer1.Stop();
   // Reset the progress.
   PRB.Value = 0;
   PRB.Maximum = 20;
   PRB.Step = 1;
   // Start incrementing.
   timer1.Start();
}

Completed Code for the UserControl1.cs file

Code :

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Drawing;
using System.Data;
using System.Linq;
using System.Text;
using System.Windows.Forms;
namespace WindowsFormsControlLibrary4
{
    public partial class UserControl1 : UserControl
    {
        public UserControl1()
        {
            InitializeComponent();
        }
        public int Value
        {
            get { return PRB.Value; }
            set
            {
                PRB.Value = value;
                UpdateLabel();
            }
        }
        public int Maximum
        {
            get { return PRB.Maximum; }
            set { PRB.Maximum = value; }
        }
        public int Step
        {
            get { return PRB.Step; }
            set { PRB.Step = value; }
        }
        public void PerformStep()
        {
            PRB.PerformStep();
            UpdateLabel();
        }
        private void UpdateLabel()
        {
            lblPbar.Text = (Math.Round((decimal)(PRB.Value * 100) /
            PRB.Maximum)).ToString();
            lblPbar.Text += "% Done";
        }
        private void UserControl1_Load(object sender, EventArgs e)
        {
        }
        private void timer1_Tick(object sender, EventArgs e)
        {
            PRB.PerformStep();
            if (PRB.Maximum == PRB.Value)
            timer1.Stop();
        }
        private void button1_Click(object sender, EventArgs e)
        {
            timer1.Stop();
            // Reset the progress.
            PRB.Value = 0;
            PRB.Maximum = 20;
            PRB.Step = 1;
            // Start incrementing.
            timer1.Start();
        }
    }
}

Step 6 : Now after doing all that we have to open a window application and add WindowFormsClassLibrary. In order for you to use your control in another project, that project needs a reference to the compiled control assembly. When you add this reference, Visual Studio stores the location of the control assembly file. Figure is given below.

after_step6.gif

Step 7: Now We have To add a component or control to the Toolbox, right-click the Toolbox, and select Choose
Items. Then select the .NET Framework Components tab, and click the Browse button. Once you double-click the appropriate assembly (for example, UserControl.dll), Visual Studio will examine its metadata to find all the classes that implement I Component (including custom component and custom controls). It adds each of these classes to the list and selects them.

after_step7.gif

Step 8: Now the control is in Toolbox and now we can use it on another application it will appear like as show in figure given below.

after_step8.gif

Step 9: In this step we have to drag and drop the UserControl1 to the window form and run the application

Before Run :

befor_run_pro.gif

After Run :

output3.gif


Similar Articles