Progress Bar In WPF

In this article we are going to learn about Progress bar in WPF, if you are interested to scale your knowledge in WPF to creating industry level applications, you can download book I co-authored with Mahesh Chand,

Download here ==> WPF SIMPLIFIED

The Demo

As always, let me start this by giving you a demo.

The Demo

What is happening here?

There is a WPF control named "Progress bar" which is dancing to the timer's tune. 

Let's learn how to build this.

Progress Bar

Progress bar has lot of attributes but we are interested in 3 specific attributes

• Value
  This is the real time value that shows the progress.
   
• Minimum
  The lower limit value we specify here is the minimum value for the progress bar, we have set it to 0, so even if the actual bounded value goes below 0, the progress bar will simply override this with minimum value and stay in its lower limit.
   
• Maximum
  The upper limit value we specify here is the maximum value for the progress bar, we have set it to 100, so even if the actual bounded value goes beyond 100, progress bar will simply override this with Maximum value and stay in its upper limit. 

<ProgressBar  Name="ProgressBarLoading"
              Minimum="0"
              Maximum="100"
              HorizontalAlignment="Center"
              VerticalAlignment="Center" 
              Value="{Binding ProgressValue}"                      
              Width="300" 
              Height="30"/>

Listing 1: Progress bar

Text on Progress bar

We don't have any attributes right out of the box to show progress in the form of text. but we have a trick to achieve this. Here I am using TextBlock and just binding its value with ProgressBar's value. 

<TextBlock Text="{Binding ElementName=ProgressBarLoading, Path=Value, StringFormat={}{0:0}%}" 
           HorizontalAlignment="Center" 
           VerticalAlignment="Center" />

Listing 2: TextBlock on Progress bar

Alright what is missing? 

The timer which will increment progress bar value by 10 every second. Simply add following code snippet, 

Note: I am using dispatcher as I don't want to block UI thread. Visit here to learn more about dispatcher in WPF.

public partial class MainWindow: Window {
    private Timer timer;
    public MainWindow() {
        InitializeComponent();
        timer = new Timer(1000);
        timer.Elapsed += new ElapsedEventHandler(timer_Elapsed);
        timer.Start();
    }
    void timer_Elapsed(object sender, ElapsedEventArgs e) {
        this.Dispatcher.Invoke(System.Windows.Threading.DispatcherPriority.Normal, (Action)(() => {
            if (ProgressBarLoading.Value < 100) {
                ProgressBarLoading.Value += 10;
            } else {
                timer.Stop();
            }
        }));
    }
}

Listing 3: MainWindow.xaml.cs

Figure 1: Progress bar

 Let me leave you with one more cool attribute. you can choose to have direction of flow. In following snippet at line number 4, you can see I am using an attribute named FlowDirection.

<ProgressBar  Name="ProgressBarLoading"
              Minimum="0"
              Maximum="100" 
              FlowDirection="RightToLeft"
              Value="30"/>

Listing 4: FlowDirection = "RightToLeft"

Figure 2: FlowDirection = "RightToLeft"

Conclusion

Now we know how to use progress bar in WPF, how to use timer with progress bar and learned about a few attributes which are progress bar specific.

This is how you can create a Progress bar in WPF, same like this if you want to learn WPF in detail, You can download the book Mahesh & I wrote, WPF Simplified

Learn all the basics, UI controls, styles, graphics, object communications and data binding with different data sources.