WPF ProgressBar

C# ProgressBar class represents a WPF progress bar controlupd. The <ProgressBar> XAML elements can be used to create a progress bar at design time. The code examples in this tutorial demo how to create and use a ProgressBar control available in WPF Windows app.

This tutorial shows you how to create and use a ProgressBar control available in Windows Presentation Foundation (WPF) and XAML.
 
WPF ProgressBar
 

Introduction

 
The ProgressBar tag in XAML represents a WPF ProgressBar control.
  1. <ProgressBar></ProgressBar>  
The Width and Height properties represent the width and the height of a ProgressBar. The Name property represents the name of the control, which is a unique identifier of a control. The Margin property tells the location of a ProgressBar on the parent control. The HorizontalAlignment and VerticalAlignment properties are used to set horizontal and vertical alignments.
 
The following code snippet sets the name, height, and width of a ListView control. The code also sets horizontal alignment to left and vertical alignment to top. 
  1. <ProgressBar Margin="10,10,0,13" Name="ListView1" HorizontalAlignment="Left"VerticalAlignment="Top" Width="300" Height="30" />  
The progress bar looks like Figure 1.
 
WPF ProgressBar
Figure 1.

 
Setting up ProgressBar Value

 
The Value property of ProgressBar sets up the current value of a ProgressBar control. In the following code, I set the Value property to 60 and now ProgressBar looks like Figure 2. 

  1. <ProgressBar Margin="10,10,0,13" Name="PBar" HorizontalAlignment="Left" VerticalAlignment="Top" Width="300" Height="30" Value="60" >  
  2. </ProgressBar>  
WPF ProgressBar
Figure 2.
 

Dynamically Setting a ProgressBar Value

 
We can use a Timer or animation to set a ProgressBar value dynamically. The following code creates a DoubleAnimation object and sets ProgressBar.Value by using the ProgressBar.BeginAnimation method.
  1. privatevoid Window_Loaded(object sender, RoutedEventArgs e) {  
  2.     Duration duration = newDuration(TimeSpan.FromSeconds(20));  
  3.     DoubleAnimation doubleanimation = newDoubleAnimation(200.0, duration);  
  4.     PBar.BeginAnimation(ProgressBar.ValueProperty, doubleanimation);  
  5. }  
If you run the application, the ProgressBar run look like Figure 3.
 
WPF ProgressBar
Figure 3.
 

Flow Direction

 
The FlowDirection property sets the flow of ProgressBar. You can set this value either LeftToRight or RightToLeft. The default value is LeftToRight.
  1. FlowDirection="RightToLeft"  

Adding a ProgressBar to a StatusBar

 
You probably saw several applications like Internet Explorer where you can see the status of a page load in the status bar at the bottom by using a ProgressBar looks like Figure 4.
 
WPF ProgressBar
Figure 4.
 
The following code adds a StatusBar to WPF using XAML.
  1. <StatusBar Name="SBar" Grid.Column="0" Grid.Row="5" VerticalAlignment="Bottom" Background="LightBlue">  
  2.     <StatusBarItem>  
  3.         <TextBlock>Status:</TextBlock>  
  4.     </StatusBarItem>  
  5. </StatusBar>  
The following code creates a ProgressBar dynamically and adds it to the StatusBar and sets the duration for changing the value of the ProgressBar.
  1. privatevoid CreateDynamicProgressBarControl() {  
  2.     ProgressBar PBar2 = newProgressBar();  
  3.     PBar2.IsIndeterminate = false;  
  4.     PBar2.Orientation = Orientation.Horizontal;  
  5.     PBar2.Width = 200;  
  6.     PBar2.Height = 20;  
  7.     Duration duration = newDuration(TimeSpan.FromSeconds(20));  
  8.     DoubleAnimation doubleanimation = newDoubleAnimation(200.0, duration);  
  9.     PBar2.BeginAnimation(ProgressBar.ValueProperty, doubleanimation);  
  10.     SBar.Items.Add(PBar2);  
  11. }  

Summary

 
In this article, I discussed how to create and use a ProgressBar control available in WPF.