WPF Progress Bar Animation Speed

Question

I've noticed that there is a difference in the time it takes for a WPF Progress Bar and a WinForms Progress Bar to fill completely.

Fill completely as in set the Value to 100 in both Forms and WPF, one can notice that WinForms fills the bar smoothly whereas the WPF fills it instantly.

I wanted to know if there is a property that we can edit in the templates to change that.

Hope I made it clear, I can post a video too if anyone wants.

EDIT

Here's a video of what I'm talking about, notice the difference ?

EDIT 2

Filling the progress bar with a timer ?

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media.Animation;

namespace WpfApplication2
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            this.InitializeComponent();
            this.Title = "WPF Progress Bar Demo";
        }

        private void fill(int from, int to)
        {
            Duration duration = new Duration(TimeSpan.FromSeconds(0.5));
            DoubleAnimation doubleanimation = new DoubleAnimation(from, to, duration);
            progb.BeginAnimation(ProgressBar.ValueProperty, doubleanimation);
        }

        private void fill_Click(object sender, RoutedEventArgs e)
        {
            fill(0, 100);
        }
    }
}

Is that OK and will it work anywhere ?

Feel free to change it.

Thanks.

Answer 1

It looks like it's a problem (or not) with only WPF progress bar...another user reported it here

1. WPF Control, exactly progress bar, does not update itself when copying When I test to copy a big file, the complete GUI just completely freezes. The progress bar doesn’t run smoothly. It just jumps from 0 to 100.

It was solved by adding an extension method:

 //Your Code
    pbBar.Value = some_value;
    pbBar.Refresh();
 //Your Code

public static class ExtensionMethods
{
    private static Action EmptyDelegate = delegate() { };
    public static void Refresh(this UIElement uiElement)
    {
        uiElement.Dispatcher.Invoke(DispatcherPriority.Render, EmptyDelegate);
    }

    public static void RefreshInput(this UIElement uiElement)
    {
        uiElement.Dispatcher.Invoke(DispatcherPriority.Input, EmptyDelegate);
    }
}

Calling the Refresh() method after setting the value solved the issue.

But, what I found was even after applying the refresh() method, the progress bar jumps on each run (from different values).

Using a backgroundworker and reportprogress gives the exact result with no "jumps".

Answer 2

The idea is that a progress bar reports actual progress - not time elapsed. It's not intended to be an animation that just indicates something is happening.

The basic principle is that you bind Value to a property on your DataContext class, and update that value whenever a progress milestone occurs.

You can make it fill at a specified rate using a timer - here is an example:

<Window x:Class="WpfApplication3.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
<Grid>
    <ProgressBar Value="{Binding Path=ProgressValue}"></ProgressBar>
</Grid>

And the code:

  public partial class MainWindow : Window, INotifyPropertyChanged
{
    Timer timer;
    public MainWindow()
    {
        InitializeComponent();
        this.DataContext = this;
        timer = new Timer();
        timer.Interval = 1000;
        timer.Elapsed += new ElapsedEventHandler(t_Elapsed);
        timer.Start();
    }

    void t_Elapsed(object sender, ElapsedEventArgs e)
    {
        if (this._progressValue < 100)
            this.ProgressValue = _progressValue + 10;
        else
        {
            timer.Stop();
            timer.Dispose();
        }
    }

    private double _progressValue;
    public double ProgressValue
    {
        get { return _progressValue; }
        set
        {
            _progressValue = value;
            RaisePropertyChanged("ProgressValue");
        }
    }

    private void RaisePropertyChanged(string propName)
    {
        if (PropertyChanged != null)
            PropertyChanged(this, new PropertyChangedEventArgs(propName));
    }
    public event PropertyChangedEventHandler PropertyChanged;
}

Answer 3

See my answer on How to update a progress bar so it increases smoothly?

It's similar to the extension method, but uses a behavior so that you can decouple the progress bar from the thing that's reporting progress. :)