Steuern von Medien mit Auslösern in einer Zeitachse

Ein Medienelement kann einen Verweis auf eine Audiodatei (z. B. eine WAV-Datei) oder eine Videodatei (z. B. eine WMV-Datei) enthalten. Die Wiedergabe von Medien kann mithilfe von Ereignisauslösern auf einer Animationszeitachse gesteuert werden.

Im folgenden Beispiel wird erläutert, wie Sie die Videowiedergabe steuern, indem Sie die Videozeitachse auslösen, wenn der Mauszeiger über den Videoanzeigebereich bewegt wird. Weitere Informationen zum Ändern von Zeitachsen finden Sie unter Animation, Auslöser und Benutzerinteraktivität und Ereignishandling und Benutzerinteraktivität. In diesem Beispiel werden für ein Objekt auf der Zeichenfläche Auslöser für die Ereignisse MouseEnter und MouseLeave festgelegt. Eine Liste weiterer Ereignisse, für die Sie Auslöser festlegen können, finden Sie unter Kurzübersicht der WPF-Ereignisse.

Hinweis:
Auslöser sind in Microsoft Silverlight 1.0-Projekten nicht verfügbar. Darüber hinaus wird keine Zeitachse erstellt, wenn Sie einem Silverlight 1.0-Projekt eine Audio- oder Videodatei hinzufügen. Anleitungen zum Steuern von Storyboards in Silverlight 1.0-Projekten finden Sie unter Steuern der Wiedergabe von Medien in einem Silverlight-Projekt.

Vorsicht:
Windows Media Player 10 muss auf Ihrem Computer installiert sein, damit Sie in Microsoft Expression Blend mit Medien arbeiten können. Sie können Windows Media Player 10 von der Windows Media-Website herunterladen.

So steuern Sie die Videowiedergabe mit der Maus

1. Wechseln Sie in den Animationsarbeitsbereich (F6), um den Platz für das Interaktionspanel im Arbeitsbereich von Expression Blend zu vergrößeren. Mit dieser Aktion wird das Interaktionspanel unter die Zeichenfläche verschoben.

2. Aktivieren Sie unter Objekte und Zeitachsen das Objekt, dem Sie das Video hinzufügen möchten, indem Sie auf das Objekt doppelklicken. Wenn Sie das Video z. B. dem Stamm der Anwendung hinzufügen möchten, doppelklicken Sie auf LayoutRoot.

3. Fügen Sie die Videodatei in die Zeichenfläche ein. Fügen Sie hierzu die Datei zunächst Ihrem Projekt hinzu (STRG+I), und doppelklicken Sie dann im Projektpanel auf die Datei. Unter Objekte und Zeitachsen wird ein Medienelement erstellt, wobei als Source-Eigenschaft (Quelle) der Pfad der Videodatei festgelegt ist.

   • Falls eine Zeitachse ausgewählt wurde, bevor Sie der Zeichenfläche die Mediendatei hinzugefügt haben, wird das Medium in diese Zeitachse eingefügt, und der Start des Mediums wird an der aktuellen Position geplant.

   • Wenn keine Zeitachse ausgewählt wurde, wird eine neue Medienzeitachse erstellt, und das Medium wird der neuen Zeitachse an der 0-Sekunden-Marke hinzugefügt.

   Umfassende Informationen zum Einfügen von Medien in die Zeichenfläche finden Sie unter Einfügen einer Bild-, Audio- oder Videodatei in das aktive Dokument.

4. Im Interaktionspanel wurde unter Auslöser ein neuer Ereignisauslöser für das Window.Loaded-Ereignis hinzugefügt. Klicken Sie auf Window.Loaded, um die Aktion anzuzeigen, die von diesem Ereignis ausgelöst wird. Standardmäßig wird die Videozeitachse gestartet. Das Video soll wiedergegeben werden, wenn sich der Mauszeiger über dem Videoanzeigebereich befindet. Es soll angehalten werden, wenn der Mauszeiger den Videoanzeigebereich verlässt. Als erste Aufgabe soll das Video angehalten werden, sobald es beim Laden des Anwendungsfensters gestartet wird.

5. Klicken Sie unter Auslöser neben Wenn "Window.Loaded" ausgelöst wird auf die Schaltfläche Neue Aktion hinzufügen. In der Liste wird eine zweite Standardaktion angezeigt, die die timeline.Begin-Methode aufruft.

6. Klicken Sie auf das Dropdownfeld für die Methode, und wähen Sie Anhalten. Das Interaktionspanel sollte so oder ähnlich aussehen. Das Video wird nun gestartet und sofort angehalten, wenn das Anwendungsfenster geladen wird.

   Hinzufügen einer weiteren Aktion zum Window.Loaded-Ereignisauslöser

   

7. Wenn Sie die Filmzeitachse mit einem Mausereignis verbinden möchten, müssen Sie einen neuen Ereignisauslöser hinzufügen. Klicken Sie unter Auslöser auf die Schaltfläche Ereignisauslöser hinzufügen . In der Liste wird ein neuer Standardereignisauslöser für das Window.Loaded-Ereignis angezeigt.

8. Klicken Sie auf die Dropdownliste des Objekts, um statt Window den Namen Ihres Medienelements auszuwählen. Im vorherigen Bild lautete der Name des Medienelements z. B. SampleMovie_wmv.

   Tipp:
   Falls der Name des Medienelements nicht angezeigt wird, wählen Sie das Element unter Objekte und Zeitachsen aus, und wiederholen Sie dann diesen Schritt.

9. Klicken Sie auf das Dropdownfeld der Methode, und ändern Sie die Auswahl von Loaded in MouseEnter. Das MouseEnter-Ereignis befindet sich in der Kategorie UIElement. Der Auslöser lautet nun folgendermaßen: Wenn "Element.MouseEnter" ausgelöst wird. Es wurden noch keine Aktionen erstellt.

   Tipp:

   Wenn Sie statt einer Videodatei eine Audiodatei verwenden, können Sie das MouseEnter-Ereignis für das Medienelement auswählen, das die Videodatei enthält. Benutzer wissen jedoch nicht, wohin sie den Zeiger bewegen sollen, da das Medienelement in Ihrer Anwendung nicht sichtbar ist. Alternativ können Sie der Zeichenfläche eine Schaltfläche hinzufügen und einen Auslöser für das Click-Ereignis der Schaltfläche erstellen.

10. Klicken Sie neben Wenn "Element.MouseEnter" ausgelöst wird auf die Schaltfläche Neue Aktion hinzufügen . In der Liste wird eine Standardaktion angezeigt, die die timeline.Begin-Methode aufruft.

11. Die Zeitachse wurde bereits beim Laden des Fensters gestartet. Ändern Sie daher die Methode in timeline.Pause. Der Film wird nun angehalten, wenn sich der Mauszeiger über den Anzeigebereich bewegt.

12. Fügen Sie einen weiteren Ereignisauslöser () hinzu, und ändern Sie ihn in Wenn "Element.MouseLeave" ausgelöst wird.

13. Fügen Sie eine neue Aktion () hinzu, die die timeline.Resume-Methode aufruft. Die Wiedergabe des Films wird nun fortgesetzt, wenn der Mauszeiger den Anzeigebereich verlässt. Alternativ können Sie festlegen, dass der Film nicht angehalten und fortgesetzt, sondern angehalten und neu gestartet werden soll.

    Hinzufügen von MouseEnter- und MouseLeave-Ereignisauslösern und Aktionen zum Anhalten und Fortsetzen des Films

    

14. Wenn Sie sicherstellen möchten, dass das Videomedium auf die Fenstergröße angepasst wird, legen Sie die folgenden Eigenschaften im Eigenschaftenpanel fest:

    • Stellen Sie im erweiterten Abschnitt der Kategorie Medien des Eigenschaftenpanels die Stretch-Eigenschaft (Strecken) des Medienelements auf Uniform ein. Mit dieser Einstellung wird das Seitenverhältnis des Videoanzeigebereichs beibehalten.

    • Stellen Sie in der Kategorie Layout des Eigenschaftenpanels die Eigenschaften Width (Breite) und Height (Höhe) des Medienelements auf Auto ein. Mit dieser Einstellung kann der Videoanzeigebereich auf das Anwendungsfenster angepasst werden. Falls der Videoanzeigebereich nicht an das Anwendungsfenster angepasst wird, überprüfen Sie, ob das Medienelement in einem Panelelement mit einer bestimmten Größe enthalten ist.

15. Testen Sie die Anwendung (F5). Beobachten Sie das Verhalten des Filmanzeigebereichs, wenn Sie den Mauszeiger durch den Bereich bewegen.

Siehe auch

Konzepte

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