R – WPF – Wait Animation on a separate thread

animationmultithreadingwpf

(Note: I have seen this question and it uses a cursor not an animation.)

I have a wait animation (that I did not make but found on the internet). I want to show it while my app is doing some processing.

However, it gets stuck while my app is processing. Is there a way to make it keep going smooth? I usually think of a thread for this, but there are a few problems with that.

  1. I have no idea how to fire off a thread in XAML
  2. I usually know enough about threading to just get myself seriously messed up.
  3. I have done very little threading code in .NET

Can any one help me out? Here is the XAML that creates the wait animation:

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Grid>  
  <Viewbox Name="WaitCursor" >
  <Canvas Width="80" Height="80" Name="canvas">
   <Canvas.RenderTransform>
    <RotateTransform Angle="0" CenterX="40" CenterY="40" /> 
   </Canvas.RenderTransform>
   <Canvas.Triggers>

    <EventTrigger RoutedEvent="FrameworkElement.Loaded">
     <EventTrigger.Actions>
      <BeginStoryboard>
       <Storyboard>
        <DoubleAnimation Storyboard.TargetName="canvas" 
              Storyboard.TargetProperty="(Canvas.RenderTransform).(RotateTransform.Angle)" 
              To="360" 
              Duration="0:0:0.7" 
              RepeatBehavior="Forever" />
       </Storyboard>

      </BeginStoryboard>
     </EventTrigger.Actions>
    </EventTrigger>
   </Canvas.Triggers>
   <Ellipse Canvas.Top="0" Canvas.Left="30" Width="20" Height="20" >
     <Ellipse.Fill>
        <SolidColorBrush>
          <SolidColorBrush.Color>
            <Color A="10" R="0" G="0" B="255" />
          </SolidColorBrush.Color>
        </SolidColorBrush>
     </Ellipse.Fill>
   </Ellipse>
   <Ellipse Canvas.Top="10" Canvas.Left="50" Width="20" Height="20" Fill="#15000000"/>

   <Ellipse Canvas.Top="30" Canvas.Left="60" Width="20" Height="20" Fill="#38000000"/>
   <Ellipse Canvas.Top="50" Canvas.Left="50" Width="20" Height="20" Fill="#55000000"/>
   <Ellipse Canvas.Top="60" Canvas.Left="30" Width="20" Height="20" Fill="#88000000"/>
   <Ellipse Canvas.Top="50" Canvas.Left="10" Width="20" Height="20" Fill="#aa000000"/>
   <Ellipse Canvas.Top="30" Canvas.Left="0" Width="20" Height="20" Fill="#cc000000"/>
   <Ellipse Canvas.Top="10" Canvas.Left="10" Width="20" Height="20" Fill="#ff000000"/>

  </Canvas>
 </Viewbox>
  </Grid>
</Page>

For those who need an actual code example, I plan to put this in the OnClick event of the "Link" Button found in this CodePlex Project.

Best Answer

Your best bet is to use a BackgroundWorker. It will do the work of marshaling to the correct thread on your behalf.