Comment : animer la taille d'un ArcSegment

Mise à jour : novembre 2007

Cet exemple montre comment animer la propriété Size d'un ArcSegment.

Exemple

L'exemple suivant crée un ArcSegment qui anime sa Size lors du chargement à l'écran.

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Shapes;
using System.Windows.Media.Animation;
using System.Windows.Media;

namespace SDKSamples
{
    public class SizeAnimationExample : Page
    {
        public SizeAnimationExample()
        {

            // Create a NameScope for this page so that
            // Storyboards can be used.
            NameScope.SetNameScope(this, new NameScope());

            // Create an ArcSegment to define the geometry of the path.
            // The Size property of this segment is animated.
            ArcSegment myArcSegment = new ArcSegment();
            myArcSegment.Size = new Size(90, 80);
            myArcSegment.SweepDirection = SweepDirection.Clockwise;
            myArcSegment.Point = new Point(500, 200);

            // Assign the segment a name so that
            // it can be targeted by a Storyboard.
            this.RegisterName(
                "myArcSegment", myArcSegment);

            PathSegmentCollection myPathSegmentCollection = new PathSegmentCollection();
            myPathSegmentCollection.Add(myArcSegment);

            // Create a PathFigure to be used for the PathGeometry of myPath.
            PathFigure myPathFigure = new PathFigure();

            // Set the starting point for the PathFigure specifying that the
            // geometry starts at point 100,200.
            myPathFigure.StartPoint = new Point(100, 200);

            myPathFigure.Segments = myPathSegmentCollection;

            PathFigureCollection myPathFigureCollection = new PathFigureCollection();
            myPathFigureCollection.Add(myPathFigure);

            PathGeometry myPathGeometry = new PathGeometry();
            myPathGeometry.Figures = myPathFigureCollection;

            // Create a path to draw a geometry with.
            Path myPath = new Path();
            myPath.Stroke = Brushes.Black;
            myPath.StrokeThickness = 1;

            // specify the shape of the path using the path geometry.
            myPath.Data = myPathGeometry;

            SizeAnimation mySizeAnimation = new SizeAnimation();
            mySizeAnimation.Duration = TimeSpan.FromSeconds(2);

            // Set the animation to repeat forever. 
            mySizeAnimation.RepeatBehavior = RepeatBehavior.Forever;

            // Set the From and To properties of the animation.
            mySizeAnimation.From = new Size(90, 80);
            mySizeAnimation.To = new Size(200, 200);

            // Set the animation to target the Size property
            // of the object named "myArcSegment."
            Storyboard.SetTargetName(mySizeAnimation, "myArcSegment");
            Storyboard.SetTargetProperty(
                mySizeAnimation, new PropertyPath(ArcSegment.SizeProperty));

            // Create a storyboard to apply the animation.
            Storyboard ellipseStoryboard = new Storyboard();
            ellipseStoryboard.Children.Add(mySizeAnimation);

            // Start the storyboard when the Path loads.
            myPath.Loaded += delegate(object sender, RoutedEventArgs e)
            {
                ellipseStoryboard.Begin(this);
            };

            Canvas containerCanvas = new Canvas();
            containerCanvas.Children.Add(myPath);

            Content = containerCanvas;
        }
    }
}

<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" >
    <Canvas HorizontalAlignment="Left" Margin="0" >

      <!-- Create an arc on the screen that animates its size when it loads. -->
      <Path Stroke="Black" StrokeThickness="2" >
        <Path.Data>
          <PathGeometry>
            <PathGeometry.Figures>
              <PathFigureCollection>
                <PathFigure StartPoint="100,200">
                  <PathFigure.Segments>
                    <PathSegmentCollection>
                      <ArcSegment x:Name="myArcSegment" Size="90,80" 
                      SweepDirection="Clockwise"  Point="500,200" />
                    </PathSegmentCollection>
                  </PathFigure.Segments>
                </PathFigure>
              </PathFigureCollection>
            </PathGeometry.Figures>
          </PathGeometry>
        </Path.Data>
        <Path.Triggers>
          <EventTrigger RoutedEvent="Path.Loaded">
            <BeginStoryboard Name="myBeginStoryBoard">
              <Storyboard>

                <!-- Animate the size of the ArcSegment to a width and height of 200. -->
                <SizeAnimation
                Storyboard.TargetName="myArcSegment"
                Storyboard.TargetProperty="Size"
                From="90,80"
                To="200,200"
                Duration="0:0:2" />

              </Storyboard>
            </BeginStoryboard>
          </EventTrigger>
        </Path.Triggers>
      </Path>
    </Canvas>

</Page>

Pour des exemples de géométrie et d'animation supplémentaires, consultez Géométries, exemple.

Voir aussi

Concepts

Vue d'ensemble de l'animation

Vue d'ensemble de Geometry

Référence

Size

ArcSegment

Autres ressources

Rubriques Comment relatives aux objets Geometry

Exemples de géométries

Animation et minutage

Rubriques Comment relatives à l'animation et au minutage

Exemples d'animation et de minutage