Share via

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

  • Artikel

This page applies to WPF projects only

Für den SimpleButton-Stil 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 ein SimpleButton-Objekt auf der Zeichenfläche von Expression Blend.

    Cc294783.alert_tip(DE-DE,Expression.30).gifTipp:

    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.

    Cc294783.alert_tip(DE-DE,Expression.30).gifTipp:

    Klicken Sie oberhalb der Objektstruktur im Panel Objekte und Zeitachsen auf Zurück zum AnfangCc294783.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(DE-DE,Expression.30).png, 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 RechteckCc294783.ae750268-92e8-403a-9e07-b662da4e9e1e(DE-DE,Expression.30).png in das Raster.

  6. Rechtsklicken Sie 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 (Füllung) des Rechtecks fest. Dabei handelt es sich um die Standardfarbe für die Schaltfläche.

    Cc294783.alert_tip(DE-DE,Expression.30).gifTipp:

    Im untergeordneten Border-Objekt der ursprünglichen Vorlage wurde die Fill-Eigenschaft (Füllung) der Vorlage mithilfe von Vorlagenbindung 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 (Füllung) 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ügenCc294783.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(DE-DE,Expression.30).png, 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.

    Cc294783.alert_tip(DE-DE,Expression.30).gifTipp:

    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 Cc294783.5626c9eb-40bb-450a-9ca1-3678e5abe429(DE-DE,Expression.30).png 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 Cc294783.fa3c696d-5463-4000-8a6b-650fe6759bf7(DE-DE,Expression.30).png 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 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 Neue Aktion hinzufügenCc294783.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(DE-DE,Expression.30).png. 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

Erstellen einer einfachen Animation

Konzepte

SimpleButton-Steuerelementvorlage

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