Working With WPF ProgressBar Using C# And XAML

The ProgressBar class in WPF represents a progress bar control in C#. 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 Progress Bar C# XAML 
 

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.
 
Working with WPF ProgressBar using C# and XAML
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>  
Working with WPF ProgressBar using C# and XAML
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.
 
Working with WPF ProgressBar using C# and XAML
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.
 
Working with WPF ProgressBar using C# and XAML
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.