Animate Ball Height


   
      

<Window x:Class="asdf"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="" Height="300" Width="300">
    <Window.Resources>
        <Storyboard x:Key="ResizeEllipseStoryboard">
            <ParallelTimeline>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ellipse" Storyboard.TargetProperty="Height">
                    <LinearDoubleKeyFrame Value="150" KeyTime="0:0:1" />
                    <LinearDoubleKeyFrame Value="230" KeyTime="0:0:2" />
                    <LinearDoubleKeyFrame Value="150" KeyTime="0:0:2.5" />
                    <LinearDoubleKeyFrame Value="230" KeyTime="0:0:5" />
                    <LinearDoubleKeyFrame Value="40" KeyTime="0:0:9" />
                </DoubleAnimationUsingKeyFrames>

            </ParallelTimeline>
        </Storyboard>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="40" />
        </Grid.RowDefinitions>
        <Ellipse Height="40" Width="40" x:Name="ellipse" HorizontalAlignment="Center" VerticalAlignment="Center">
            <Ellipse.Fill>
                <RadialGradientBrush GradientOrigin="0.75,0.25">
                    <GradientStop Color="Yellow" Offset="0.0" />
                    <GradientStop Color="Red" Offset="1.0" />
                </RadialGradientBrush>
            </Ellipse.Fill>
        </Ellipse>
        <Button Content="Start..." Margin="10" Grid.Row="1">
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard Storyboard="{DynamicResource ResizeEllipseStoryboard}" />
                </EventTrigger>
            </Button.Triggers>
        </Button>

    </Grid>
</Window>

   
    
    
    
    
    
     


Using DiscreteStringKeyFrame


   
      
<Window x:Class="KeyFrameAnimation"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Key-Frame Animation" Height="200" Width="300">
  <StackPanel Margin="15">
    <TextBlock Name="label" Block.TextAlignment="Center" Foreground="Blue" />
    <Rectangle Name="rect" Width="200" Height="100" Stroke="Blue" Margin="10">
      <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
          <GradientStop Offset="0" />
          <GradientStop Offset="1" />
        </LinearGradientBrush>
      </Rectangle.Fill>
    </Rectangle>
    <StackPanel.Triggers>
      <EventTrigger RoutedEvent="StackPanel.Loaded">
        <EventTrigger.Actions>
          <BeginStoryboard>
            <Storyboard>
              <StringAnimationUsingKeyFrames Storyboard.TargetName="label" Storyboard.TargetProperty="(TextBlock.Text)"
                RepeatBehavior="Forever">
                <DiscreteStringKeyFrame Value="Colormap: Spring" KeyTime="0:0:0" />
                <DiscreteStringKeyFrame Value="Colormap: Summer" KeyTime="0:0:5" />
                <DiscreteStringKeyFrame Value="Colormap: Autumn" KeyTime="0:0:10" />
                <DiscreteStringKeyFrame Value="Colormap: Winter" KeyTime="0:0:15" />
                <DiscreteStringKeyFrame Value="Colormap: Cool" KeyTime="0:0:20" />
                <DiscreteStringKeyFrame Value="Colormap: Spring" KeyTime="0:0:25" />
              </StringAnimationUsingKeyFrames>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger.Actions>
      </EventTrigger>
    </StackPanel.Triggers>
  </StackPanel>
</Window>

   
    
    
    
    
    
     


Use StringAnimationUsingKeyFrames to Color


   
      

<Window x:Class="KeyFrameAnimation"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Key-Frame Animation" Height="200" Width="300">
  <StackPanel Margin="15">
    <TextBlock Name="label" Block.TextAlignment="Center" Foreground="Blue" />
    <Rectangle Name="rect" Width="200" Height="100" Stroke="Blue" Margin="10">
      <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
          <GradientStop Offset="0" />
          <GradientStop Offset="1" />
        </LinearGradientBrush>
      </Rectangle.Fill>
    </Rectangle>
    <StackPanel.Triggers>
      <EventTrigger RoutedEvent="StackPanel.Loaded">
        <EventTrigger.Actions>
          <BeginStoryboard>
            <Storyboard>
              <StringAnimationUsingKeyFrames Storyboard.TargetName="label" Storyboard.TargetProperty="(TextBlock.Text)"
                RepeatBehavior="Forever">
                <DiscreteStringKeyFrame Value="Colormap: Spring" KeyTime="0:0:0" />
                <DiscreteStringKeyFrame Value="Colormap: Summer" KeyTime="0:0:5" />
                <DiscreteStringKeyFrame Value="Colormap: Autumn" KeyTime="0:0:10" />
                <DiscreteStringKeyFrame Value="Colormap: Winter" KeyTime="0:0:15" />
                <DiscreteStringKeyFrame Value="Colormap: Cool" KeyTime="0:0:20" />
                <DiscreteStringKeyFrame Value="Colormap: Spring" KeyTime="0:0:25" />
              </StringAnimationUsingKeyFrames>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger.Actions>
      </EventTrigger>
    </StackPanel.Triggers>
  </StackPanel>
</Window>

   
    
    
    
    
    
     


Use ColorAnimationUsingKeyFrames to animate GradientStop


   
      

<Window x:Class="KeyFrameAnimation"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Key-Frame Animation" Height="200" Width="300">
  <StackPanel Margin="15">
    <TextBlock Name="label" Block.TextAlignment="Center" Foreground="Blue" />
    <Rectangle Name="rect" Width="200" Height="100" Stroke="Blue" Margin="10">
      <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
          <GradientStop Offset="0" />
          <GradientStop Offset="1" />
        </LinearGradientBrush>
      </Rectangle.Fill>
    </Rectangle>
    <StackPanel.Triggers>
      <EventTrigger RoutedEvent="StackPanel.Loaded">
        <EventTrigger.Actions>
          <BeginStoryboard>
            <Storyboard>
              <ColorAnimationUsingKeyFrames
                Storyboard.TargetName="rect"
                Storyboard.TargetProperty="Fill.GradientStops&#91;0&#93;.Color"
                RepeatBehavior="Forever">
                <LinearColorKeyFrame Value="#FF00FF" KeyTime="0:0:0" />
                <LinearColorKeyFrame Value="#00805A" KeyTime="0:0:5" />
                <LinearColorKeyFrame Value="#FF0000" KeyTime="0:0:10" />
                <LinearColorKeyFrame Value="#0000FF" KeyTime="0:0:15" />
                <LinearColorKeyFrame Value="#00FFFF" KeyTime="0:0:20" />
                <LinearColorKeyFrame Value="#FF00FF" KeyTime="0:0:25" />
              </ColorAnimationUsingKeyFrames>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger.Actions>
      </EventTrigger>
    </StackPanel.Triggers>
  </StackPanel>
</Window>

   
    
    
    
    
    
     


Repetition duration


   
      

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      HorizontalAlignment="Stretch" VerticalAlignment="Stretch">

    <Ellipse Fill="Red" Width="200" Height="100">
      <Ellipse.Triggers>
        <EventTrigger RoutedEvent="Ellipse.Loaded">
          <BeginStoryboard>
            <Storyboard>
    
                <DoubleAnimation By="20" Duration="0:0:0.25"
                                 Storyboard.TargetProperty="(Ellipse.Width)"
                                 RepeatBehavior="0:0:2" />
                
    
    
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Ellipse.Triggers>
    </Ellipse>

</Page>

   
    
    
    
    
    
     


Repetition count


   
      

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      HorizontalAlignment="Stretch" VerticalAlignment="Stretch">

    <Ellipse Fill="Red" Width="200" Height="100">
      <Ellipse.Triggers>
        <EventTrigger RoutedEvent="Ellipse.Loaded">
          <BeginStoryboard>
            <Storyboard>
    
                
                <ColorAnimation From="Red" To="Yellow" Duration="0:0:1"
                                Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)"
                                RepeatBehavior="3x" />
                
    
    
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Ellipse.Triggers>
    </Ellipse>

</Page>

   
    
    
    
    
    
     


Ball moves following spline key frames


   
      

<Window x:Class="SplineKeyFrameAnimation"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Spline Key Frame Animation" Height="250" Width="400">
  <Canvas Margin="5">
    <Ellipse Name="ball2" Canvas.Left="10" Canvas.Top="160" Width="20" Height="20">
      <Ellipse.Fill>
        <RadialGradientBrush>
          <GradientStop Color="Gold" Offset="0" />
          <GradientStop Color="DarkGoldenrod" Offset="1" />
        </RadialGradientBrush>
      </Ellipse.Fill>
    </Ellipse>
    <Canvas.Triggers>
      <EventTrigger RoutedEvent="StackPanel.Loaded">
        <EventTrigger.Actions>
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimationUsingKeyFrames
                Storyboard.TargetName="ball2"
                Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:10"
                RepeatBehavior="Forever">
                <SplineDoubleKeyFrame Value="160"
                  KeyTime="0:0:5" KeySpline="0.25,0.5,0.75,1" />
                <SplineDoubleKeyFrame Value="310"
                  KeyTime="0:0:10" KeySpline="0.25,0.0 0.75,0.5" />
              </DoubleAnimationUsingKeyFrames>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger.Actions>
      </EventTrigger>
    </Canvas.Triggers>
  </Canvas>
</Window>