How do you code a throbber ("loading" or "waiting" graphic) in WPF?

Question

How do you code that "loading" or "waiting" graphic in WPF?

If someone had a page that requires loading a lot information, typically on a flash web site, you see a circle spinning of some sort that universally means that there is a lot of data that is being loaded and the user needs to wait.

This is more than just a nice effect. It has real world application and importance. If someone opens a form or page or window that does not have this graphic and instead sees a form that should have information displayed but instead sees blank fields, his first notiion might rightly be that there is no information to be seen. This could be true even if the cursor turns to a waiting mode. The vast fields of emptiness will be more present and overpowering of an image than a cursor that might be in some sort of spinning state.

I suppose I could throw something together. I suppose I could present a gif of a rotating circle that is shown at the beginning and then hidden once all the data loading methods have been called. But maybe there is some sort of shared common graphic to use for free and without knowing exactly what this thing is called, I do not know what name or phrase to use to search for one. What are they called?

Also, maybe there is something already build into WPF or even MVVM that uses this. Is there? Also, maybe someone has worked out a way to make the whole form or page gray and inactive while displaying a rotating circle and has been kind enough to share it. Is this true?

Answer 1

As I see it, you're sort of asking a bunch of different questions here. So, though I normally dislike the piecemeal reply, here it is:

But maybe there is some sort of shared common graphic to use for free and without knowing exactly what this thing is called, I do not know what name or phrase to use to search for one. What are they called?

I'm sure there are royalty-free images on the web that you could use. I would probably search for "busy cursor" or even "hourglass", since, up until recently, that's how the major operating systems rendered them.

Also, maybe there is something already build into WPF or WCF or even MVVM that uses this. Is there?

First, we'd better get clear on our terms:

• MVVM does not have anything "built into" it, because it's a programming pattern, not a framework. There are plenty of implementations of it, but I don't know if any contain specific graphical elements. Could be!
• WCF is Windows Communication Foundation, and its libraries almost certainly don't contain any graphical elements.
• WPF is Windows Presentation Foundation, and that's where you will find (or define your own) graphical elements. It does contain a progress bar, but although you can customize the look of any WPF control, it's really meant to show progress from a starting point to an endpoint. That might not be what you want. WPF can certainly display animated images, though. Here's an example from SO for displaying animated GIFs.

Also, maybe someone has worked out a way to make the whole form or page gray and inactive while displaying a rotating circle and has been kind enough to share it. Is this true?

Almost certainly. Again, there are numerous approaches you could take here. Some of them are mentioned in this question, for example. Searching for "overlays" or "splash screens" could point you in the right direction. In short (in WPF):

• Make the page "inactive" by setting its controls' Inactive properties and / or trapping Preview(Key|Mouse)Down events
• "Gray out" the page by displaying a translucent element, such as a Grid or Rectangle over top of it. Depending on how you do this, it might handle making the underlying controls "inactive", as well (don't quote me on this, but I believe an element like a Rectangle will intercept mouse clicks, so the user can't click on controls underneath it...)

Answer 2

Use a background worker, and for a circular progress bar in wpf, see http://www.codeproject.com/Articles/49853/Better-WPF-Circular-Progress-Bar.aspx for a very good one.

Answer 3

BackGroundWorker thread is your friend. http://msdn.microsoft.com/en-us/library/system.componentmodel.backgroundworker.aspx

Answer 4

I am not sure, just an idea. Show a transparent modal window that contains spinning circle until the data is loaded by the background thread. When the data is loaded. close the modal window.

Answer 5

You could simply use attached properties

Here's a post with complete sample code (just a couple of classes)

Your main WPF Windows would simply look something like this:

    <Window.Resources>
    <CollectionViewSource x:Key="DataList" Source="{Binding TestData}"  />
</Window.Resources>
<Grid Background="AliceBlue" app:AsyncNotifier.Trigger="{Binding IsDataLoading}" 
      app:AsyncNotifier.SpinnerText="Loading...">
    <TabControl Grid.RowSpan="2">
        <TabItem Header="TabItem">
            <Grid Background="#FFE5E5E5">
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <ListBox ItemsSource="{Binding 
                    Source={StaticResource DataList}}" />
                <Button Content="Do Update" HorizontalAlignment="Left" Command="{Binding LoadData}"
                        VerticalAlignment="Top" Width="75" Grid.Row="1" Margin="0,5" />
            </Grid>
        </TabItem>
        <TabItem Header="TabItem">
            <Grid Background="#FFE5E5E5"/>
        </TabItem>
    </TabControl>
</Grid>