How to show a loading graphic/animaiton when wpf data binding is taking place

Question

I have a WPF user control that contains a data grid. I'm binding an observable collection of view models to it. Each view model has another collection of view models that I'm using to bind another data grid to. So the effect is a data grid with a nested data grid contained in the row details template.

Normally the binding is quite quick, but sometimes when there's a lot of data it can hang the UI while the binding/drawing is taking place.

Is there a way where I can either show a loading animation or progress bar while the binding/drawing is in progress?

Answer 1

There's probably a more formal, or at least simpler solution, but you could use a modal popup window that is shown in a worker thread and is closed asynchronously when your is grid done loading:

Window waitWindow = new Window { Height = 100, Width = 200, WindowStartupLocation = WindowStartupLocation.CenterScreen, WindowStyle = WindowStyle.None };
waitWindow.Content = new TextBlock { Text = "Please Wait", FontSize = 30, FontWeight = FontWeights.Bold, HorizontalAlignment = HorizontalAlignment.Center, VerticalAlignment = VerticalAlignment.Center };

BackgroundWorker worker = new BackgroundWorker();
worker.DoWork += delegate
{
    Dispatcher.BeginInvoke(new Action(delegate { waitWindow.ShowDialog(); }));

    DataLoader dataLoader = new DataLoader(); // I made this class up
    dataLoader.DataLoaded += delegate
    {
        Dispatcher.BeginInvoke(new Action(delegate() { waitWindow.Close(); }));
    };

    dataLoader.LoadData();
};

worker.RunWorkerAsync();

You can replace the TextBlock with something pretty like a loading bar, and you could make the code re-usable by parameterizing the object that handles the loading of the grid(s) and passing it in to a commonly used method.

I hope that works for you.

Answer 2

You can use a wait cursor turned on/off using a data trigger.

I posted some code here.