WPF MVVM UI Not updated if Thread blocks

Question

I have a window:

<Window x:Class="WpfApplication1.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"
        xmlns:local="clr-namespace:WpfApplication1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
  <StackPanel Orientation="Horizontal" Background="{Binding BackgroundColor}">
    <Button Content="Button1" Click="ButtonBase_OnClick"/>
  </StackPanel>
</Window>

And this CodeBehind for the window:

using System;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Threading;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using WpfApplication1.Annotations;

namespace WpfApplication1
{
    /// <summary>
    ///     Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window, INotifyPropertyChanged
    {
        private Brush _backgroundColor;

        public MainWindow()
        {
            InitializeComponent();
            DataContext = this;
            Background = Brushes.Orange;
        }

        public Brush BackgroundColor
        {
            get { return _backgroundColor; }
            set
            {
                _backgroundColor = value;
                OnPropertyChanged();
            }
        }

        private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
        {
            Background = Brushes.Yellow;
            Thread.Sleep(5000);
        }

        public event PropertyChangedEventHandler PropertyChanged;

        [NotifyPropertyChangedInvocator]
        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

So basically I click a button and change background color. Everything works fine, unless I'm blocking the UI Thread.

When I do something like Background = Brushes.Yellow;Thread.Sleep(5000); I expect the background color to change, and then UI to freeze.

But currently UI seems not to be able to re-render itself before freezing and the color is changed after Sleep() release the lock.

I've tried to play around with Dispatcher, setting the priority, but behavior seems to be the same.

Anyone got ideas how to set for Sleep() lower priority, so the UI would be updated completely before goining to sleep?

P.S. The given code is just a quick reproduction of my real case, where I'm from WPF application starting another WPF application process.

Answer 1

The short answer is Don't block in the UI thread. Ever.

It's easier said than done, however there are a few tools at your disposal:

The old school method that still works is to use a DispatcherTimer. The DispatcherTimer delays in the background and when the timer goes off, you get a callback in the UI thread. Very convenient for doing updates. Unfortunately, the code surrounding this is kind of ugly.

The current best practice is to use async and await which were introduced with .NET 4.5. The way your callback would look changes to this:

    private async void ButtonBase_OnClick(object sender, RoutedEventArgs e)
    {
        Background = Brushes.Yellow;
        await Task.Delay(TimeSpan.FromSeconds(5));
        Background = Brushes.Red;
    }

I added the second background change so you know it actually waited without blocking your app. There's a couple things to note about this approach:

• you should only use void for event handlers since those can't be awaited.
• the default return type is either Task or Task<ReturnType> which allows you to await for that method to finish as well.

When you call await from the UI thread, you return to the UI thread when the system is done awaiting. If you want the UI to update before you are done returning from the handler, then you need to use await Dispatcher.Yield(). For example:

    private async void ButtonBase_OnClick(object sender, RoutedEventArgs e)
    {
        IsProcessing = true;
        await Dispatcher.Yield();

        // the UI is now showing that processing is going on
        Message = await DoProcessing();
        // update the other properties with the results

        IsProcessing = false;
    }

    private async Task<string> DoProcessing()
    {
       // Simulate heavy lifting here:
       await Task.Delay(TimeSpan.FromSeconds(5));

       return "Done processing";
    }

With this variation, you can see that even though we define DoProcessing() as returning a Task<string>, we never deal with the task directly. That's done by the compiler for us. The async keyword wraps the return value in a Task for you. The await call unwraps the result when it's ready without blocking the thread. This is a very convenient way of working with the UI.

---

NOTE: The original question was confused about Thread.Sleep() behavior. That method blocks the running thread until the requested number of milliseconds is done. The same is true if you explicitly call Wait() on a task object. The await keyword just puts a bookmark in the code so that when the background task finally completes, we can pick up where we left off.

Thread.Sleep() is a blocking call, so it will stop the Dispatcher from being able to do anything until it is done. It does not matter what the thread priority is.

Answer 2

Rendering happens when the UI thread is idle, by executing the sleep directly in the handler you block the UI thread. Using a DispatcherTimer or dispatcher frames you might be able to achieve this.