Simple Path Animation

BLE>



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

    <Path Fill="Blue">
        <Path.Data>
            <EllipseGeometry x:Name="elips"
                             RadiusX="12" RadiusY="12" />
        </Path.Data>

        <Path.Triggers>
            <EventTrigger RoutedEvent="Path.Loaded">
                <BeginStoryboard>
                    <Storyboard TargetName="elips" TargetProperty="Center">
                        <PointAnimationUsingPath Duration="0:0:2.5" 
                                                 AutoReverse="True"
                                                 RepeatBehavior="Forever">
                            <PointAnimationUsingPath.PathGeometry>
                                <PathGeometry 
                                    Figures="M 6 288 C 576 0, 0 0, 480 288" />
                            </PointAnimationUsingPath.PathGeometry>
                        </PointAnimationUsingPath>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Path.Triggers>
    </Path>
</Canvas>

   
    
    
    
    
    
     


Discrete Double Key Frame


   
      

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

    <Line Stroke="Black" StrokeThickness="3"
          X1="0" Y1="0" X2="0" Y2="-100"
          Canvas.Left="150" Canvas.Top="150">
        <Line.RenderTransform>
            <RotateTransform x:Name="xform1" />
        </Line.RenderTransform>
    </Line>

    <Line Stroke="Black" StrokeThickness="3"
          X1="0" Y1="0" X2="0" Y2="-100"
          Canvas.Left="450" Canvas.Top="150">
        <Line.RenderTransform>
            <RotateTransform x:Name="xform2" />
        </Line.RenderTransform>
    </Line>

    <Canvas.Triggers>
        <EventTrigger RoutedEvent="Canvas.Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="xform1"
                                     Storyboard.TargetProperty="Angle"
                                     From="0" To="360" Duration="0:1"
                                     RepeatBehavior="Forever" />           

                    <DoubleAnimationUsingKeyFrames
                                     Storyboard.TargetName="xform2"
                                     Storyboard.TargetProperty="Angle" 
                                     RepeatBehavior="Forever" 
                                     IsCumulative="True">
                        <DiscreteDoubleKeyFrame KeyTime="0:0:1" Value="6" />
                    </DoubleAnimationUsingKeyFrames>

                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Canvas.Triggers>
</Canvas>

   
    
    
    
    
    
     


Four Sided Bounce


   
      

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Name="canv">

    <Ellipse Name="elips" Fill="Blue" Width="8" Height="8" /> 

    <Canvas.Triggers>
        <EventTrigger RoutedEvent="Canvas.SizeChanged">
            <BeginStoryboard>
                <Storyboard TargetName="elips">
                    <DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)"
                        BeginTime="-0:0:1"
                        Duration="0:0:2"
                        RepeatBehavior="Forever" AutoReverse="True"
                        From="0" To="{Binding ElementName=canv, Path=ActualWidth}" />

                    <DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)"
                        Duration="0:0:2"
                        RepeatBehavior="Forever" AutoReverse="True"
                        From="0" To="{Binding ElementName=canv, Path=ActualHeight}" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Canvas.Triggers>
</Canvas>

   
    
    
    
    
    
     


Use StringAnimationUsingKeyFrames to animate the text value of a TextBlock


   
      


<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid TextBlock.FontSize="192">
        <TextBlock Name="txtblk" Foreground="Black"
                   HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Grid> 
    <Page.Triggers>
        <EventTrigger RoutedEvent="Canvas.Loaded">
            <BeginStoryboard>
                <Storyboard TargetName="txtblk" Duration="0:0:2" RepeatBehavior="Forever">
                    <StringAnimationUsingKeyFrames Storyboard.TargetProperty="Text">
                        <DiscreteStringKeyFrame KeyTime="0:0:0" Value="textBoxA" />
                        <DiscreteStringKeyFrame KeyTime="0:0:1" Value="B" />
                    </StringAnimationUsingKeyFrames>

                    <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground.Color">
                        <DiscreteColorKeyFrame KeyTime="0:0:0" Value="Red" />
                        <DiscreteColorKeyFrame KeyTime="0:0:1" Value="Blue" />
                    </ColorAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Page.Triggers>
</Page>

   
    
    
    
    
    
     


Use ColorAnimationUsingKeyFrames to animate the foreground color of a TextBlock


   
      

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid TextBlock.FontSize="192">
        <TextBlock Name="txtblk" Foreground="Black"
                   HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Grid> 
    <Page.Triggers>
        <EventTrigger RoutedEvent="Canvas.Loaded">
            <BeginStoryboard>
                <Storyboard TargetName="txtblk" Duration="0:0:2" RepeatBehavior="Forever">
                    <StringAnimationUsingKeyFrames Storyboard.TargetProperty="Text">
                        <DiscreteStringKeyFrame KeyTime="0:0:0" Value="textBoxA" />
                        <DiscreteStringKeyFrame KeyTime="0:0:1" Value="B" />
                    </StringAnimationUsingKeyFrames>

                    <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground.Color">
                        <DiscreteColorKeyFrame KeyTime="0:0:0" Value="Red" />
                        <DiscreteColorKeyFrame KeyTime="0:0:1" Value="Blue" />
                    </ColorAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Page.Triggers>
</Page>

   
    
    
    
    
    
     


Animate Width and Height of a Rectangle


   
     

<Window x:Class="Main"
  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="rect1Storyboard" Storyboard.TargetName="rect1">
      <ParallelTimeline>
        <DoubleAnimation To="50" Duration="0:0:10" FillBehavior="Stop" Storyboard.TargetProperty="Width" />
        <DoubleAnimation To="50" Duration="0:0:5" FillBehavior="HoldEnd" AccelerationRatio="0.5" DecelerationRatio="0.25" Storyboard.TargetProperty="Height" />
      </ParallelTimeline>
    </Storyboard>
  </Window.Resources>
  <Window.Triggers>
    <EventTrigger RoutedEvent="Rectangle.Loaded" SourceName="rect1">
      <BeginStoryboard Storyboard="{StaticResource rect1Storyboard}" />
    </EventTrigger>
  </Window.Triggers>
  <Grid>
    <Rectangle x:Name="rect1" Margin="10" Width="100" Height="100" Fill="Firebrick" Grid.Column="1" />
  </Grid>
</Window>

   
    
    
    
    
     


Animate Width and Height of a Ellipse


   
     

<Window x:Class="Main"
  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="ellipse1Storyboard" Storyboard.TargetName="ellipse1">
      <ParallelTimeline>
        <DoubleAnimation To="50" Duration="0:0:5" AccelerationRatio="0.25" DecelerationRatio="0.25" Storyboard.TargetProperty="Width" RepeatBehavior="5x" />
        <DoubleAnimation To="50" Duration="0:0:5" AccelerationRatio="0.5" DecelerationRatio="0.25" Storyboard.TargetProperty="Height" RepeatBehavior="5x" SpeedRatio="4" />
      </ParallelTimeline>
    </Storyboard>
  </Window.Resources>
  <Window.Triggers>
    <EventTrigger RoutedEvent="Ellipse.Loaded" SourceName="ellipse1">
      <BeginStoryboard Storyboard="{DynamicResource ellipse1Storyboard}" />
    </EventTrigger>
  </Window.Triggers>
  <Grid>
    <Ellipse x:Name="ellipse1" Margin="10" Width="100" Height="100" Fill="CornflowerBlue" />
  </Grid>
</Window>