Weiterführende Themen: Hinzufügen einer Animation zu einer Schaltfläche

Für den SimpleButton -Stil können keine Zustandsänderungen animiert werden. Stattdessen legt sie eine Pinselressource fest, wenn es zu Zustandsänderungen kommt. In Microsoft Expression Blend können Sie nicht von einer Pinselressource zu einer Farbe animieren. Im folgenden Verfahren wird eine Alternative gezeigt, bei der Eigenschaftsauslöser zum Starten von Animationszeitachsen verwendet werden.

So animieren Sie eine Schaltfläche

1. Ziehen Sie ein SimpleButton -Objekt auf die Zeichenfläche in Expression Blend.

   Tipp:
   Die einfachen Stilsteuerelemente stehen im Objektepanel in der Kategorie Stile unter Einfache Stile zur Verfügung. Nachdem Sie ein Steuerelement für einen einfachen Stil in der Liste ausgewählt haben, können Sie es auf der Zeichenfläche zeichnen.

2. Rechtsklicken Sie auf die Schaltfläche im Panel Objekte und Zeitachsen, zeigen Sie auf Vorlage bearbeiten und klicken Sie dann auf Aktuelle Vorlage bearbeiten. Wenn Sie das Ressourcenverzeichnis SimpleStyles.xaml nicht ändern möchten, klicken Sie auf Kopie bearbeiten anstatt auf Aktuellen bearbeiten. Es wird eine neue Vorlage erstellt, die Sie im Dokument speichern können.

   Weitere Informationen zum Erstellen von Kopien finden Sie unter Erstellen einer Ressource.

   Tipp:

   Klicken Sie im Panel Objekte und Zeitachsen oberhalb der Objektstruktur auf die Schaltfläche Bereich auf "<Bereichsname>" zurücksetzen, um den Vorlagenbearbeitungsmodus zu verlassen und in den Dokumentbereich zurückzukehren. Rechtsklicken Sie im Panel Objekte und Zeitachsen auf das Objekt, dessen Vorlage Sie bearbeiten möchten, zeigen Sie auf Vorlage bearbeiten und klicken Sie dann auf Aktuelle Vorlage bearbeiten, um zum Vorlagenbearbeitungsmodus für eine vorhandene Vorlage zurückzukehren.

3. Löschen Sie im Bearbeitungsbereich der Steuerelementvorlage das untergeordnete Border -Objekt des Grid -Objekts.

4. Doppelklicken Sie auf das Grid -Objekt, um es zu aktivieren, sodass Sie untergeordnete Objekte hinzufügen können.

5. Zeichnen Sie ein Rectangle in das Raster.

6. Klicken Sie mit der rechten Maustaste auf das Rectangle -Objekt, zeigen Sie auf Sortieren, und klicken Sie dann auf In den Hintergrund um es in einer Ebene hinter dem ContentPresenter -Objekt anzuordnen.

7. Legen Sie im Eigenschaftenpanel unter Pinsel einen neuen Wert für die Fill -Eigenschaft fest. Dabei handelt es sich um die Standardfarbe für die Schaltfläche.

   Tipp:

   Im untergeordneten Border -Objekt der ursprünglichen Vorlage wurde die Fill -Eigenschaft der Vorlage an die Background -Eigenschaft des Steuerelements gebunden, auf das die Vorlage angewendet wird. Mit der Vorlagenbindung können Sie Objekteigenschaften auf die Vorlage übertragen. Auf diese Weise können Sie mehrere Schaltflächen erstellen, die unterschiedliche Hintergrundfarben aufweisen, aber dennoch dieselbe Vorlage verwenden. Sie können jedoch nicht von einer vorlagengebundenen Eigenschaft zu einer bestimmten Farbe animieren. Aus diesem Grund wurde für die Fill -Eigenschaft in der Vorlage eine Standardfarbe festgelegt.

8. Klicken Sie im Auslöserpanel auf den Auslöser IsMouseOver = True , um die Auslöseraufzeichnung zu aktivieren. Klicken Sie neben Aktionen beim Aktivieren auf die Schaltfläche Neue Aktion hinzufügen, um eine Animationszeitachse hinzuzufügen. Wenn Sie noch nicht über eine Zeitachse verfügen, die Sie bei der Zeigerbewegung über die Schaltfläche auslösen möchten, wird das Fenster Zeitachse erforderlich angezeigt. Klicken Sie auf OK, um eine neue Zeitachse zu erstellen und mit der Aufzeichnung zu beginnen.

   Tipp:
   Möglicherweise müssen Sie die Fenster im Auslöserpanel anpassen, um alle Auslöser und Aktionen anzuzeigen. Ändern Sie die Größe der Fenster mit der Maus.

9. Verschieben Sie im Panel Objekte und Zeitachsen die Position auf 1 Sekunde, und legen Sie dann im Eigenschaftenpanel unter Pinsel einen neuen Wert für die Fill -Eigenschaft fest.

   Sobald Sie die Fill -Eigenschaft (Füllung) ändern, wird ein Keyframe auf der Zeitachse angezeigt. Sie brauchen keinen Keyframe an der Position 0 Sekunden festlegen. Die Zeitachse nimmt eine Animation von der vorherigen Fill-Eigenschaft (Füllung) zur Fill-Eigenschaft mit der Einstellung 1 Sekunde vor, wenn sich der Zeiger über die Schaltfläche bewegt.

10. Klicken Sie im Auslöserpanel erneut auf den Auslöser IsMouseOver = True , um die Animationszeitachse zu verlassen und zum Aufzeichnungsmodus für den Auslöser zurückzukehren. Klicken Sie neben Aktionen beim Deaktivieren auf Neue Aktion hinzufügen. Erstellen Sie eine Animationszeitachse, die ausgeführt wird, wenn sich der Zeiger von der Schaltfläche entfernt. Sie können auch eine vorhandene Animationszeitachse auswählen. Sie könnten beispielsweise die vorherige Zeitachse verwenden, aber die Stop -Methode für die Zeitachse auswählen.

11. Wenn Sie möchten, können Sie Animationszeitachsen für andere Zustände im Auslöserpanel erstellen.

12. Testen Sie die Anwendung (F5), um die Effekte zu sehen.

Siehe auch

Aufgaben

Hinzufügen oder Entfernen eines Auslösers aus einem WPF-Steuerelement
Erstellen einer einfachen Animation

Konzepte

SimpleButton
Verwendung von Auslösern, um das Verhalten eines WPF-Steuerelements festzulegen

Copyright © 2011 Microsoft Corporation. Alle Rechte vorbehalten.