Show progress overlay while data bound list box is waiting for Async operation in C# Windows Phone 7 app (MVVM Light)?

Question

I have a C# Windows Phone 7 app with a Telerik data bound list box. The data bound list box's ItemsSource property is bound to a property in my view model that retrieves its contents from a RESTful web service. The logic for the read-only property is as follows:

Is the List property empty (first use)?

^ return an empty list

^ retrieve list contents asynchronously

^ raise property changed event when retrieval completes

It works fine and now I want to display a progress overlay while the Async operation is ongoing. I am using the Coding4Fun toolkit's progress overlay control. The problem is that I don't know where to "plug in" the right code to show and hide the progress overlay. I tried doing it from the view model below (see code below), but the progress overlay is not visible. I'm guessing that's because it is not parented properly to the currently visible application page?

How I can show the progress overlay properly? Note, if there's a nice XAML way to do this I'd like to know, otherwise I'll take what I can get.

    /// <summary>
    /// Does the async load of the list we return to the data bound contro.
    /// </summary>
    /// 
    async private void LoadListContentsAsync()
    {
        bool bIsProgOverlayShowing = false;

        if (!IsLoadingList)
        {
            // Set the busy flag.
            IsLoadingList = true;

            Coding4Fun.Toolkit.Controls.ProgressOverlay po = new Coding4Fun.Toolkit.Controls.ProgressOverlay();

            po.Content = "Loading List";
            po.Show();

            // Set the cleanup flag for the progress overlay.
            bIsProgOverlayShowing = true;

            try
            {
                // Do the asynchronous load.
                List<string> bl = await this.GetListContentsAsync();

                _listContents = bl.ToObservableCollection();

                // Raise the property changed event handler.
                RaisePropertyChanged("ListContents");
            }
            finally
            {
                // Make sure the loading flag is cleared.
                IsLoadingList = false;

                // Hide the progress overlay if it is showing.
                if (bIsProgOverlayShowing)
                    po.Hide();
            }
        } // if (!IsLoadingList)
    } // async private void LoadListContentsAsync()

Stephen Cleary Stephen Cleary · Accepted Answer · 2013-04-18T15:09:40

You may find my TaskCompletionNotifier type useful. You can get the source from here; it'll be in the next version of my AsyncEx library but is not in the current release.

Your VM property can be of type ITaskCompletionNotifier<ObservableCollection<string>> and can be created by passing a Task<ObservableCollection<string>> to TaskCompletionNotifierFactory.Create. The actual VM property can be read-only.

Once that's done, then your data binding code can use myVMProperty.Result to bind to the ObservableCollection<string> (the Result property is null until the task completes). Other data binding code can use myVMProperty.IsCompleted to bind to a boolean indicating whether the operation is completed. The progress indicator can bind to this with the common boolean-to-visibility converter.

Show progress overlay while data bound list box is waiting for Async operation in C# Windows Phone 7 app (MVVM Light)?

1 Answers