views:

603

answers:

1

(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"&gt;
  <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.

+1  A: 

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

HTH,
Kent

Kent Boogaart
That is to say, do your processing on the BackgroundWorker. That should leave your app free to do animations.
RandomEngy