Show Loading Image when TreeView Node is clicked in WPF

Question

The question is we have a WPF application, which has Tree View. On the click of node Report gets generated which has no time interval (I mean no clue how much time it will take). So I am planning to show a Loading.gif file on the window till the report is generated.

How can I make the image (.gif) visible while the main window process to show the report and after showing the report I need to hide the image.

Do you have any other alternate method to do so.

Appreciate your help in advance.

Answer 1

Here's a sample of how to make async multi-threaded treeview -> http://www.codeproject.com/KB/WPF/ThreadedWPFExplorer.aspx

Answer 2

The general technique for this is:

1) Create an IsBusy property in the view model for your window; make sure it raises PropertyChanged when it changes.

2) In the code executed when the item is clicked, use a BackgroundWorker to run the long-running task.

3) Before calling BackgroundWorker.DoWork(), set IsBusy to true. In the event handler called when the BackgroundWorker.RunWorkerCompleted is raised, set IsBusy to false.

4) In the DataTemplate for the window, add a Style with a DataTrigger bound to IsBusy, and use that to control the visibility of the image.

Note that you may be able to move IsBusy (and the long-running task and the BackgroundWorker) to the item view model instead of the window view model, and add a "Loading" animation to the DataTemplate for the item.

If you do this, the user can start multiple items loading simultaneously, and the entire application doesn't lock up just because one item in the TreeView got clicked on. (Of course, you have to deal with any multithreading issues involved in generating multiple reports simultaneously).

Answer 3

You can make use of Extended WPF Toolkit's BusyIndicator.