Edit

Share via

How to: Animate an EllipseGeometry

  • Article

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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://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.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

See also