Windows apps
Collapse the table of content
Expand the table of content
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

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. -->
  WindowTitle="EllipseGeometry Animation Example">
  <Canvas Height="400" Width="400" Margin="20">

    <Path Name="myPathShape"
      Fill="Blue" Stroke="Black" StrokeThickness="5">
        <EllipseGeometry x:Name="MyEllipseGeometry" 
          Center="200,200" RadiusX="25" RadiusY="50" />

        <!-- Animates the Center position of the
             EllipseGeometry. -->
        <EventTrigger RoutedEvent="Path.Loaded">
                From="200,200" To="50,50" Duration="0:0:5" 
                AutoReverse="true" RepeatBehavior="Forever"/>
// 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;
            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");       
                new PropertyPath(EllipseGeometry.CenterProperty));
            Storyboard myStoryboard = new Storyboard();

            // Use an anonymous event handler to begin the animation 
            // when the path is loaded.
            myPath.Loaded +=  delegate(object sender, RoutedEventArgs args)

' 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
            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()

        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


        End Sub 

    End Class 
End Namespace

Community Additions

© 2018 Microsoft