What is the best way to display a 'loading' indicator on a WPF control

Question

In C#.Net WPF During UserControl.Load ->

What is the best way of showing a whirling circle / 'Loading' Indicator on the UserControl until it has finished gathering data and rendering it's contents?

Answer 1

I improved on Ian Oakes Design and build an scalable version of his loading indicator:

<UserControl x:Class="Mesap.Framework.UI.Controls.BusyIndicator"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" Name="Root" Foreground="#9b9b9b"
             d:DesignHeight="100" d:DesignWidth="100">
    <Grid>
        <Grid.Resources>
            <Storyboard x:Key="Animation0" FillBehavior="Stop" BeginTime="00:00:00.0" RepeatBehavior="Forever">
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="E00" Storyboard.TargetProperty="Opacity">
                    <LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="1"/>
                    <LinearDoubleKeyFrame KeyTime="00:00:01.6" Value="0"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>

            <Storyboard x:Key="Animation1" BeginTime="00:00:00.2" RepeatBehavior="Forever">
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="E01" Storyboard.TargetProperty="Opacity">
                    <LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="1"/>
                    <LinearDoubleKeyFrame KeyTime="00:00:01.6" Value="0"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>

            <Storyboard x:Key="Animation2" BeginTime="00:00:00.4" RepeatBehavior="Forever">
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="E02" Storyboard.TargetProperty="Opacity">
                    <LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="1"/>
                    <LinearDoubleKeyFrame KeyTime="00:00:01.6" Value="0"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>

            <Storyboard x:Key="Animation3" BeginTime="00:00:00.6" RepeatBehavior="Forever">
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="E03" Storyboard.TargetProperty="Opacity">
                    <LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="1"/>
                    <LinearDoubleKeyFrame KeyTime="00:00:01.6" Value="0"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>

            <Storyboard x:Key="Animation4" BeginTime="00:00:00.8" RepeatBehavior="Forever">
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="E04" Storyboard.TargetProperty="Opacity">
                    <LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="1"/>
                    <LinearDoubleKeyFrame KeyTime="00:00:01.6" Value="0"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>

            <Storyboard x:Key="Animation5" BeginTime="00:00:01.0" RepeatBehavior="Forever">
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="E05" Storyboard.TargetProperty="Opacity">
                    <LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="1"/>
                    <LinearDoubleKeyFrame KeyTime="00:00:01.6" Value="0"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>

            <Storyboard x:Key="Animation6" BeginTime="00:00:01.2" RepeatBehavior="Forever">
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="E06" Storyboard.TargetProperty="Opacity">
                    <LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="1"/>
                    <LinearDoubleKeyFrame KeyTime="00:00:01.6" Value="0"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>

            <Storyboard x:Key="Animation7" BeginTime="00:00:01.4" RepeatBehavior="Forever">
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="E07" Storyboard.TargetProperty="Opacity">
                    <LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="1"/>
                    <LinearDoubleKeyFrame KeyTime="00:00:01.6" Value="0"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>

            <Style TargetType="Ellipse">
                <Setter Property="Fill" Value="{Binding ElementName=Root, Path=Foreground}"/>

            </Style>
        </Grid.Resources>
        <Grid.Triggers>
            <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                <BeginStoryboard Storyboard="{StaticResource Animation0}"/>
                <BeginStoryboard Storyboard="{StaticResource Animation1}"/>
                <BeginStoryboard Storyboard="{StaticResource Animation2}"/>
                <BeginStoryboard Storyboard="{StaticResource Animation3}"/>
                <BeginStoryboard Storyboard="{StaticResource Animation4}"/>
                <BeginStoryboard Storyboard="{StaticResource Animation5}"/>
                <BeginStoryboard Storyboard="{StaticResource Animation6}"/>
                <BeginStoryboard Storyboard="{StaticResource Animation7}"/>
            </EventTrigger>
        </Grid.Triggers>

        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <Ellipse x:Name="E00" Grid.Row="4" Grid.Column="0" Grid.RowSpan="3" Grid.ColumnSpan="3" Width="Auto" Height="Auto" Opacity="0"/>
        <Ellipse x:Name="E01" Grid.Row="1" Grid.Column="1" Grid.RowSpan="3" Grid.ColumnSpan="3" Width="Auto" Height="Auto" Opacity="0" />
        <Ellipse x:Name="E02" Grid.Row="0" Grid.Column="4" Grid.RowSpan="3" Grid.ColumnSpan="3" Width="Auto" Height="Auto" Opacity="0" />
        <Ellipse x:Name="E03" Grid.Row="1" Grid.Column="7" Grid.RowSpan="3" Grid.ColumnSpan="3" Width="Auto" Height="Auto" Opacity="0" />
        <Ellipse x:Name="E04" Grid.Row="4" Grid.Column="8" Grid.RowSpan="3" Grid.ColumnSpan="3" Width="Auto" Height="Auto" Opacity="0" />
        <Ellipse x:Name="E05" Grid.Row="7" Grid.Column="7" Grid.RowSpan="3" Grid.ColumnSpan="3" Width="Auto" Height="Auto" Opacity="0" />
        <Ellipse x:Name="E06" Grid.Row="8" Grid.Column="4" Grid.RowSpan="3" Grid.ColumnSpan="3" Width="Auto" Height="Auto" Opacity="0" />
        <Ellipse x:Name="E07" Grid.Row="7" Grid.Column="1" Grid.RowSpan="3" Grid.ColumnSpan="3" Width="Auto" Height="Auto" Opacity="0" />
    </Grid>
</UserControl>

Answer 2

I generally would create a layout like this:

<Grid>
    <Grid x:Name="MainContent" IsEnabled="False">
    ...
    </Grid>

    <Grid x:Name="LoadingIndicatorPanel">
    ...
    </Grid>
</Grid>

Then I load the data on a worker thread, and when it's finished I update the UI under the "MainContent" grid and enable the grid, then set the LoadingIndicatorPanel's Visibility to Collapsed.

I'm not sure if this is what you were asking or if you wanted to know how to show an animation in the loading label. If it's the animation you're after, please update your question to be more specific.