Can't understand how to use Progress(T) to update UI during async process

Question

I have been googling this for quite a few hours, and read quite a few SO questions where this is discussed but I am sorry to say I just don't get how to use it.

Basically what I am trying to do is to have a label in a WPF/Win Forms app display the following while an async task is running:

Processing .

and at each 1 second interval to add another dot until I get to three and then start over at 1 until the task is done.

As a first step I am only trying to add a dot after each second and have tried it with an IProgress action but the only thing that I have been able to accomplish is either nothing or the label gets populated with dots in one shot and the other task seems to run after that is done.

I next tried doing the following:

   private async void startButton_Click(object sender, RoutedEventArgs e)
   {
        resultsTextBox.Text = "Waiting for the response ...";

        startButton.IsEnabled = false;
        resultsTextBox.Clear();

        var task = SumPageSizesAsync();

        var progress = Task.Run(() =>
        {
           var aTimer = new System.Timers.Timer(1000);
           aTimer.Elapsed += OnTimedEvent;
           aTimer.AutoReset = true;
           aTimer.Enabled = true;

           void OnTimedEvent(object source, ElapsedEventArgs et)
           {
               if (!lblProgress.Dispatcher.CheckAccess())
               {
                   Dispatcher.Invoke(() =>
                   {
                       lblProgress.Content += ".";
                   });
               }
           }
       });

       await task;
       await progress;

       resultsTextBox.Text += "\r\nControl returned to startButton_Click.";

       startButton.IsEnabled = true;
}

But again the label just gets populated with dots at once while the other task keeps running.

I took this example from the Microsoft Docs

UPDATE: I have now tried removing the loop while(!task.IsComplete) which basically makes the label start to be updated after the first task has finished. Then I tried to the following:

var task = SumPageSizesAsync();
var progress = GetProgress();

await Task.WhenAll(SumPageSizesAsync(), GetProgress());

But got the same result, the label begins to update after the first task has concluded.

Thank you for your help.

Answer 1

"Progress(T)" is the wrong pattern for this.

Here is the code for a WPF application that does this with 100% async / await code, no additional threads are created.

It starts two async tasks. The first simulates the long running async process. The second one starts another async Task that takes the first task as a parameter. It loops until the first task is completed, while updating a label with a "..." pattern. It awaits a Task.Delay to control the animation speed.

Both those tasks are placed in to a list, and the we await the completion of both of them.

This could all be wrapped up in in to a ShowProgressUntilTaskCompletes method (or extension method) that takes the worker Task as a parameter, which gives you an easily reusable method of showing a progress indicator for any Task.

MainWindow.xaml:

<Window
    x:Class="LongProcessDemo.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="MainWindow"
    Width="800"
    Height="450"
    mc:Ignorable="d">
    <StackPanel Margin="100" Orientation="Vertical">
        <Button Click="StartProcess_OnClick" Content="Start" />
        <TextBlock
            Name="LoadingText"
            Padding="20"
            Text="Not Running"
            TextAlignment="Center" />
    </StackPanel>
</Window>

MainWindow.xaml.cs:

using System;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Windows;

namespace LongProcessDemo
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private async void StartProcess_OnClick(object sender, RoutedEventArgs e)
        {
            var longRunningTask = SimulateLongRunningTask();
            var spinner = ShowSpinner(longRunningTask);
            var tasks = new List<Task>
            {
                longRunningTask,
                spinner,
            };
            await Task.WhenAll(tasks);
        }

        private async Task ShowSpinner(Task longRunningTask)
        {
            var numDots = 0;
            while (!longRunningTask.IsCompleted)
            {
                if (numDots++ > 3) numDots = 0;
                LoadingText.Text = $"Waiting{new string('.', numDots)}";
                await Task.Delay(TimeSpan.FromSeconds(.5));
            }

            LoadingText.Text = "Done!";
        }

        private async Task SimulateLongRunningTask()
        {
            await Task.Delay(TimeSpan.FromSeconds(10));
        }
    }
}

Here is a recording of it running, with window interaction proving that the UI is not blocked.

---

As an extra bonus, I got bored and implemented the extension method I mentioned (with super special bonus, a "local function" feature from C# 7!).

public static class TaskExtensions
{
    public static async Task WithSpinner(this Task longRunningTask, TextBlock spinnerTextBox)
    {
        async Task ShowSpinner()
        {
            var numDots = 0;
            while (!longRunningTask.IsCompleted)
            {
                if (numDots++ > 3) numDots = 0;
                spinnerTextBox.Text = $"Waiting{new string('.', numDots)}";
                await Task.Delay(TimeSpan.FromSeconds(.5));
            }
            spinnerTextBox.Text = "Done!";
        }

        var spinner = ShowSpinner();
        var tasks = new List<Task>
        {
            longRunningTask,
            spinner,
        };
        await Task.WhenAll(tasks);
    }
}

You use it like this:

await SimulateLongRunningTask().WithSpinner(LoadingTextBlock);

Answer 2

If you use the await, it means that your code will wait for the async operation to finish at that line, and then continue. That is why your progress task is not started until task task is finished. You can create a background thread that runs in parallel with the task until it is finished and in there you can tell the UI thread to animate the dots once per second. Since the UI thread is NOT blocked (but only waiting for the task to finish), this works.

Example code:

string originalLblContent = (lblProgress.Content as string) ?? "";
bool taskStarted = false;

var progressThread = new Thread((ThreadStart)delegate
{
    // this code will run in the background thread
    string dots = "";
    while(!taskStarted || !task.IsCompleted) {
        if(dots.Length < 3) {
            dots += ".";
        } else {
            dots = "";
        }
        // because we are in the background thread, we need to invoke the UI thread
        // we can invoke it because your task is running asynchronously and NOT blocking the UI thread
        Dispatcher.Invoke(() =>
        {
            lblProgress.Content = originalLblContent + dots;
        });
        Thread.Sleep(1000);
    }
});

progressThread.Start();
taskStarted = true;
await task;

// the task is now finished, and the progressThread will also be after 1 second ...

Answer 3

Your approach is a little funky here. The await statements will prevent the method returning until each thread is finished. The await feature is not a completely asynchronous execution (why would it be? you have threads for that).

You need to re-think your approach to the problem. Fundamentally, you want to update the UI while another process is in progress. This calls for multithreading.

From Microsoft:

"Handling blocking operations in a graphical application can be difficult. We don’t want to call blocking methods from event handlers because the application will appear to freeze up. We can use a separate thread to handle these operations, but when we’re done, we have to synchronize with the UI thread because we can’t directly modify the GUI from our worker thread. We can use Invoke or BeginInvoke to insert delegates into the Dispatcher of the UI thread. Eventually, these delegates will be executed with permission to modify UI elements.

In this example, we mimic a remote procedure call that retrieves a weather forecast. We use a separate worker thread to execute this call, and we schedule an update method in the Dispatcher of the UI thread when we’re finished."

https://learn.microsoft.com/en-us/dotnet/framework/wpf/advanced/threading-model