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

Für die SimpleButton-Steuerelementvorlage können keine Statusä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. Zeichnen Sie eine SimpleButton-Steuerelementvorlage auf der Zeichenfläche von Expression Blend.

   Tipp:
   Die Steuerelemente für einfache Stile stehen in der Objektbibliothek auf der Registerkarte Steuerelemente unter der Kategorie Einfacher Stil 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. Klicken Sie mit der rechten Maustaste unter Objekte und Zeitachsen auf die Schaltfläche, zeigen Sie auf Steuerelementteile bearbeiten (Vorlage), und klicken Sie dann auf Vorlage bearbeiten. Wenn Sie das Ressourcenverzeichnis SimpleStyles.xaml nicht ändern möchten, klicken Sie anstatt auf Vorlage bearbeiten auf Kopie 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 oberhalb der Elementstruktur im Interaktionspanel auf die Schaltfläche Zurück zum Anfang, um den Vorlagenbearbeitungsmodus zu verlassen und in den Dokumentbereich zurückzukehren. Klicken Sie unter Objekte und Zeitachsen mit der rechten Maustaste auf das Element, dessen Vorlage Sie bearbeiten möchten, zeigen Sie auf Steuerelementteile bearbeiten (Vorlage), und klicken Sie dann auf Vorlage bearbeiten, um zum Vorlagenbearbeitungsmodus für eine vorhandene Vorlage zurückzukehren.

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

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

5. Zeichnen Sie ein Rectangle-Objekt  in das Raster.

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

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

   Tipp:

   Im untergeordneten Border-Element der ursprünglichen Vorlage wurde die Fill-Eigenschaft (Füllung) der Vorlage mithilfe von Vorlagenbindung an die Background-Eigenschaft (Hintergrund) des Steuerelements gebunden, auf das die Vorlage angewendet wird. Mit der Vorlagenbindung können Sie in Ihrer Vorlage einige der Eigenschaften verwenden, die für das Steuerelement festgelegt sind. 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 (Füllung) in der Vorlage eine Standardfarbe festgelegt.

8. Klicken Sie im Interaktionspanel unter Auslöser 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 Mausbewegung ü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 des Interaktionspanels anpassen, um unter Auslöser alle Auslöser und Aktionen anzeigen zu können. Ändern Sie die Größe der Fenster mit der Maus.

9. Verschieben Sie unter Objekte und Zeitachsen die Position auf 1 Sekunde, und legen Sie dann im Eigenschaftenpanel unter Pinsel einen neuen Wert für die Fill-Eigenschaft (Füllung) 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 zur Fill-Eigenschaft mit der Einstellung 1 Sekunde vor, wenn sich der Mauszeiger über die Schaltfläche bewegt.

10. Klicken Sie im Interaktionspanel unter Auslöser erneut auf den Auflö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 die Schaltfläche Neue Aktion hinzufügen. Erstellen Sie eine Animationszeitachse, die ausgeführt wird, wenn sich der Mauszeiger 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 unter Auslöser erstellen.

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

Siehe auch

Konzepte

SimpleButton-Steuerelementvorlage

Hinzufügen oder Entfernen eines Auslösers

Auslöser (Übersicht)

Erstellen einer einfachen Animation