Animation along a path : Path Animation « Windows Presentation Foundation « C# / CSharp Tutorial

1. C# / CSharp Tutorial
2. Windows Presentation Foundation
3. Path Animation

<Window x:Class="Animation.PathBasedAnimation"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="PathBasedAnimation" Height="400" Width="550">

    <Window.Resources>
        <PathGeometry x:Key="path">
            <PathFigure IsClosed="True">
                <ArcSegment Point="100,200" Size="15,10" SweepDirection="Clockwise"></ArcSegment>
                <ArcSegment Point="400,50" Size="5,5" ></ArcSegment>
                <ArcSegment Point="40,50" Size="5,5" ></ArcSegment>
            </PathFigure>
        </PathGeometry>
    </Window.Resources>
    <Window.Triggers>
        <EventTrigger RoutedEvent="Window.Loaded">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimationUsingPath Storyboard.TargetName="image"
                                      Storyboard.TargetProperty="(Canvas.Left)"
                                     PathGeometry="{StaticResource path}"
                                      Duration="0:0:5" RepeatBehavior="Forever" Source="X" />
                        <DoubleAnimationUsingPath Storyboard.TargetName="image"
                                      Storyboard.TargetProperty="(Canvas.Top)"
                                     PathGeometry="{StaticResource path}"
                                      Duration="0:0:5" RepeatBehavior="Forever" Source="Y" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Window.Triggers>
    <Canvas Margin="10">
        <Path Stroke="Red" StrokeThickness="1" Data="{StaticResource path}" Canvas.Top="10" Canvas.Left="10">
        </Path>
        <Rectangle Name="image" Width="10" Height="20" Stroke="Red">
        </Rectangle>
    </Canvas>
</Window>

24.112.Path Animation
	24.112.1.	Animation along a path
	24.112.2.	Simple Path Animation
	24.112.3.	Start the animation with Path is loaded
	24.112.4.	Path animation by code, duration, RepeatBehavior