Why is UI unresponsive while being programmatically controlled?

Question

I hand-rolled a MVC-style implementation of a game that I want to autoplay. By "autoplay" I mean that the buttons that normally a user would click while playing I want a controller to automatically initiate. That way I can watch the game play itself for quality control reasons. This particular game has a lot of code, so instead of providing it as an example I've created a silly HelloWorld example using the same approach.

Before I provide the example, here is my issue: everything you see below is functional, and "works"; except for one thing: I'm unable to shut-off the autoplay because the UI becomes unresponsive and the button to turn it off won't respond to a click event.

First create a .Net 4.6.1 winforms project in a solution. (.net version probably doesn't matter as long as it is >= 4.5). Create a Form that looks like this:

In the code behind, copy paste this: (change names as needed to compile)

using System;
using System.Threading;
using System.Windows.Forms;

namespace WinformsExample
{
    public partial class HelloWorldView : Form
    {
        private readonly HelloWorldController MyHelloWorldController;

        public HelloWorldView()
        {
            InitializeComponent();

            MyHelloWorldController = new HelloWorldController();
        }

        private void button1_Click(object sender, EventArgs e)
        {
            MyHelloWorldController.HelloWorldRequested();

            if (MyHelloWorldController.IsAutomated)
            {
                Thread.Sleep(2000);
                button1.PerformClick();
            }
        }

        private void HelloWorldView_Load(object sender, EventArgs e)
        {
            MyHelloWorldController.HelloWorldRequestedEvent += OnHelloWorldRequested;
        }

        private void OnHelloWorldRequested(HelloWorldParameters parameters)
        {
            textBox1.Text += parameters.HelloWorldString + Environment.NewLine;
            textBox1.Update();
        }

        private void button2_Click(object sender, EventArgs e)
        {
            MyHelloWorldController.IsAutomated = !MyHelloWorldController.IsAutomated;

            if (MyHelloWorldController.IsAutomated)
            {
                button2.Text = "hello world - is on";
                button2.Update();
                button1.PerformClick();
            }
            else
            {
                button2.Text = "hello world - is off";
                button2.Update();
            }
        }
    }
}

And create a class titled HelloWorldController.cs and copy paste this in to it:

namespace WinformsExample
{
    public class HelloWorldParameters
    {
        public string HelloWorldString { get; set; }
    }

    public delegate void HelloWorldEventHandler(HelloWorldParameters parameters);

    public class HelloWorldController
    {
        private readonly HelloWorldParameters _parameters;

        public event HelloWorldEventHandler HelloWorldRequestedEvent;

        public bool IsAutomated { get; set; }

        public HelloWorldController()
        {
            _parameters = new HelloWorldParameters();
        }

        public void HelloWorldRequested()
        {
            _parameters.HelloWorldString = "Hello world!!";

                        if (HelloWorldRequestedEvent != null)
            HelloWorldRequestedEvent(_parameters);
        }
    }
}

...go ahead and rename things if you need to. Now build the program. Click the first button. You will see "hello world". Now click the second button, you will see "hello world" printed every 2 seconds.

The way I thought this would work is that by clicking button2 a second time, that it would stop the autoplay. However, the UI is unresponsive and the button click event never happens.

What is going on here that is causing the UI to be unresponsive and how can I fix it so that I get the intended behavior?

*UPDATE - HERE IS THE SOLUTION *

Keep everything the same as above except for HelloWorldView.cs. Remove the call to Thread.Sleep(). Drag and drop a timer from the toolbox to the design surface. You will see an icon on the bottom of the designer surface labeled

timer1

Copy paste the following code in to HelloWorldView.cs. Compile and execute. If everything is correct you should be able to turn on and off the "hello world" display by clicking the button at any time - the UI stays responsive.

using System;
using System.Windows.Forms;

namespace WinformsExample
{
    public partial class HelloWorldView : Form
    {
        private readonly HelloWorldController MyHelloWorldController;

        public HelloWorldView()
        {
            InitializeComponent();

            MyHelloWorldController = new HelloWorldController();
        }

        private void onTimerTick(object sender, EventArgs e)
        {
            button1.PerformClick();
        }

        private void OnHelloWorldRequested(HelloWorldParameters parameters)
        {
            textBox1.Text += parameters.HelloWorldString + Environment.NewLine;
            textBox1.Update();
        }

        private void HelloWorldView_Load(object sender, EventArgs e)
        {
            MyHelloWorldController.HelloWorldRequestedEvent += OnHelloWorldRequested;
        }

        private void button1_Click(object sender, EventArgs e)
        {
            MyHelloWorldController.HelloWorldRequested();
        }

        private void button2_Click(object sender, EventArgs e)
        {
            MyHelloWorldController.IsAutomated = !MyHelloWorldController.IsAutomated;

            if (MyHelloWorldController.IsAutomated)
            {
                button2.Text = "hello world - is on";
                button2.Update();

                timer1.Interval = 2000;
                timer1.Tick += onTimerTick;
                timer1.Start();
            }
            else
            {
                timer1.Stop();
                button2.Text = "hello world - is off";
                button2.Update();
            }
        }
    }
}

Answer 1

As others have said, you are blocking the UI thread with the Thread.Sleep and recursive button1.PerformClick(); call. You have to let the UI run as freely as possible and let it go idle quickly.

So, just for the fun of it I have rewritten your code to do just that. I've also implemented it with Microsoft's Reactive Extensions (Rx) - just NuGet "Rx-WinForms" to get the bits. Rx allows you to do some very funky things that you can't easily do with events.

Here's your form now:

public partial class HelloWorldView : Form
{
    private readonly HelloWorldController MyHelloWorldController =
        new HelloWorldController("Hello world!!", TimeSpan.FromSeconds(1.0));

    public HelloWorldView()
    {
        InitializeComponent();
    }

    private void Form1_Load(object sender, EventArgs e)
    {
        MyHelloWorldController.Messages
            .ObserveOn(this)
            .Subscribe(message =>
            {
                textBox1.Text += message + Environment.NewLine;
            });

        MyHelloWorldController.IsAutomateds
            .ObserveOn(this)
            .Subscribe(isAutomated =>
            {
                button2.Text = "hello world - is " + (isAutomated ? "on" : "off");
            });
    }

    private void button1_Click(object sender, EventArgs e)
    {
        MyHelloWorldController.Trigger();
    }

    private void button2_Click(object sender, EventArgs e)
    {
        MyHelloWorldController.IsAutomated = !MyHelloWorldController.IsAutomated;
    }
}

You'll notice that I've simplified down the UI. It really does as little as possible to update itself and to notify the HelloWorldController of its actions.

The worst part of the code are the two .Subscribe calls in Form1_Load. These are simply looking at the two observables (Rx's version of events if you like) and makes sure the events are run on the UI thread with the .ObserveOn(this) call, and then they subscribe to values produced from the HelloWorldController.

The UI is simply updating itself from the controller and telling the controller what it is doing. There is virtually no logic being performed in the UI. This is how it should be with any MVC-style coding.

Now the HelloWorldController is where the fun is.

It starts off pretty simply:

    private string _message;
    private TimeSpan _automatedPeriod;

    public HelloWorldController(string Message, TimeSpan automatedPeriod)
    {
        _message = Message;
        _automatedPeriod = automatedPeriod;
    }

This is basically the information about what message to send to the UI and how often when the controller is automating the values.

It then tracks whether it is automated or not:

    private bool _isAutomated = false;

Now it contains the Rx observables - these are like the events you were using.

    private Subject<string> _messages = new Subject<string>();
    public IObservable<string> Messages { get { return _messages.AsObservable(); } }

    private Subject<bool> _isAutomateds = new Subject<bool>();
    public IObservable<bool> IsAutomateds { get { return _isAutomateds.AsObservable(); } }

    private SerialDisposable _serialSubscription = new SerialDisposable();

In Rx an IObservable<T> is something I can subscribe to to get a series of values - just like an event. The Subject<T> is something that I can manually push values into, but it also can be an IObservable<T> that can be subscribed to. It's the pair of these that lets me raise events. Think of the Subject<string> to be the equivalent of the HelloWorldRequested method in your code and the IObservable<string> to be the equivalent of the HelloWorldRequestedEvent event.

If I call _messages.OnNext("Hello") then any subscribers to IObservable<string> Messages would get a "Hello" sent to them. Just like an event.

IsAutomated looks like this:

    public bool IsAutomated
    {
        get { return _isAutomated; }
        set
        {
            _isAutomated = value;
            _isAutomateds.OnNext(value);
            if (_isAutomated)
            {
                this.Trigger();
            }
        }
    }

So it does its job of updating its own internal state, but it also calls _isAutomateds.OnNext(value) to push out the updates to any subscribers of IObservable<bool> IsAutomateds. It also works out if it needs to trigger the controller to produce messages with the this.Trigger() call.

Finally the Trigger method looks like this:

    public void Trigger()
    {
        if (_isAutomated)
        {
            _serialSubscription.Disposable =
                Observable
                    .Interval(_automatedPeriod)
                    .StartWith(0)
                    .TakeUntil(_isAutomateds.Where(x => x == false))
                    .Subscribe(n => _messages.OnNext(_message));
        }
        else
        {
            _messages.OnNext(_message);
        }
    }

The easy part of this is when the _isAutomated is false then it simply sends one message out via the _messages.OnNext(_message) call.

When _isAutomated is true it uses some of the coolness of Rx to set up effectively a timer to produce values every TimeSpan _automatedPeriod. From your code you wanted every 2 seconds so the TimeSpan would be TimeSpan.FromSeconds(2.0).

Observable.Interval(_automatedPeriod) defines a timer that begins producing values after the first period of time and then every period of time between.

So the .StartWith(0) says that it should immediately produce a value when it is subscribed to.

The .TakeUntil(_isAutomateds.Where(x => x == false)) is the best part here - it says that it will take the values from the the Observable.Interval(_automatedPeriod).StartWith(0) and stop when it gets a value from _isAutomateds.Where(x => x == false) - in other words when the IsAutomated is set to false.

The .Subscribe(n => _messages.OnNext(_message)); simply pushes a value to the _messages subject so that all subscribers of IObservable<string> Messages gets their messages.

Just put all of the HelloWorldController I've given you in public class HelloWorldController { ... } and you're good to go.

The works I think like it should and shows how lightweight the UI code can be.

I hope you find this worth playing with.

You'll need to add these using's to the top of your code to get all of the code to compile:

using System.Reactive.Disposables;
using System.Reactive.Linq;
using System.Reactive.Subjects;

Answer 2

What is going on here that is causing the UI to be unresponsive and how can I fix it so that I get the intended behavior?

There are essentially two reasons why your app becomes unresponsive.

1. Thread.Sleep() in UI thread

GUI applications on Windows are generally driven by messages (mouse clicks; keyboard; screen drawing) posted to it which are placed on a queue. The UI thread processes these messages one by one dispatching the message to the appropriate handler. In this way it is known as the Message Pump. If during processing one of these messages too much time elapses, then the UI will appear to freeze. Event handlers should be as fast as possible.

During your click handlers you are using Thread.Sleep(2000); which will prevent the UI thread from updating the UI of your application, in essence simulating an event handler that takes far too long to process an event. It is perhaps no different to say performing a lengthy database or WCF operation on the UI thread, hence why people tend to put such calls on a separate thread or task.

Recommend you remove the Thread.Sleep and replace it with a timer as others have indicated.

2. Infinite Recursive Loop on button1 handler

When you click button2 for the first time, the click handler for button2 is invoked where automation is enabled. You then simulate button1 being clicked via button1.PerformClick();.

During the call to button1.PerformClick, the click handler for button1 button1_Click() is invoked. It is there that you sleep for 2 seconds (which isn't healthy for the UI) but the secondary problem is that you immediately call button1.PerformClick(); from inside the button1 click handler, in essence setting up an infinite recursive loop.

If you were to remove the Thread.Sleep(2000) your app will eventually lead to a StackOverflowException. Your code as it stands now (even with the sleep) will still overflow, it's just that it will take much longer to become apparent.

Again, consider replacing it with a timer.

3. Exclusivity

It's important to note that ignoring the stack fault for a moment, the design is such that your app can't do anything else whilst this infinite loop is running. So if your game had other buttons to click; scores to display; sound effects to play; all from the point of view of the button2 handler, most likely it will never happen because it is too busy exclusively processing button1.

Conclusion

1. Keep UI responsive: Avoid Thread.Sleep() in your code
2. Avoid recursion: Don't use PerformClick() for a button whilst you are inside the click handler for said button

Answer 3

Desktop applications have a so called UI thread. It's basically an infinite loop which keeps checking if something happened, such as a mouse click, and redraws the window if needed. Coding in WinAPI you would need to write this loop yourself, WinForms and other UI frameworks hide it away. But your click handler is called from inside this loop. So if your code takes too much time - like, because you call Thread.Sleep inside - the loop will not continue and will not be able to process anything that is happening to the application. This why long-running processes need to take place on a separate thread.

Answer 4

WinForms uses a single message pump thread (called the UI thread). (If you are unfamiliar with the concept you should research Windows messages and Windows message pump).

Thread.Sleep causes the currently executing thread the sleep, or pause, for a time. This sleep/pause is like death to the thread - it is aware of nothing and unable to do anything.

As the currently executing thread in a WinForms app is usually the UI thread - Thread.Sleep will cause the UI to become unresponsive because it is no longer able to pump messages.

An alternative design would be to use a form-based Timer. Place your game playing code in the Timer's Tick event.

Answer 5

Your "Thread.Sleep()" call puts the UI thread to sleep. Use a Timer instead. Then terminate the Timer on the second press. (You could also do this with Tasks, if you want to use another thread you need to make the 2 threads communicate in someway so that the UI thread is the only one actually updating the UI)