Use StringAnimationUsingKeyFrames to animate the text value of a TextBlock

image_pdfimage_print


   
      


<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>

   
    
    
    
    
    
     


Four Sided Bounce

image_pdfimage_print


   
      

<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>

   
    
    
    
    
    
     


Discrete Double Key Frame

image_pdfimage_print


   
      

<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>

   
    
    
    
    
    
     


Simple Path Animation

image_pdfimage_print

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>

   
    
    
    
    
    
     


Start the animation with Path is loaded

image_pdfimage_print


   
      

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

    <Path Canvas.Left="150" Canvas.Top="150" StrokeThickness="25"
          Data="M 0 -100 
                C -55 -100, -100  -55, -100 0
                S  55 -100,    0 -100">
        <Path.Stroke>
            <LinearGradientBrush SpreadMethod="Repeat">
                <LinearGradientBrush.Transform>
                    <TranslateTransform x:Name="xform" /> 
                </LinearGradientBrush.Transform>
                <LinearGradientBrush.GradientStops>
                    <GradientStop Offset="0.00" Color="Red" />
                    <GradientStop Offset="0.14" Color="Orange" />
                    <GradientStop Offset="1.00" Color="Red" />
                </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
        </Path.Stroke>
        <Path.Triggers>
            <EventTrigger RoutedEvent="Path.Loaded">
                <BeginStoryboard>
                    <Storyboard TargetName="xform" TargetProperty="X">
                        <DoubleAnimation From="0" To="621" 
                                         Duration="0:0:2"
                                         RepeatBehavior="Forever" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Path.Triggers>
    </Path>
</Canvas>

   
    
    
    
    
    
     


Matrix Animated Button

image_pdfimage_print


   
      

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

    <Canvas.Resources>
        <PathGeometry x:Key="path"
                      Figures="M 0 0 C 300 0, 400 400, 700 200
                               S 0 300 600 576 S 400 700 100 200" />
    </Canvas.Resources>

    <Path Stroke="Black" Data="{StaticResource path}" />

    <Button>
        Button
        <Button.RenderTransform>
            <MatrixTransform x:Name="xform" />
        </Button.RenderTransform>
    </Button>

    <Canvas.Triggers>
        <EventTrigger RoutedEvent="Canvas.Loaded">
            <BeginStoryboard>
                <Storyboard RepeatBehavior="Forever">
                    <MatrixAnimationUsingPath 
                        Storyboard.TargetName="xform"
                        Storyboard.TargetProperty="Matrix"
                        Duration="0:0:10" 
                        PathGeometry="{StaticResource path}"
                        DoesRotateWithTangent="True" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Canvas.Triggers>
</Canvas>

   
    
    
    
    
    
     


Bouncing Ball with ParallelTimeline

image_pdfimage_print


   
      

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:s="clr-namespace:System;assembly=mscorlib">


    <Ellipse Name="elips" Width="20" Height="20" Fill="Red" 
             Canvas.Left="200">

        <Ellipse.Triggers>
            <EventTrigger RoutedEvent="Ellipse.Loaded">
                <BeginStoryboard>
                    <Storyboard TargetName="elips" RepeatBehavior="Forever">
                        <DoubleAnimation 
                                Storyboard.TargetProperty="(Canvas.Top)"
                                From="96" To="490" Duration="0:0:1"
                                AutoReverse="True" 
                                AccelerationRatio="1" />

                        <ParallelTimeline BeginTime="0:0:0.98" 
                                          AutoReverse="True">

                            <DoubleAnimation Storyboard.TargetProperty="Width"
                                             To="32" Duration="0:0:0.02" />

                            <DoubleAnimation Storyboard.TargetProperty="Height"
                                             To="16" Duration="0:0:0.02" />

                            <DoubleAnimation 
                                    Storyboard.TargetProperty="(Canvas.Left)"
                                    From="0" To="-4"  Duration="0:0:0.02"
                                    IsAdditive="True" />
                        </ParallelTimeline>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Ellipse.Triggers>
    </Ellipse>
</Canvas>