Windows apps
Collapse the table of content
Expand the table of content
Information
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. -->
<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

Animation Overview
Geometry Overview

Show:
© 2017 Microsoft