Steuern des Startzeitpunkts eines Storyboards

Sie können den Startzeitpunkt eines Storyboards in der Microsoft Expression Blend-Anwendung auf folgende Arten steuern:

• Ziehen eines Verhaltens auf das Objekt, mit dem Sie das Storyboard steuern möchten. Sie können das Verhalten von ControlStoryboardAction oder, wenn Sie Zustände zum Erstellen einer Animation nutzen, das Verhalten GoToStateAction verwenden. Weitere Informationen finden Sie unter Hinzufügen eines Verhaltens zu einem Objekt.

• Sie können einen Auslöser erstellen, der das Storyboard beim Auftreten eines Ereignisses (wie dem Klicken auf eine Schaltfläche) oder – falls sich das Storyboard in einer Steuerelementvorlage befindet – bei der Änderung einer Eigenschaft ausführt.

  Hinweis:
  Auslöser sind in Microsoft Silverlight-Projekten nicht verfügbar.

• Sie können eine Ereignishandlermethode in einer CodeBehind-Datei erstellen, die die Begin -Methode (Beginn) des Storyboards aufruft.

Mit diesen Methoden können Sie ebenfalls steuern, wann das Storyboard gestoppt, angehalten und fortgesetzt wird, sich selbst entfernt oder bis ans Ende des Storyboards springt.

Je nach dem Bereich, in dem Sie arbeiten, variieren diese Methoden leicht.

Hinweis:
Die folgenden Verfahren beziehen sich auf Storyboards mit visuellen Animationen. Sie können jedoch auch auf Audio- oder Videostoryboards angewendet werden. Weitere Informationen finden Sie unter Übertragen einer Audio- oder Videodatei in das aktive Dokument.

Storyboards im Hauptbereich des Dokuments

Erstellen Sie ein Storyboard im Hauptbereich des Dokuments, sofern es eine wesentliche Funktion des Dokuments werden soll. Auf diese Weise wird es durch den Benutzer ausgelöst, der mit einem Steuerelement interagiert, das sich ebenfalls im Hauptbereich des Dokuments befindet.

So steuern Sie ein Storyboard im Hauptbereich des Dokuments mithilfe einer Ereignishandlermethode

1. Schließen Sie alle geöffneten Storyboards. Weitere Informationen finden Sie unter Öffnen oder Schließen eines Storyboards.

2. Wenn Sie in einem WPF-Projekt arbeiten, löschen Sie den Standardauslöser, der beim Erstellen des Storyboards für das Window.Loaded -Ereignis erstellt wurde. Weitere Informationen finden Sie unter Hinzufügen oder Entfernen eines Auslösers aus einem WPF-Steuerelement.

3. Wählen Sie im Panel Objekte und Zeitachsen ein Objekt aus, das bei Interaktion das Storyboard ausführen soll. Falls das Storyboard z. B. ausgelöst werden soll, wenn der Benutzer den Zeiger über einen Textblock führt, wählen Sie den Textblock aus.

4. Klicken Sie im Eigenschaftenpanel auf Ereignisse . Es wird eine Liste aller verfügbaren Ereignisse für das ausgewählte Objekt in alphabetischer Reihenfolge angezeigt.

   Tipp:
   Sie können eine kurze Beschreibung eines Ereignisses anzeigen, indem Sie den Zeiger über den Namen des Ereignisses bewegen. Es wird eine QuickInfo mit einer Beschreibung des Ereignisses angezeigt.

5. Suchen Sie das Ereignis, dem Sie Programmlogik hinzufügen möchten – zum Beispiel das MouseEnter MouseEnter-Ereignis (Mauseingabe).

6. Zur Generierung der leeren Ereignishandlermethode stehen Ihnen zwei Möglichkeiten zur Verfügung:

   • Doppelklicken Sie im Textblock neben dem Ereignisnamen. In Expression Blend wird ein Standardname für die Ereignishandlermethode generiert, der Name wird in den Textblock eingegeben, und für die leere Methode wird Code generiert.

   • Geben Sie einen Namen in den Textblock neben dem Ereignisnamen ein, und drücken Sie dann die EINGABETASTE, oder klicken Sie auf eine andere Position, damit der Textblock nicht mehr den Fokus besitzt. Namen von Ereignismethoden müssen mit einem Buchstaben beginnen. Falls der Methodenname noch nicht in der CodeBehind-Datei vorhanden ist, wird der Code für die leere Methode von Expression Blend generiert, und es wird der von Ihnen eingegebene Name verwendet.

7. Expression Blend öffnet die CodeBehind-Datei und fügt dann die leere Ereignishandlermethode ein.

   private void TextBlock_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e)
   {
   
   }
   

   Private Sub textBlock_MouseEnter(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseEventArgs)
   
   End Sub
   

8. Wenn Sie die CodeBehind-Datei geöffnet und die Ereignishandlermethode eingefügt haben, können Sie die folgenden fett formatierten Codezeilen innerhalb der Ereignishandlermethode einfügen:

   private void TextBlock_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e)
   {
   
       Storyboard myStoryboard;
        
   
           myStoryboard = (Storyboard)this.Resources["Storyboard1"];
        
   
           myStoryboard.Begin(this);
        
   }
   

   Private Sub textBlock_MouseEnter(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseEventArgs)
   
       Dim myStoryboard As New Storyboard
        
   
           myStoryboard = CType(Me.Resources("Storyboard1"), Storyboard)
        
   
           myStoryboard.Begin(Me)
        
   End Sub
   

9. Speichern Sie die Dateien, und drücken Sie F5, um die Anwendung zu erstellen und zu testen. Bewegen Sie beispielsweise die Maus über den Textblock, während die Anwendung ausgeführt wird, um zu prüfen, ob die Animation gestartet wird.

   Hinweis:
   Falls die Animation nicht zum Startpunkt zurückkehrt, wenn Sie die Maus erneut über den Textblock führen, könnte dies daran liegen, dass Sie an der 0-Sekunden-Marke keinen Keyframe festgelegt haben.

So steuern Sie ein Storyboard im Hauptbereich des Dokuments mithilfe eines Ereignisauslösers (nur WPF)

Wenn Sie in einem Windows Presentation Foundation (WPF)-Projekt im Bereich des Hauptdokuments ein Storyboard erstellen, wird in Expression Blend automatisch ein neuer Auslöser erstellt, der das Storyboard beim Laden des Anwendungsfensters ausführt. Sie können diesen Auslöser im Auslöserpanel anzeigen.

Der von Expression Blend bei der Erstellung eines Storyboards festgelegte Auslöser

Wenn Sie diesen Auslöser nicht ändern, wird das Storyboard ausgeführt, sobald die Anwendung gestartet wird. Sie können dieses Verhalten durch die folgende Vorgehensweise ändern.

1. Schließen Sie alle geöffneten Storyboards. Weitere Informationen finden Sie unter Öffnen oder Schließen eines Storyboards.

2. Wenn bei der Erstellung des Storyboards ein Standardauslöser für das Window . Loaded -Ereignis (Fenster geladen) erstellt wurde und das Storyboard beim Start der Anwendung nicht ausgeführt werden soll, wählen Sie im Auslöserpanel die Option Window . Loaded aus. Sie können auch auf Ereignisauslöser hinzufügen  klicken, um einen neuen Standardereignisauslöser zu erstellen.

3. Wählen Sie im Panel Objekte und Zeitachsen ein Objekt aus, das bei Interaktion das Storyboard ausführen soll. Falls das Storyboard z. B. ausgelöst werden soll, wenn der Benutzer den Zeiger über einen Textblock führt, wählen Sie den Textblock aus.

4. Ändern Sie das Ereignis, durch das die Animation ausgelöst wird ( Window . Loaded (Fenster geladen), indem Sie die Dropdownmenüs im Auslöserpanel verwenden. Ändern Sie beispielsweise When Window.Loaded is raised zu When textblock.MouseEnter is raised .

5. Legen Sie die Aktion fest, die ausgeführt werden soll, wenn das Ereignis ausgelöst wird. Falls keine Aktion aufgeführt ist, klicken Sie auf Neue Aktion hinzufügen . Stellen Sie sicher, dass die Aktion auf den Namen des Storyboards festgelegt ist (z. B. Storyboard1), und dass die aufgerufene Methode Begin (Beginn) lautet. Alternativ dazu können Sie auch eine beliebige andere Methode auswählen, die für ein Storyboard gültig ist. Weitere Informationen finden Sie unter Hinzufügen oder Entfernen eines Auslösers aus einem WPF-Steuerelement.

Storyboards in Steuerelementvorlagen und Stilen

Manchmal wird von Microsoft Expression Blend ein Storyboard erstellt, zum Beispiel wenn Sie einem Eigenschafts- oder Ereignisauslöser beim Ändern einer Steuerelementvorlage eine Aktion hinzufügen. Weitere Informationen zum Verwenden von Stilen und Vorlagen finden Sie unter Formatieren eines Steuerelements, das Vorlagen unterstützt.

Hinweis:
Die folgenden Verfahren gelten für WPF-Projekte, aber Sie können Status verwenden, um Storyboards in Silverlight-Projekten zu steuern. Weitere Informationen finden Sie unter Ändern des Status als Reaktion auf eine Benutzerinteraktion und Hinzufügen von Animationen zum Abspielen nach Zustandsänderungen.

So steuern Sie ein Storyboard im Bereich einer Vorlage

1. Verwenden Sie eine der folgenden Methoden, um einen Stil oder eine Vorlage zur Bearbeitung zu öffnen:

   Hinweis:
   Informationen dazu, ob ein Stil oder eine Vorlage zu verwenden ist, finden Sie unter Formatieren eines Steuerelements, das Vorlagen unterstützt.

   Hinweis:
   Einige Objekte, zum Beispiel Pfadobjekte, unterstützen keine Vorlagen. Steuerelemente, z. B. Button und RadioButton bieten Unterstützung für Vorlagen.

   • Wählen Sie zum Erstellen einer neuen Vorlage auf der Zeichenfläche oder im Panel Objekte und Zeitachsen ein Objekt aus, klicken Sie dann im Menü Objekt auf Vorlage bearbeiten, und wählen Sie Kopie bearbeiten aus. Das Dialogfeld Ressource "Style" erstellen wird geöffnet. Wählen Sie den Ort aus, an dem Sie die Ressource definieren möchten, und klicken Sie dann auf OK. Weitere Informationen finden Sie unter Erstellen einer Formatvorlage.

   • Wählen Sie zum Erstellen eines neuen Stils auf der Zeichenfläche oder im Panel Objekte und Zeitachsen ein Objekt aus, klicken Sie dann im Menü Objekt auf Stil bearbeiten, und wählen Sie Kopie bearbeiten aus. Das Dialogfeld Ressource "Style" erstellen wird geöffnet. Wählen Sie den Ort aus, an dem Sie die Ressource definieren möchten, und klicken Sie dann auf OK. Weitere Informationen finden Sie unter Erstellen einer Formatvorlage.

   • Klicken Sie zum Öffnen einer vorhandenen Vorlage im Ressourcenpanel neben dem Stil auf die Schaltfläche Ressource bearbeiten . Klicken Sie anschließend im Panel Objekte und Zeitachsen mit der rechten Maustaste auf das Style-Element (Stil), klicken Sie auf Vorlage bearbeiten, und wählen Sie dann Aktuellen bearbeiten aus. Alternativ dazu können Sie auch ein Steuerelement auswählen, auf das bereits ein benutzerdefinierter Stil angewendet wird. Klicken Sie dann im Menü Objekt auf Vorlage bearbeiten, und wählen Sie Aktuellen bearbeiten aus.

   • Klicken Sie zum Öffnen eines vorhandenen Stils im Ressourcenpanel neben dem Stil auf Ressource bearbeiten . Alternativ dazu können Sie auch ein Steuerelement auswählen, auf das bereits ein benutzerdefinierter Stil angewendet wird. Klicken Sie dann im Menü Objekt auf Stil bearbeiten, und wählen Sie Aktuellen bearbeiten aus.

   • Um einen der einfachen Stile zu ändern, die im Lieferumfang von Expression Blend enthalten sind, klicken Sie im Werkzeugpanel auf Objekte , klicken auf die Kategorie Stile, klicken auf das Ressourcenverzeichnis Simple Styles (einfache Stile), wählen ein vordefiniertes Steuerelement aus und zeichnen es auf der Zeichenfläche, damit das Ressourcenverzeichnis Simple Styles.xaml im Ressourcenpanel zur Verfügung steht. Öffnen Sie anschließend den einfachen Stil oder die Vorlage mithilfe einer der vorstehenden Optionen. Wenn Sie das Ressourcenverzeichnis Simple Styles.xaml in Ihrem aktuellen Projekt ändern, hat dies keine Auswirkungen auf das Ressourcenverzeichnis Simple Styles.xaml in einem anderen Projekt, es sei denn, Sie kopieren die Datei Simple Styles.xaml vom aktuellen Projekt in das andere Projekt.

2. Achten Sie im Bearbeitungsbereich des Stils oder der Vorlage auf die neue Breadcrumb-Leiste in Expression Blend, die sich im oberen Bereich der Zeichenfläche befindet.

   Breadcrumb-Leiste mit ausgewähltem Vorlagenbearbeitungsmodus

   

   Durch Klicken auf die Schaltflächen in der Breadcrumb-Leiste können Sie schnell zwischen dem Vorlagenbearbeitungsmodus, dem Stilbearbeitungsmodus und dem Objektbearbeitungsbereich für das ausgewählte Objekt wechseln. Die Breadcrumb-Leiste wird für alle ausgewählten Objekte angezeigt, auf die ein benutzerdefinierter Stil oder eine benutzerdefinierte Vorlage angewendet wird.

3. Klicken Sie im Panel Objekte und Zeitachsen auf Neu .

   

   Das Dialogfeld Ressource "Storyboard" erstellen wird geöffnet.

   

4. Geben Sie einen Namen ein, und klicken Sie auf OK. Das Dialogfeld Ressource "Storyboard" erstellen wird geschlossen, und Expression Blend wechselt in den Zeitachsen-Aufzeichnungsmodus.

5. Erstellen Sie eine Animation, die sich nur auf die Objekte in dem von Ihnen bearbeiteten Stil oder der von Ihnen bearbeiteten Vorlage auswirkt.

   Hinweis:
   Sie können keine Objekte außerhalb des Stils oder der Vorlage animieren, die Sie ändern. Sie können jedoch vorhandene Objekte in dem Stil oder der Vorlage bearbeiten. Wenn Sie eine Vorlage ändern, können Sie die Elemente zudem unter dem Vorlagenknoten in einem Layoutpanel (wie z. B. Grid ) gruppieren und weitere Objekte zum Raster hinzufügen, die Sie dann animieren können.

6. Lösen Sie das neue Storyboard aus, indem Sie einen der folgenden Schritte ausführen:

   • Um das Storyboard einem vorhandenen Eigenschaftsauslöser hinzuzufügen, wählen Sie den Auslöser im Auslöserpanel aus und klicken in der unteren Hälfte des Auslöserpanels neben Aktionen beim Aktivieren bzw. Aktionen beim Deaktivieren auf Neue Aktion hinzufügen . Dies ist davon abhängig, ob das Storyboard bei Aktivierung oder Deaktivierung des Auslösers ausgeführt werden soll. Das neue Storyboard wird automatisch als Aktion hinzugefügt, die beim Aktivieren des Auslösers stattfindet.

   • Um das Storyboard einem neuen Eigenschaftsauslöser hinzuzufügen, klicken Sie auf Eigenschaftsauslöser hinzufügen  und ändern in der unteren Hälfte des Auslöserpanels den Standardwert für den Auslöser von target-element.IsCancel = False in die gewünschte Eigenschaft, und den dazugehörigen Wert (z. B. target-element.IsPressed = True ). Klicken Sie anschließend auf Neue Aktion hinzufügen . Das neue Storyboard wird automatisch als Aktion hinzugefügt, die beim Auslösen des Ereignisses stattfindet.

   • Um das Storyboard einem neuen Ereignisauslöser hinzuzufügen, klicken Sie auf Ereignisauslöser hinzufügen  und ändern in der unteren Hälfte des Auslöserpanels den Standardwert für den Auslöser von When target-element.Loaded is raised in das gewünschte Ereignis (z. B. When target-element.Click is raised ). Klicken Sie anschließend auf Neue Aktion hinzufügen . Das neue Storyboard wird automatisch als Aktion hinzugefügt, die beim Auslösen des Ereignisses stattfindet.

   Wichtig:
   Wählen Sie stets den Auslöser Standard zum Ausschalten des Auslöseraufzeichnungsmodus aus, bevor Sie allgemeine Änderungen an der Vorlage vornehmen. Andernfalls ändern Sie unter Umständen aus Versehen einen vorhandenen Auslöser.

   Achtung:
   Beim Ändern von Stilen und Vorlagen ist es möglich, dass die Funktionalität des Systemsteuerelements, auf das der Stil oder die Vorlage angewendet wird, beeinträchtigt wird. Eine Liste mit Vorsichtsmaßnahmen finden Sie im Abschnitt "Bewährte Methoden" unter Formatieren eines Steuerelements, das Vorlagen unterstützt.

7. Speichern Sie die Dateien, und drücken Sie F5, um die Anwendung zu erstellen und zu testen.

   Ein spezifischeres Beispiel für das Ändern einer Vorlage finden Sie unter Weiterführende Themen: Hinzufügen einer Animation zu einer Schaltfläche.

Storyboards in Benutzersteuerelementen

Indem Sie ein Storyboard in einem Benutzersteuerelement platzieren, können Sie die Objekte und Storyboards, die diese Objekte animieren, in einem XAML-Dokument und einer CodeBehind-Datei kapseln. Anschließend können Sie das Benutzersteuerelement mehrmals in anderen Dokumenten instanziieren.

So steuern Sie ein Storyboard, das in einem Benutzersteuerelement enthalten ist

1. Erstellen und öffnen Sie ein Benutzersteuerelement zur Bearbeitung, indem Sie einen der folgenden Schritte ausführen:

   • Erstellen von Benutzersteuerelementen aus vorhandenen Objekten.

   • Klicken Sie im Menü Datei auf Neues Element. Wählen Sie im Dialogfeld Neues Element das UserControl -Benutzersteuerelement aus, legen Sie die Name -Eigenschaft fest, und klicken Sie dann auf OK.

2. Erstellen Sie ein Animationsstoryboard, und animieren Sie einige der Objekte im Benutzersteuerelement.

3. Sie können unter "Storyboards im Hauptbereich des Dokuments" nun eine beliebige Aufgabe auswählen, um Ihre Animation durch die Verwendung eines Ereignisauslösers oder einer Ereignishandlermethode zu steuern.

   Hinweis:

   Wenn Sie einen Ereignisauslöser für ein Objekt erstellen, bevor Sie das Objekt mithilfe des Befehls Benutzersteuerelement erstellen in ein Benutzersteuerelement konvertieren, müssen Sie den Ereignisauslöser im Bereich des Benutzersteuerelements neu erstellen. Der Grund hierfür ist, dass im Bereich des Benutzersteuerelements andere Ereignisse zur Verfügung stehen als im Bereich des Hauptdokuments. Sie können beispielsweise Ereignisse wie When UserControl.MouseDown is raised mit einer Aktion wie Storyboard1.Begin konfigurieren. Wenn Sie den Befehl Benutzersteuerelement erstellen verwenden, werden Ressourcen und Animationen in das neue Steuerelement konvertiert, damit Sie diese nicht neu erstellen müssen.

   Hinweis:

   Wenn Sie eine Ereignishandlermethode für ein Objekt erstellen, bevor Sie das Objekt mithilfe des Befehls Benutzersteuerelement erstellen in ein Benutzersteuerelement konvertieren, wird der Code der Ereignishandlermethode in der CodeBehind-Datei des Hauptdokuments nicht in die CodeBehind-Datei des Benutzersteuerelements verschoben. Der Grund hierfür ist, dass die Ereignishandlermethode unter Umständen von anderen Objekten verwendet wird. Sie können die Ereignishandlermethode kopieren und in die CodeBehind-Datei des Benutzersteuerelements einfügen.

Siehe auch

Aufgaben

Erstellen, Ändern oder Löschen eines Storyboards
Erstellen einer einfachen Animation

Copyright © 2011 Microsoft Corporation. Alle Rechte vorbehalten.