Gewusst wie: Animieren eines Rechtecks

Aktualisiert: November 2007

In diesem Beispiel wird veranschaulicht, wie Änderungen an der Größe und Position eines Rechtecks animiert werden.

Beispiel

Das folgende Beispiel verwendet eine Instanz der RectAnimation-Klasse, um die Rect-Eigenschaft von RectangleGeometry zu animieren, wodurch Änderungen an der Größe und Position des Rechtecks animiert werden.

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 RectAnimationExample : Page
    {
        public RectAnimationExample()
        {

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

            RectangleGeometry myRectangleGeometry = new RectangleGeometry();
            myRectangleGeometry.Rect = new Rect(0, 200, 100, 100);

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

            Path myPath = new Path();
            myPath.Fill = Brushes.LemonChiffon;
            myPath.StrokeThickness = 1;
            myPath.Stroke = Brushes.Black;
            myPath.Data = myRectangleGeometry;

            RectAnimation myRectAnimation = new RectAnimation();
            myRectAnimation.Duration = TimeSpan.FromSeconds(2);
            myRectAnimation.FillBehavior = FillBehavior.HoldEnd;

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

            // Set the From and To properties of the animation.
            myRectAnimation.From = new Rect(0, 200, 100, 100);
            myRectAnimation.To = new Rect(600, 50, 200, 50);

            // Set the animation to target the Rect property
            // of the object named "MyAnimatedRectangleGeometry."
            Storyboard.SetTargetName(myRectAnimation, "MyAnimatedRectangleGeometry");
            Storyboard.SetTargetProperty(
                myRectAnimation, new PropertyPath(RectangleGeometry.RectProperty));

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

            // 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" >
  <StackPanel Orientation="Vertical" HorizontalAlignment="Center">
    <Path Stroke="Black" StrokeThickness="1" Fill="LemonChiffon">
      <Path.Data>
        <RectangleGeometry x:Name="myRectangleGeometry" Rect="0,200,100,100" />
      </Path.Data>
      <Path.Triggers>
        <EventTrigger RoutedEvent="Path.Loaded">
          <BeginStoryboard>
            <Storyboard>

              <!-- Animate the Rect property of the RectangleGeometry which causes the
              rectangle to animate postion and size. -->
              <RectAnimation
              Storyboard.TargetName="myRectangleGeometry"
              Storyboard.TargetProperty ="Rect"
              Duration="0:0:2" FillBehavior="HoldEnd" From="0,200,100,100" To="600,50,200,50" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Path.Triggers>
    </Path>
  </StackPanel>
</Page>

Siehe auch

Last updated on 2008-08-20

Freigeben über

Gewusst wie: Animieren eines Rechtecks

Beispiel

Siehe auch

Konzepte

Referenz

Weitere Ressourcen

Zusätzliche Ressourcen