Gewusst wie: Animieren eines Rechtecks

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.

Imports Microsoft.VisualBasic
Imports System
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Shapes
Imports System.Windows.Media.Animation
Imports System.Windows.Media

Namespace SDKSamples
    Public Class RectAnimationExample
        Inherits Page
        Public Sub New()

            ' Create a NameScope for this page so that
            ' Storyboards can be used.
            NameScope.SetNameScope(Me, New NameScope())

            Dim myRectangleGeometry As New RectangleGeometry()
            myRectangleGeometry.Rect = New Rect(0, 200, 100, 100)

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

            Dim myPath As New Path()
            With myPath
                .Fill = Brushes.LemonChiffon
                .StrokeThickness = 1
                .Stroke = Brushes.Black
                .Data = myRectangleGeometry
            End With

            Dim myRectAnimation As New RectAnimation()
            With myRectAnimation
                .Duration = TimeSpan.FromSeconds(2)
                .FillBehavior = FillBehavior.HoldEnd

                ' Set the animation to repeat forever. 
                .RepeatBehavior = RepeatBehavior.Forever

                ' Set the From and To properties of the animation.
                .From = New Rect(0, 200, 100, 100)
                .To = New Rect(600, 50, 200, 50)
            End With

            ' 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.
            Dim ellipseStoryboard As New Storyboard()
            ellipseStoryboard.Children.Add(myRectAnimation)

            ' Start the storyboard when the Path loads.
            AddHandler myPath.Loaded, Sub(sender As Object, e As RoutedEventArgs) ellipseStoryboard.Begin(Me)

            Dim containerCanvas As New Canvas()
            containerCanvas.Children.Add(myPath)

            Content = containerCanvas
        End Sub
    End Class
End Namespace

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

Referenz

RectAnimation

Rect

RectangleGeometry

Konzepte

Übersicht über Animationen

Grafiken und Multimedia

Weitere Ressourcen

Gewusst-wie-Themen zu Grafiken

Animation und zeitliche Steuerung

Gewusst-wie-Themen zu Animation und Zeitsteuerung