Steuern des Startzeitpunkts eines Storyboards

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

• 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 stehen in Microsoft Silverlight 1.0- oder Silverlight 2-Projekten nicht zur Verfügung.

• 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 Einfügen einer Bild-, Audio- oder Videodatei in das aktive Dokument.

Storyboards im Hauptbereich des Dokuments

Erstellen Sie ein Storyboard im Hauptbereich des Dokuments, sofern es ein wesentliches Feature 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. Wenn Sie ein Storyboard im Bereich des Hauptdokuments erstellen, wird in Expression Blend automatisch ein neuer Auslöser erstellt, der das Storyboard ausführt, wenn das Anwendungsfenster geladen wird. Sie können diesen Auslöser im Interaktionspanel unter Auslöser 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.

So steuern Sie ein Storyboard im Hauptbereich des Dokuments mithilfe eines Ereignisauslösers

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

2. Wählen Sie unter Objekte und Zeitachsen ein Objekt aus, das bei Interaktion das Storyboard starten 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.

3. Ändern Sie das Ereignis, durch das die Animation ausgelöst wird (Window.Loaded (Fenster geladen)), indem Sie die Dropdownmenüs in der unteren Hälfte des Bereichs Auslöser verwenden. Ändern Sie beispielsweise Wenn "Window.Loaded" ausgelöst wird in Wenn "textblock.MouseEnter" ausgelöst wird.

4. Legen Sie die Aktion fest, die ausgeführt werden soll, wenn das Ereignis ausgelöst wird. Wenn keine Aktion aufgeführt ist, klicken Sie auf die Schaltfläche 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 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.

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

1. Wenn bei der Erstellung des Storyboards ein Standardauslöser für das Window.Loaded-Ereignis erstellt wurde und das Storyboard nicht beim Start der Anwendung ausgeführt werden soll, wählen Sie unter Auslöser die Option Window.Loaded, und führen Sie einen der folgenden Schritte aus.

   • Wenn in der unteren Hälfte des Fensters Auslöser mehrere Aktionen aufgeführt werden, wählen Sie die Aktion zur Steuerung des Storyboards aus (z. B. Storyboard1.Begin), und klicken Sie neben der Aktion auf die Schaltfläche Diese Aktion löschen .

   • Wenn die einzige aufgeführte Aktion die zur Steuerung des Storyboards ist, können Sie den gesamten Auslöser durch Klicken auf die Schaltfläche Auslöser löschen  löschen.

2. Wählen Sie unter Objekte und Zeitachsen ein Objekt aus, das bei Interaktion das Storyboard starten 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.

3. Klicken Sie im Eigenschaftenpanel auf die Schaltfläche Ereignisse . Eine Liste aller verfügbaren Ereignisse für das ausgewählte Element wird 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. Eine Liste der verfügbaren Ereignisse und ihrer Beschreibungen kann auch unter Kurzübersicht der WPF-Ereignisse angezeigt werden.

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

5. 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.

   Hinweis:
   Sie können Expression Blend so konfigurieren, dass die Zwischenablage verwendet wird, auch wenn Microsoft Visual Studio 2008 installiert ist. Klicken Sie im Menü Werkzeuge auf Optionen, und klicken Sie dann auf Ereignishandler. Klicken Sie unter Bearbeitungsoptionen auf Nur Zwischenablage.

6. Anschließend wird einer der folgenden Schritte von Expression Blend ausgeführt:

   • Falls Visual Studio 2008 Standard Edition oder höher installiert ist, wird das Projekt von Expression Blend in Visual Studio 2008 geöffnet. Anschließend wird die CodeBehind-Datei geöffnet und dann die leere Ereignishandlermethode eingefügt.

     Hinweis:

     Wenn auf Ihrem Computer sowohl Visual Studio 2008 als auch Visual Studio 2005 installiert ist, tritt unter Umständen ein Fehler auf, wenn durch die Versionsauswahl von Visual Studio versucht wird, Visual Studio 2005 anstelle von Visual Studio 2008 zu öffnen. Der Grund hierfür ist, dass durch Expression Blend Visual Studio 2008-Projekte erstellt werden, die nicht in Visual Studio 2005 geöffnet werden können. Öffnen Sie in diesem Fall das Projekt in Visual Studio 2008, bevor Sie versuchen, den Ereignishandler im Eigenschaftenpanel von Expression Blend zu erstellen.

   • Ist Visual Studio 2008 Standard Edition oder höher nicht installiert, wird die leere Ereignishandlermethode durch Expression Blend in die Zwischenablage kopiert. Dann wird ein Popupfenster mit einer Beschreibung der nächsten möglichen Schritte geöffnet. In diesem Fall können Sie die CodeBehind-Datei manuell in einem anderen Text-Editor öffnen, um die Methode in die Klassendefinition für das Fenster wie folgt einzufügen:

     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
     

   Hinweis:

   Falls Sie die CS- oder VB-Dateien einer Anwendung (z. B. Editor) zugeordnet haben, können Sie die CodeBehind-Datei manuell öffnen, indem Sie im Projektpanel unter Dateien auf den Dateinamen doppelklicken. Die Datei wird von Expression Blend in dieser Anwendung geöffnet. Falls Sie den CS- oder VB-Dateien keine Anwendung zugeordnet haben, kann die Datei von Expression Blend nicht extern geöffnet werden. Sie können die Datei öffnen, indem Sie sie in Windows-Explorer suchen (falls Sie das Projekt in Expression Blend gespeichert haben, können Sie auch im Menü Projekt auf Projekt durchsuchen klicken). Klicken Sie mit der rechten Maustaste auf die zu bearbeitende CS- oder VB-Datei, wählen Sie Öffnen mit aus, und wählen Sie anschließend Editor (oder eine andere Bearbeitungsanwendung) aus. Danach können Sie CodeBehind-Dateien manuell über das Projektpanel in Expression Blend öffnen.

7. 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
   

8. 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.

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 Stile und Vorlagen.

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 Stile und Vorlagen (Übersicht).

   Hinweis:
   Einige Objekte, zum Beispiel Pfadobjekte, unterstützen keine Vorlagen. Steuerelemente, wie Button und RadioButton, unterstützen Vorlagen.

   • Wählen Sie zum Erstellen einer neuen Vorlage auf der Zeichenfläche oder unter Objekte und Zeitachsen ein Objekt aus, klicken Sie dann im Menü Objekt auf Steuerelementteile bearbeiten (Vorlage), 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 Stilressource.

   • Wählen Sie zum Erstellen eines neuen Stils auf der Zeichenfläche oder unter 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 Stilressource.

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

   • Klicken Sie zum Öffnen eines vorhandenen Stils im Ressourcenpanel neben dem Stil auf die Schaltfläche Ressource bearbeiten . Alternativ 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 Stil bearbeiten aus.

   • Um einen der einfachen Stile zu ändern, die im Lieferumfang von Expression Blend enthalten sind, öffnen Sie die Objektbibliothek  aus der Werkzeugpalette, klicken Sie auf die Registerkarte Steuerelemente, klicken Sie auf das Ressourcenverzeichnis Simple Styles, wählen Sie ein vordefiniertes Steuerelement aus, zeichnen Sie es auf der Zeichenfläche, damit das Ressourcenverzeichnis Simple Styles.xaml im Ressourcenpanel zur Verfügung steht, und öffnen Sie dann 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 Breadcrumbleiste in Expression Blend 2, die sich im oberen Bereich der Zeichenfläche befindet.

   Breadcrumb-Leiste mit ausgewähltem Vorlagenbearbeitungsmodus

   

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

3. Klicken Sie unter Objekte und Zeitachsen auf die Schaltfläche 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. einem Raster) 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 zu einem vorhandenen Eigenschaftsauslöser hinzuzufügen, wählen Sie den Auslöser im Interaktionspanel unter Auslöser aus, und klicken Sie in der unteren Hälfte des Bereichs Auslöser auf die Schaltfläche Neue Aktion hinzufügen  neben Aktionen beim Aktivieren oder Aktionen beim Deaktivieren, je nachdem, 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 die Schaltfläche Eigenschaftsauslöser hinzufügen , und ändern Sie in der unteren Hälfte des Bereichs Auslöser den Standardwert für den Auslöser von target-element.IsCancel = False in die Eigenschaft und den Wert, die Sie wünschen (z. B. target-element.IsPressed = True). Klicken Sie anschließend auf die Schaltfläche 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 die Schaltfläche Ereignisauslöser hinzufügen , und ändern Sie in der unteren Hälfte des Bereichs Auslöser den Standardwert für den Auslöser von Wenn "target-element.Loaded" ausgelöst wird in das gewünschte Ereignis (z. B. Wenn "target-element.Click" ausgelöst wird). Klicken Sie anschließend auf die Schaltfläche 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.

   Vorsicht:
   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 Stile und Vorlagen (Übersicht).

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 Steuerelementen aus vorhandenen Objekten.

   • Klicken Sie im Menü Datei auf Neues Element. Wählen Sie im Dialogfeld Neues Element die Option UserControl aus, legen Sie Name fest, und klicken Sie anschließend auf OK.

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

3. Sie können nun eine beliebige Aufgabe unter Storyboards in the main scope of your document 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 Steuerelement erstellen in ein Benutzersteuerelement konvertieren, müssen Sie den Ereignisauslöser im Bereich des Benutzersteuerelements erneut 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 Wenn "UserControl.MouseDown" ausgelöst wird mit einer Aktion wie Storyboard1.Begin konfigurieren. Wenn Sie den Befehl Steuerelement erstellen verwenden, werden Ressourcen und Animationen in das neue Steuerelement konvertiert, damit Sie diese nicht erneut erstellen müssen.

   Hinweis:

   Wenn Sie eine Ereignishandlermethode für ein Objekt erstellen, bevor Sie das Objekt mithilfe des Befehls Steuerelement 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.

Storyboards in Silverlight 1.0-Anwendungen

Storyboards in Silverlight 1.0-Anwendungen sind Ressourcen und werden wie alle Ressourcen in Silverlight 1.0 durch einen Namen und nicht wie in Windows Presentation Foundation durch einen Schlüssel identifiziert.

So steuern Sie ein Storyboard in einer Silverlight 1.0-Anwendung

• Siehe Erstellen einer Schaltfläche zur Steuerung eines Storyboards in einer Silverlight-Anwendung.

Storyboards in Silverlight 2-Anwendungen

Storyboards in Silverlight 2-Anwendungen können mit Ereignishandlern oder Status gesteuert werden.

So steuern Sie ein Storyboard in einer Silverlight 2-Anwendung

• Verwenden Sie in einer Ereignishandlermethode den folgenden Code:

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

• In einem Status Hinzufügen von Animationen zum Abspielen nach Zustandsänderungen.

Siehe auch

Konzepte

Erstellen, Ändern oder Löschen eines Storyboards

Erstellen einer einfachen Animation