Controllare elementi multimediali utilizzando trigger in una sequenza temporale

Un elemento multimediale può contenere un riferimento a un file audio, ad esempio a un file WAV, o a un file video, ad esempio a un file WMV. Per controllare la riproduzione di un elemento multimediale è possibile utilizzare trigger di evento in una sequenza temporale di animazione.

Nell'esempio riportato di seguito viene illustrato come controllare la riproduzione di un video attivando la relativa sequenza temporale quando il puntatore del mouse entra ed esce dall'area di visualizzazione del video. Per ulteriori informazioni su come modificare le sequenze temporali, vedere Animazione, Trigger e interattività dell'utente e Gestione degli eventi e interattività dell'utente. In questo esempio vengono impostati trigger per gli eventi MouseEnter e MouseLeave di un oggetto nella tavola da disegno. Per un elenco di altri eventi per i quali è possibile impostare trigger, vedere Riferimenti rapidi sugli eventi WPF.

[!NOTA]

I trigger non sono disponibili nei progetti di Microsoft Silverlight 1.0. Quando si aggiunge un file audio o video a un progetto di Silverlight 1.0, non viene inoltre creata alcuna sequenza temporale. Per istruzioni su come controllare gli storyboard in un progetto di Silverlight 1.0, vedere Controllare la riproduzione dei file multimediali in un progetto di Silverlight.

Attenzione:
Per utilizzare i supporti in Microsoft Expression Blend, è necessario che nel computer sia installato Windows Media Player 10. È possibile eseguire il download di Windows Media Player 10 dal sito Web Windows Media.

Per controllare la riproduzione di un video con il puntatore del mouse

1. Per lasciare più spazio al pannello Interazione nell'area di lavoro di Expression Blend, passare all'area di lavoro Animazione (F6). In questo modo il pannello Interazione passa sotto la tavola da disegno.

2. In Oggetti e sequenza temporale attivare l'oggetto in cui si desidera aggiungere il video facendo doppio clic sull'oggetto. Per aggiungere ad esempio il video nel livello principale dell'applicazione, fare doppio clic su LayoutRoot.

3. Aggiungere il file video nella tavola da disegno aggiungendolo prima al progetto (CTRL+I) e quindi facendovi doppio clic nel pannello Progetto. In Oggetti e sequenza temporale verrà creato un elemento multimediale con la proprietà Source impostata sul percorso del file video.

   • Se prima di aggiungere il file multimediale nella tavola da disegno è stata selezionata una sequenza temporale, l'elemento multimediale verrà inserito in tale sequenza temporale e verrà pianificato per avviarsi in corrispondenza della posizione corrente dell'indicatore di riproduzione.

   • Se non è stata selezionata alcuna sequenza temporale, ne verrà creata una nuova e l'elemento multimediale verrà aggiunto a questa in corrispondenza dell'indicatore del secondo 0.

   Per la procedura completa per l'aggiunta di elementi multimediali nella tavola da disegno, vedere l'argomento Inserire un file di immagine, audio o video nel documento attivo.

4. In Trigger del pannello Interazione è stato aggiunto un nuovo trigger per l'evento Window.Loaded. Fare clic su Window.Loaded per vedere l'azione che viene attivata dall'evento Window.Loaded. Per impostazione predefinita, viene avviata la sequenza temporale del video. Si desidera che la riproduzione inizi quando il puntatore del mouse si trova sull'area di visualizzazione del video e si arresti quando il puntatore del mouse esce da tale area. La prima attività consiste nel sospendere la riproduzione del video non appena si avvia quando viene caricata la finestra dell'applicazione.

5. In Trigger fare clic sul pulsante Aggiungi nuova azione  accanto a Quando viene generato Window.Loaded. Nell'elenco verrà visualizzata una seconda azione predefinita che chiama il metodo sequenzatemporale.Begin.

6. Fare clic sulla casella a discesa relativa al metodo e selezionare Pausa. Il pannello Interazione dovrebbe avere un aspetto simile a quello dell'immagine seguente. In questo modo la riproduzione del video verrà avviata e immediatamente sospesa al momento del caricamento della finestra dell'applicazione.

   Aggiunta di un'altra azione al trigger per l'evento Window.Loaded

   

7. Per collegare la sequenza temporale del filmato a un evento del mouse, è necessario aggiungere un nuovo trigger di evento. Fare clic sul pulsante Aggiungi trigger evento  in Trigger. Verrà visualizzato un nuovo trigger di evento predefinito nell'elenco relativo a quando viene generato l'evento Window.Loaded.

8. Fare clic sull'elenco a discesa degli oggetti per cambiare la selezione passando da Window al nome dell'elemento multimediale. Nell'immagine precedente ad esempio il nome dell'elemento multimediale è SampleMovie_wmv.

   Suggerimento:
   Se il nome dell'elemento multimediale non è elencato, selezionarlo in Oggetti e sequenza temporale e quindi provare a ripetere questo passaggio.

9. Fare clic sulla casella a discesa dei metodi e cambiare la selezione da Loaded a MouseEnter. L'evento MouseEnter è incluso nella categoria UIElement. Come trigger ora dovrebbe risultare visualizzato Quando viene generato elemento.MouseEnter. Non è stata ancora creata alcuna azione.

   Suggerimento:

   Se si utilizza un file audio invece di un file video, è possibile selezionare l'evento MouseEnter dell'elemento multimediale che include il file video. Gli utenti non sapranno tuttavia in che posizione spostare il puntatore del mouse, poiché l'elemento multimediale non risulterà visibile nell'applicazione. In alternativa, è possibile aggiungere un pulsante nella tavola da disegno e creare un trigger per l'evento Click del pulsante.

10. Fare clic sul pulsante Aggiungi nuova azione  accanto a Quando viene generato elemento.MouseEnter. Nell'elenco verrà visualizzata un'azione predefinita che chiama il metodo sequenzatemporale.Begin.

11. Poiché la sequenza temporale è già stata avviata quando è stato caricato l'oggetto Window, cambiare il metodo impostandolo su sequenzatemporale.Pause. Ora la riproduzione del filmato verrà sospesa quando il puntatore del mouse viene spostato sull'area di visualizzazione.

12. Aggiungere un altro trigger di evento () e modificarlo in modo che risulti visualizzato Quando viene generato elemento.MouseLeave.

13. Aggiungere una nuova azione () chiamando il metodo sequenzatemporale.Resume. All'uscita del puntatore dall'area di visualizzazione la riproduzione del filmato riprenderà. In alternativa, è possibile scegliere di arrestare e riavviare il filmato anziché sospenderlo e riprenderne la riproduzione.

    Aggiunta dei trigger per gli eventi MouseEnter e MouseLeave e delle azioni per sospendere e riprendere la riproduzione del filmato

    

14. Per verificare che l'elemento multimediale video si ridimensioni con la finestra, impostare le proprietà seguenti nel pannello Proprietà:

    • Nella sezione delle proprietà avanzate della categoria File multimediali del pannello Proprietà impostare la proprietà Stretch dell'elemento multimediale su Uniform. Questa impostazione consente di mantenere le proporzioni dell'area di visualizzazione del video.

    • Nella categoria Layout del pannello Proprietà impostare Width e Height dell'elemento multimediale su Auto. Questa impostazione consente all'area di visualizzazione del video di ridimensionarsi con la finestra dell'applicazione. Se l'area di visualizzazione del video non si ridimensiona, controllare se l'elemento multimediale è contenuto in un elemento pannello con dimensioni specifiche.

15. Eseguire il test dell'applicazione (F5). Osservare il comportamento dell'area di visualizzazione del filmato quando si sposta il puntatore del mouse al suo interno.

Vedere anche

Concetti

Creare un pulsante che controlla uno storyboard in un'applicazione Silverlight