2 out of 2 rated this helpful - Rate this topic

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.

<!-- 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
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
Did you find this helpful?
(1500 characters remaining)
Thank you for your feedback
Show:
© 2014 Microsoft. All rights reserved.