How to: Animate an EllipseGeometry
This example shows how to animate a Geometry within a Path element. In the following example, a PointAnimation is used to animate the Center of an EllipseGeometry.
Example
<!-- EllipseGeometryExample.xaml
This example shows how to animate an EllipseGeometry. -->
<Page
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
WindowTitle="EllipseGeometry Animation Example">
<Canvas Height="400" Width="400" Margin="20">
<Path Name="myPathShape"
Fill="Blue" Stroke="Black" StrokeThickness="5">
<Path.Data>
<EllipseGeometry x:Name="MyEllipseGeometry"
Center="200,200" RadiusX="25" RadiusY="50" />
</Path.Data>
<Path.Triggers>
<!-- Animates the Center position of the
EllipseGeometry. -->
<EventTrigger RoutedEvent="Path.Loaded">
<BeginStoryboard>
<Storyboard>
<PointAnimation
Storyboard.TargetName="MyEllipseGeometry"
Storyboard.TargetProperty="Center"
From="200,200" To="50,50" Duration="0:0:5"
AutoReverse="true" RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Path.Triggers>
</Path>
</Canvas>
</Page>
// EllipseGeometryExample.cs
//
// This sample demonstrates how to animate the center
// position of an EllipseGeometry using a PointAnimation.
using System;
using System.Windows;
using System.Windows.Navigation;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Controls;
namespace Microsoft.Samples.Animation.AnimatePathShapeSample
{
public class EllipseGeometryExample : Page {
public EllipseGeometryExample()
{
NameScope.SetNameScope(this, new NameScope());
WindowTitle = "EllipseGeometry Animation Example";
Canvas myCanvas = new Canvas();
myCanvas.Width = 400;
myCanvas.Height = 400;
myCanvas.Margin = new Thickness(20);
// Create a Path object to contain the geometry.
System.Windows.Shapes.Path myPath =
new System.Windows.Shapes.Path();
myPath.Fill = System.Windows.Media.Brushes.Blue;
myPath.Stroke = System.Windows.Media.Brushes.Black;
myPath.StrokeThickness = 5;
// Create an EllipseGeometry.
System.Windows.Media.EllipseGeometry myEllipseGeometry =
new System.Windows.Media.EllipseGeometry();
myEllipseGeometry.Center = new System.Windows.Point(200, 200);
myEllipseGeometry.RadiusX = 25;
myEllipseGeometry.RadiusY = 50;
// Register a name for the geometry so that it can
// be targeted by animations.
this.RegisterName("MyEllipseGeometry", myEllipseGeometry);
// Add the geometry to the Path.
myPath.Data = myEllipseGeometry;
myCanvas.Children.Add(myPath);
this.Content = myCanvas;
// Create a PointAnimation to animate the center of the ellipse.
PointAnimation myPointAnimation = new PointAnimation();
myPointAnimation.From = new System.Windows.Point(200, 200);
myPointAnimation.To = new System.Windows.Point(50, 50);
myPointAnimation.Duration =
new Duration(TimeSpan.FromMilliseconds(5000));
myPointAnimation.AutoReverse = true;
myPointAnimation.RepeatBehavior = RepeatBehavior.Forever;
Storyboard.SetTargetName(myPointAnimation, "MyEllipseGeometry");
Storyboard.SetTargetProperty(myPointAnimation,
new PropertyPath(EllipseGeometry.CenterProperty));
Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myPointAnimation);
// Use an anonymous event handler to begin the animation
// when the path is loaded.
myPath.Loaded += delegate(object sender, RoutedEventArgs args)
{
myStoryboard.Begin(myPath);
};
}
}
}
' EllipseGeometryExample.cs
'
' This sample demonstrates how to animate the center
' position of an EllipseGeometry using a PointAnimation.
Imports System
Imports System.Windows
Imports System.Windows.Navigation
Imports System.Windows.Media
Imports System.Windows.Media.Animation
Imports System.Windows.Shapes
Imports System.Windows.Controls
Namespace Microsoft.Samples.Animation.AnimatePathShapeSample
' Create the demonstration.
Public Class PathElementAnimationExample
Inherits Page
Private Dim WithEvents myPath As Path
Private Dim myStoryboard As Storyboard
Public Sub New()
NameScope.SetNameScope(Me, new NameScope())
Me.WindowTitle = "EllipseGeometry Animation Example"
Dim myCanvas As New Canvas()
myCanvas.Width = 400
myCanvas.Height = 400
myCanvas.Margin = New Thickness(20)
' Create a Path object to contain the geometry.
myPath = New Path()
myPath.Fill = Brushes.Blue
myPath.Stroke = Brushes.Black
myPath.StrokeThickness = 5
' Create an EllipseGeometry.
Dim myEllipseGeometry As New EllipseGeometry()
myEllipseGeometry.Center = New System.Windows.Point(200, 200)
myEllipseGeometry.RadiusX = 25
myEllipseGeometry.RadiusY = 50
' Register a name for the geometry so that it can
' be targeted by animations.
Me.RegisterName("MyEllipseGeometry", myEllipseGeometry)
' Add the geometry to the Path.
myPath.Data = myEllipseGeometry
myCanvas.Children.Add(myPath)
Me.Content = myCanvas
' Create a PointAnimation to animate the center of the Ellipse.
Dim myPointAnimation As New PointAnimation()
myPointAnimation.From = New System.Windows.Point(200, 200)
myPointAnimation.To = New System.Windows.Point(50, 50)
myPointAnimation.Duration = _
New Duration(TimeSpan.FromMilliseconds(5000))
myPointAnimation.AutoReverse = True
myPointAnimation.RepeatBehavior = RepeatBehavior.Forever
Storyboard.SetTargetName(myPointAnimation, "MyEllipseGeometry")
Storyboard.SetTargetProperty(myPointAnimation, _
new PropertyPath(EllipseGeometry.CenterProperty))
myStoryboard = New Storyboard()
myStoryboard.Children.Add(myPointAnimation)
End Sub
' Start the animation when the path is loaded.
Private Sub myPath_Loaded(ByVal sender as object, ByVal args as RoutedEventArgs) Handles myPath.Loaded
myStoryboard.Begin(myPath)
End Sub
End Class
End Namespace