Simple Silverlight Left/Right Animation

Animating one object is straightforward, and given the ability to repeat, opens up many possibilities.

The simple left ellipse traveling left-to-right across the page above is much like those of the SDK QuickStart:

XAML for producing this page:

The Storyboard.TargetProperty="(Canvas.Left)" coupled with the To="280" gets the ellipse to move left-to-right.

A very slight and intuitive change will get the ball to begin on the right and move to the left: change the ellipse Canvas.Left to be "280", and set the To value of the DoubleAnimation to be "0".

The animation is still realative to "(Canvas.Left)", and the ellipse is simply moving from "280" to "0".

So, opposing ellipses moving toward each other would then be:

<Canvas xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <Canvas.Triggers>
    <EventTrigger RoutedEvent="Canvas.Loaded" >
      <EventTrigger.Actions>
        <BeginStoryboard>
          <Storyboard x:Name="animation"
              Storyboard.TargetName="ellipse"
              Storyboard.TargetProperty="(Canvas.Left)" RepeatBehavior="Forever" >
            <DoubleAnimation To="280" Duration="0:0:10" />
            <DoubleAnimation Storyboard.TargetName="ellipse2" To="0" Duration="0:0:10" />
            </Storyboard>
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>
  </Canvas.Triggers>
  
  <Ellipse x:Name="ellipse"
      Height="20" Width="20" Canvas.Left="0" Canvas.Top="10"
      Fill="Blue" />

  <Ellipse x:Name="ellipse2"
      Height="20" Width="20" Canvas.Left="280" Canvas.Top="10"
      Fill="Blue" />

</Canvas>

You can easily see that the only addition to the Storyboard is another DoubleAnimation entry, with a Storyboard.TargetName pointing to ellipse2, as described above.

When reformatting this for Beta 1, I also added RepeatBehavior="Forever" to the Storyboard.