How to display "loading" gif instead of wpf controler when loading?

Consider a TextBlock in wpf that is bound asynchronously to a property in the viewmodel where the get uses a time consuming method. Using the Fallback tag in the xaml code, I can set the Text tag of the TextBlock to "Loading...".

But I have actually a ListBox that is bound to an IEnumerable<MyType> where the List box items display different fields of MyType. How can I have a laoding gif (or any kind of different wpf element) displayed while the bounded IEnumerable<MyType> is being loaded ?

I guess that I could bind the Visibility of the Loading element to some kind of a bool that describes the state of the asynchronous property, but I don't find such a bool in xaml. If it does not exists in xaml, I could work out the state of the loading method and create this bool in the viewmodel. Would that be the best way to achieve it ?

Solution

You should read @Stephen Cleary's article about patterns for asynchronous MVVM applications: https://msdn.microsoft.com/en-us/magazine/dn605875.aspx.

You could bind to a NotifyTaskCompletion<IEnumerable<MyType>> source property and use a DataTrigger or a simple binding to the IsNotCompleted property to display an Image until the Result property has been set:

<!-- Busy indicator -->
<Image Source="pic.png" Visibility="{Binding YourItemsSourceProperty.IsNotCompleted,
            Converter={StaticResource BooleanToVisibilityConverter}}"/>
<!-- Results -->
<ItemsControl ItemsSource="{Binding YourItemsSourceProperty.Result}" Visibility="{Binding
          UrlByteCount.IsSuccessfullyCompleted, Converter={StaticResource BooleanToVisibilityConverter}}"/>

Please read the article for more information about do's and don'ts.