Animieren von Objekten im XAML-DesignerAnimate objects in XAML Designer

Mit Blend für Visual Studio können Sie ganz einfach kurze Animationen erstellen, die Objekte verschieben oder sie ein-und ausblenden.Blend for Visual Studio lets you easily create short animations that move objects or fade them in and out, for example.

Zum Erstellen einer Animation benötigen Sie ein Storyboard .To create an animation, you need a storyboard . Ein Storyboard enthält eine oder mehrere Zeitachsen .A storyboard contains one or more timelines . Legen Sie auf einer Zeitachse Keyframes fest, um Änderungen an den Eigenschaften zu markieren.Set keyframes on a timeline to mark property changes. Beim Ausführen der Animation interpoliert Blend für Visual Studio dann die Eigenschaftsänderungen im festgelegten Zeitraum.Then, when you run the animation, Blend for Visual Studio interpolates the property changes over the designated period of time. Das Ergebnis ist ein reibungsloser Übergang.The result is a smooth transition. Sie können jede Eigenschaft animieren, die zu einem Objekt gehört, sogar nicht visuelle Eigenschaften.You can animate any property that belongs to an object, even nonvisual properties.

Die folgenden Abbildungen zeigen ein Storyboard mit dem Namen Storyboard1 .The following images shows a storyboard named Storyboard1 . Die Zeitachse enthält Keyframes, die die x- und y-Position eines Rechtecks markieren.The timeline contains keyframes that mark the X and Y position of a rectangle. Wenn diese Animation ausgeführt wird, wird das Rechteck nahtlos von einer Position zu einer anderen verschoben.When this animation runs, the rectangle moves from one position to another smoothly.

Storyboard für Animation in Blend für Visual Studio

Erstellen einer AnimationCreate an animation

  1. Um ein Storyboard zu erstellen, wählen Sie die Schaltfläche Storyboardoptionen im Fenster Objekte und Zeitachse und dann Neu aus.To create a storyboard, select the Storyboard Options button in the Objects and Timeline window, and then select New .

    Hinzufügen eines Storyboards in Blend für Visual Studio

  2. Geben Sie im Dialogfeld Storyboardressource erstellen einen Namen für das Storyboard ein.In the Create Storyboard Resource dialog box, enter a name for the storyboard.

  3. Fügen Sie in der Designansicht im Bereich Objekte ein Rechteck unten links auf der Seite hinzu.From the Assets panel in Design view, add a rectangle to the lower left-hand side of the page.

    Rechteck im Bereich „Objekte“ im XAML-Designer

  4. Bewegen Sie im Fenster Objekte und Zeitachse den gelben Zeitzeiger auf 3 Sekunden.In the Objects and Timeline window, move the yellow time pointer to 3 seconds.

    Zeitindikator in der Zeitachse

  5. Ziehen Sie das Rechteck in der Designansicht der Seite auf die rechte Seite der Seite.In the Design view for the page, drag the rectangle to the right-hand side of the page.

  6. Drücken Sie Wiedergeben , um zu sehen, wie sich das Rechteck von der linken zur rechten Seite der Seite bewegt.Press Play to watch the rectangle move from the left-hand side to the right-hand side of the page.

Experimentieren Sie mit anderen Änderungen am Rechteck zu unterschiedlichen Zeitpunkten.Play around with other changes to the rectangle at different points in time. Beispielsweise können Sie im Eigenschaftenfenster die Füllfarbe ändern oder die Ausrichtung umkehren.For example, you can change the fill color or flip the orientation in the Properties window.

Weitere Informationen:See also