Responsive UI in async drawing

Question

I am trying to create a drawing with 5000 Shape objects in a background thread on a canvas.
I use the asyn-await pattern:

async void CreateDrawingAsync()
{
    await Task.Run(() => CreateDrawing()).ConfigureAwait(false);
}
void CreateDrawing()
{
    DrawObjects = new ObservableCollectionEx<DrawObject>();
    // or: DrawObjects.Clear();
    RaisePropertyChanged("DrawObjects");
    // etc ... etc ...
}

ObservableCollectionEx means I use an extension of ObservableCollection to add an object to the collection via the Dispatcher.
When I start CreateDrawingAsync in the Loaded event of the Window (in the ctor of Data) the UI is unresponsive.
Using DispatcherPriority.Background the items are added one by one in the UI, but also in that case, the UI is unresponsive.

Loaded += (object sender, RoutedEventArgs e) =>
{
     DataContext = new Data(2000, 1000, 1000);
};

1) I expected the background thread would resolve the unresponsive UI issue, what am I overlooking?

2) Why does RaisePropertyChanged("DrawObjects") (see code above) have no effect? I would have expected the drawing would be cleared due to the propertychanged.

Answer 1

You should not do UI operations on a background thread. This includes:

• Drawing on a canvas.
• Raising PropertyChanged notifications.
• Creating or updating an ObservableCollection.

Creating a fake-UI component like ObservableCollectionEx that just forwards all its work to the UI thread doesn't gain you anything.