wpf animate the loading 'dot' progress

Question

I'm actually animating the "dot dot dot" progress using image. I think of using opacity by having the codes below.

 <DoubleAnimation Storyboard.TargetName="dotProgress1" BeginTime="0:0:0.1" Storyboard.TargetProperty="Opacity" From="0" To="1"/>
 <DoubleAnimation Storyboard.TargetName="dotProgress2" BeginTime="0:0:0.2" Storyboard.TargetProperty="Opacity" From="0" To="1"/>
 <DoubleAnimation Storyboard.TargetName="dotProgress3" BeginTime="0:0:0.3" Storyboard.TargetProperty="Opacity" From="0" To="1"/>
 <DoubleAnimation Storyboard.TargetName="dotProgress1" BeginTime="0:0:0.4" Storyboard.TargetProperty="Opacity" From="1" To="0"/>
 <DoubleAnimation Storyboard.TargetName="dotProgress2" BeginTime="0:0:0.4" Storyboard.TargetProperty="Opacity" From="1" To="0"/>
 <DoubleAnimation Storyboard.TargetName="dotProgress3" BeginTime="0:0:0.4" Storyboard.TargetProperty="Opacity" From="1" To="0"/>
 <DoubleAnimation Storyboard.TargetName="dotProgress1" BeginTime="0:0:0.5" Storyboard.TargetProperty="Opacity" From="0" To="1"/>
 <DoubleAnimation Storyboard.TargetName="dotProgress2" BeginTime="0:0:0.6" Storyboard.TargetProperty="Opacity" From="0" To="1"/>

The animation will last for 3 seconds, is there any easier way to animate it?

Answer 1

Here's a quick version that will automatically start animation when the control is rendered. When your loading task is done you can just hide the stackpanel.

<StackPanel Orientation="Horizontal">
  <StackPanel.Triggers>
      <EventTrigger RoutedEvent="Rectangle.Loaded">
        <BeginStoryboard>
          <Storyboard Name="waitingAnimation" RepeatBehavior="Forever">
          <DoubleAnimation Storyboard.TargetName="Dot1" BeginTime="0:0:0.1" Storyboard.TargetProperty="Opacity" From=".1" To="1" AutoReverse="True" Duration="0:0:0.4"/>
          <DoubleAnimation Storyboard.TargetName="Dot2" BeginTime="0:0:0.2" Storyboard.TargetProperty="Opacity" From=".1" To="1" AutoReverse="True" Duration="0:0:0.4"/>
          <DoubleAnimation Storyboard.TargetName="Dot3" BeginTime="0:0:0.3" Storyboard.TargetProperty="Opacity" From=".1" To="1" AutoReverse="True" Duration="0:0:0.4"/>
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger>
  </StackPanel.Triggers>
  <Ellipse Name="Dot1" Fill="White" Opacity=".1" Width="8" Height="8"/>
  <Ellipse Name="Dot2" Fill="White" Opacity=".1" Width="8" Height="8" Margin="2,0,0,0"/>
  <Ellipse Name="Dot3" Fill="White" Opacity=".1" Width="8" Height="8" Margin="2,0,0,0"/>
</StackPanel>