Moves a rectangle right 100 pixels and then left 50 pixels : DoubleAnimation « Animations « Silverlight

1. Silverlight
2. Animations
3. DoubleAnimation

Moves a rectangle right 100 pixels and then left 50 pixels

    

<UserControl x:Class='SilverlightApplication3.MainPage'
    xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation' 
    xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'
    xmlns:d='http://schemas.microsoft.com/expression/blend/2008' 
    xmlns:mc='http://schemas.openxmlformats.org/markup-compatibility/2006' 
    mc:Ignorable='d' 
    d:DesignWidth='640' 
    d:DesignHeight='480'>
<Canvas>

  <Canvas.Triggers>
    <EventTrigger RoutedEvent="Canvas.Loaded">
      <EventTrigger.Actions>
        <BeginStoryboard>
          <Storyboard>

            <DoubleAnimationUsingKeyFrames
              Storyboard.TargetName="rect1"
              Storyboard.TargetProperty="(Canvas.Left)"
              Duration="0:0:6"
            >
              <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0" />
              <LinearDoubleKeyFrame Value="100" KeyTime="0:0:3" />
              <LinearDoubleKeyFrame Value="50" KeyTime="0:0:6" />
            </DoubleAnimationUsingKeyFrames>
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>
  </Canvas.Triggers>

  <Rectangle x:Name="rect1" Width="100" Height="100" Fill="Red"/>

</Canvas>
</UserControl>
        

   
    
    
    
  

Related examples in the same category

1.	XAML demonstrating absence of From property within DoubleAnimation
2.	XAML demonstrating the To property within DoubleAnimation
3.	XAML demonstrating By property within a DoubleAnimation
4.	XAML demonstrating From property within DoubleAnimation
5.	Use DoubleAnimation to animate the Opacity
6.	Timeline with offset of 5 seconds
7.	Use DoubleByAnimation to control animation
8.	Animation with a fast speed