How do I edit grid in WPF UI from the codebehind (C#) without UI freezing?

Question

I have fairly straightforward code that I want to run in order to edit the UI. I know that the UI will freeze if I run it in the Main Thread so I have been working at running it in a separate Thread, but this is not working. Here is what I want to happen: The user populates two lists using the UI. One list keeps track of what is on the screen and the other keeps track of what will need to go on the screen later. When the user clicks a certain button it clears the first list and the UI. I then display each item on the UI again using the second list with a certain length of time in between the return of each object. Here it is in a simplified form:

myList = [/*items to be displayed*/];
myMessages = [/*items currently displayed*/]
private void ButtonAnimationRun(object sender, RoutedEventArgs e)
{
    Thread thread = new Thread(() =>
    {
        Run();
    });
    thread.SetApartmentState(ApartmentState.STA);
    thread.Start();

}
public void Run()
{
    foreach (Message message in myList)
    {
        Thread.Sleep(message.Time * 1000);
        CreateText(message.Text);
    }          
}
public void CreateText(string text)
{
    Dispatcher.Invoke(() => myGrid.Children.Add(myMessages[myMessages.Count - 1]));
    // text is added to the child of myGrid here
    Dispatcher.Invoke(() => myScrollBar.ScrollToBottom());
}

That is not all my code, but it is the code that is related to my problem. If I use await or tasks I get an Apartment State error. With the code above I get this error: 'The calling thread cannot access this object because a different thread owns it.' on the line of the first Invoke, with or without the Invoke I still get it. The second Invoke works just fine when I comment out the previous one, but then, or course, I don't get anything shown on the UI because that is the code that adds the UI element to the UI. I have searched stackoverflow and all the answers I find cause others to crop up or inhibit the functionality of my app. If you need more information I can provide it.

Answer 1

The reason you get this exceotion is that you are using the wrong Dispatcher.

In WPF each thread has it's own Dispatcher. All UIElement objects also derive from DispatcherObject. Every DispatcherObject has a dispatcher affinity, which means they are associated to a specific Dispatcher - the Dispatcher of the thread the DispatcherObject (or UIElement) was created on. That's why this affinity is also known as thread affinity.

Now, you understand how to trigger the cross thread exception "The calling thread cannot access this object because a different thread owns it.": access the DispatcherObject e.g. a Grid from the wrong thread or via the wrong Dispatcher.

To get the right Dispatcher i.e. the Dispatcher that is associated with the DispatcherObject, you can access the DispatcherObject.Dispatcher property:

var dispatcher = myGrid.Dispatcher;

Since most of the time the DispatcherObjects are created on the application's (primary) UI thread, you can use it's Dispatcher too. You can access the UI thread Dispatcher via the static property

var dispatcher = Application.Current.Dispatcher;

If you have a long running dispatcher job, consider to execute it asynchronously and in the background (or at a lower priority than the default). This also helps to prevent the UI from becoming sluggish:

myGrid.Dispatcher.InvokeAsync(() => myScrollBar.ScrollToBottom(), DispatcherPriority.Background);

If you create a new UI thread manually (I guess you have a very good reason to do this), you may want to kick off the Dispatcher loop (or frame) by calling Dispatcher.Run. Consider to use Task.Run instead of Thread and the asynchronous Task.Delay instead of the blocking Thread.Sleep.

---

After reading your question once more, I understood that you are only creating this thread because you want to prevent the UI from freezing. It also occurred to me, that the way you have created the thread is possibly because you didn't know it better. If this is the case I strongly recommend to implement the following solution, which may also solve your problem:

private async void ButtonAnimationRun(object sender, RoutedEventArgs e)
{
  foreach (Message message in myList)
  {
    await Task.Delay(message.Time * 1000);
    await CreateTextAsync(message.Text);
  }          
}

public async Task CreateTextAsync(string text)
{
  // Do the heavy work asynchronously on a background thread
  await Task.Run(() =>
    {
      Application.Current.Dispatcher.InvokeAsync(() => myGrid.Children.Add(myMessages[myMessages.Count - 1]), DispatcherPriority.Background);

      // text is added to the child of myGrid here

      Application.Current.Dispatcher.InvokeAsync(() => myScrollBar.ScrollToBottom(), DispatcherPriority.Background);
    }
}

Answer 2

I would be tempted to simplify BionicCode's answer even more, by eliminating any usage of the Dispatcher altogether. I would also get rid of Task.Run, since there is no heavy work that would freeze the UI in the posted code. The beauty of async-await is that after each await we are back in the UI thread, without having to do anything at all.

private async void ButtonAnimationRun(object sender, RoutedEventArgs e)
{
    foreach (Message message in myList)
    {
        await Task.Delay(message.Time * 1000);
        CreateText(message.Text);
    }
}

public void CreateText(string text)
{
    myGrid.Children.Add(myMessages[myMessages.Count - 1]);
    // text is added to the child of myGrid here
    myScrollBar.ScrollToBottom();
}