Introduction
This article describes the use of ProgressBar. What it is, how it works, and why we use this ProgressBar when developing software applications. A ProgressBar is typically used in software that includes long-running tasks, so displaying a ProgressBar is a good way to provide feedback to the user, so that they do not assume there is a problem.
Background
A progress bar is usually a long, thin strip of screen that fills with colour as the process progresses. Ideally, the amount of the bar that is filled represents the amount of work already completed. In some cases it is not possible to know how much processing is required. In these situation an indeterminate progress bar may be used. This animates to show the user that the software has not crashed but gives an indication of the amount of work remaining to be completed.
Solution
Here I have used a ProgressBar Control to create the progress bars. By default, ProgressBars let you display a value within the range from zero to one hundred. To set the current value, in other words to partially or totally fill the bar, we change the Value property.
Procedure
XAML creates a window containing three Buttons, a ProgressBar, and a Label. We change the value property with an attribute in the ProgressBar's XAML or by setting the property from code using a double-precision floating point number. We will do the latter using the first two buttons as in the following:
<ProgressBar Name="Progress"
Grid.Row="1"
Grid.ColumnSpan="3"
Height="25"
Minimum="-10"
Maximum="10"/>
Step 1
First we add the Click events to the two buttons, to do so we replace the XAML of the two repeat-button tags as follows:
<RepeatButton Click="Decrement_Click" Width="25" Height="25">-</RepeatButton>
<RepeatButton Click="Increment_Click" Width="25" Height="25" Grid.Column="1">+</RepeatButton>
Step 2
Next we add the code behind the buttons, we will make each button increment or decrement the value property when clicked. Clicking on a button will continously raise the event, updating the value repeatedly by using SetProgress() method, so that each change in the progress bar's value will be copied into the label's control Content (the name of the label is ProgrssText). For this we will use a constructor named SetProgressText().
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace ProgressBarDemo
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void Decrement_Click(object sender, RoutedEventArgs e)
{
if (Progress.Value > Progress.Minimum)
{
Progress.Value--;
}
SetProgressText();
}
private void Increment_Click(object sender, RoutedEventArgs e)
{
if (Progress.Value < Progress.Maximum)
{
Progress.Value++;
}
SetProgressText();
}
private void SetProgressText()
{
ProgressText.Content = Progress.Value;
}
}
}
Step 3
Also, we initially set the IsIndeterminate property (boolean property) of Progress (an object of the ProgressBar class) to false.
private void SetProgressText()
{
ProgressText.Content = Progress.Value;
Progress.IsIndeterminate = false;
}
Step 4
Now, we will add the Indeterminate click event to the the third button as in the following:
<Button Click="Indeterminate_Click" Width="25" Height="25" Grid.Column="2">?</Button>
And under this event we will write the following code in the class.
private void Indeterminate_Click(object sender, RoutedEventArgs e)
{
Progress.IsIndeterminate = !Progress.IsIndeterminate;
if (Progress.IsIndeterminate)
ProgressText.Content = "";
else
SetProgressText();
}
Step 5
We add the following code for the Progress bar and for the Label Control:
<Window x:Class="ProgressBarDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="ProgressBar Demo"
Width="250"
Height="100">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<RepeatButton Click="Decrement_Click" Width="25" Height="25">-</RepeatButton>
<RepeatButton Click="Increment_Click" Width="25" Height="25" Grid.Column="1">+</RepeatButton>
<Button Click="Indeterminate_Click" Width="25" Height="25" Grid.Column="2">?</Button>
<ProgressBar Name="Progress" Grid.Row="1" Grid.ColumnSpan="3" Height="25"
Minimum="-10" Maximum="10"/>
<Label Name="ProgressText" Content="0" HorizontalAlignment="Center"
Grid.Row="1" Grid.Column="1"/>
</Grid>
</Window>
Output
1. On running the application you will get the following output window.
2. On clicking on the '+' button, the event named Increment_Click is generated that increments the value property.
3. On clicking on the '-' button, the event named Decrement_CLick is generated that decrements the value property.
4. On clicking on the '?' button the ProgressBar shows the task going on, the task remaining or the task completed.