Controllare l'esecuzione dello storyboard

Articolo
10/11/2017

È possibile controllare l'esecuzione di uno storyboard nell'applicazione Microsoft Expression Blend nei modi seguenti:

Creazione di un trigger che esegue lo storyboard quando si verifica un evento (ad esempio un clic di un pulsante) oppure, se lo storyboard è incluso in un modello del controllo, quando una proprietà viene modificata.

[!NOTA]

I trigger non sono disponibili nei progetti di Microsoft Silverlight 1.0 o di Silverlight 2.
Creazione di un metodo del gestore dell'evento in un file code-behind che chiama il metodo Begin dello storyboard.

Questi metodi consentono inoltre di controllare quando lo storyboard viene interrotto, sospeso, ripreso, rimosso o terminato.

I metodi sono leggermente diversi a seconda dell'ambito in cui si opera.

[!NOTA]

Le procedure seguenti sono riferite a storyboard che contengono animazioni visive. Sono tuttavia valide anche per storyboard audio o video. Per ulteriori informazioni, vedere Inserire un file di immagine, audio o video nel documento attivo.

Storyboard nell'ambito principale del documento

Creare uno storyboard nell'ambito principale del documento se costituirà una funzionalità principale del documento e verrà attivato dall'utente che interagisce con un controllo anch'esso incluso nell'ambito principale del documento. In Expression Blend quando si crea uno storyboard nell'ambito del documento principale, viene creato automaticamente un nuovo trigger che eseguirà lo storyboard quando viene caricata la finestra dell'applicazione. Tale trigger è visibile in Trigger nel pannello Interazione.

Trigger predefinito impostato da Expression Blend quando si crea uno storyboard

Cc295328.daa5d5de-713b-4d58-9f98-4ef65b217e9d(it-it,Expression.10).png

Se si lascia invariato il trigger, lo storyboard verrà eseguito all'avvito dell'applicazione. In alternativa, è possibile modificare questo comportamento mediante la procedura seguente.

Per controllare uno storyboard nell'ambito principale del documento tramite un trigger di evento

Se è stato creato un trigger predefinito per l'evento Window.Loaded durante la creazione dello storyboard e non si desidera che lo storyboard venga eseguito all'avvio dell'applicazione, selezionare Window.Loaded in Trigger. In alternativa, scegliere il pulsante Aggiungi trigger evento per creare un nuovo trigger di evento predefinito.
In Oggetti e sequenza temporale selezionare l'oggetto che, a seguito di interazione, eseguirà lo storyboard. Se, ad esempio, si desidera che lo storyboard venga eseguito quando il puntatore del mouse dell'utente viene a trovarsi su un blocco di testo, selezionare il blocco di testo.
Modificare l'evento che attiva l'animazione (Window.Loaded) utilizzando i menu a discesa nella metà inferiore del riquadro Trigger. Modificare ad esempio Quando viene generato Window.Loaded in Quando viene generato textblock.MouseEnter.
Definire l'azione che verrà eseguita quando viene attivato l'evento. Se non è elencata alcuna azione, scegliere il pulsante Aggiungi nuova azione . Verificare che l'azione sia impostata sul nome dello storyboard, ad esempio Storyboard1, e che il metodo da chiamare sia Begin. In alternativa, è possibile selezionare uno qualsiasi dei metodi validi per uno storyboard. Per ulteriori informazioni, vedere Aggiungere o rimuovere un trigger.

Per controllare uno storyboard nell'ambito principale del documento tramite un metodo del gestore dell'evento

Se è stato creato un trigger predefinito per l'evento Window.Loaded durante la creazione dello storyboard e non si desidera che lo storyboard venga eseguito all'avvio dell'applicazione, selezionare Window.Loaded in Trigger e quindi eseguire una delle operazioni seguenti.
- Se nella metà inferiore della finestra Trigger sono elencate più azioni, selezionare quella che controlla lo storyboard, ad esempio Storyboard1.Begin, e scegliere il pulsante Elimina questa azione accanto ad essa.
- Se l'unica azione elencata è quella che controlla lo storyboard, sarà possibile eliminare l'intero trigger scegliendo il pulsante Elimina trigger .
In Oggetti e sequenza temporale selezionare l'oggetto che, a seguito di interazione, eseguirà lo storyboard. Se, ad esempio, si desidera che lo storyboard venga eseguito quando il puntatore del mouse dell'utente viene a trovarsi su un blocco di testo, selezionare il blocco di testo.

Nel pannello Proprietà fare clic sul pulsante Eventi Cc295328.6c67bb3b-e8a2-4a63-bad5-54d5c15b04dd(it-it,Expression.10).png . Verrà visualizzato un elenco alfabetico di tutti gli eventi disponibili per l'elemento selezionato.

Suggerimento:
Per visualizzare una breve descrizione di un evento spostare il puntatore sul nome dell'evento stesso. Verrà visualizzata una descrizione dell'evento. Per visualizzare un elenco degli eventi disponibili e le relative descrizioni, vedere Riferimenti rapidi sugli eventi WPF.

Individuare l'evento a cui si desidera aggiungere la logica di programmazione, ad esempio l'evento MouseEnter.
È possibile generare il metodo del gestore dell'evento vuoto in due modi:
- Fare doppio clic nel blocco di testo accanto al nome dell'evento. Expression Blend genererà un nome predefinito per il metodo, lo inserirà nel blocco di testo e genererà il codice per il metodo vuoto.
- Digitare un nome nel blocco di testo accanto al nome dell'evento e quindi premere INVIO o fare clic in un altro punto per spostare lo stato attivo dal blocco di testo. I nomi dei metodi relativi agli eventi devono iniziare con una lettera. Se il nome del metodo non esiste ancora nel file code-behind, Expression Blend genererà il codice per il metodo vuoto e utilizzerà il nome digitato.
[!NOTA]

È possibile configurare Expression Blend in modo da utilizzare gli Appunti anche se è installato Microsoft Visual Studio 2008. Scegliere Opzioni dal menu Strumenti e quindi fare clic su Gestore eventi. In Opzioni di modifica fare clic su Solo Appunti.
A questo punto, Expression Blend eseguirà una delle operazioni seguenti:
- Se è installato Visual Studio 2008 Standard Edition o versioni successive, Expression Blend aprirà il progetto in Visual Studio 2008, quindi aprirà il file code-behind e vi incollerà il metodo del gestore dell'evento vuoto.
  
  [!NOTA]
  
  Se sono installati sia Visual Studio 2008 che Visual Studio 2005, è possibile che venga visualizzato un errore se la funzione per la selezione della versione di Visual Studio tenta di aprire Visual Studio 2005 anziché Visual Studio 2008. Tale situazione si verifica perché Expression Blend crea progetti di Visual Studio 2008 che non possono essere aperti in Visual Studio 2005. In tali circostanze aprire il progetto in Visual Studio 2008 prima di provare a creare il gestore dell'evento nel pannello Proprietà di Expression Blend.
- Se non è installato Visual Studio 2008 Standard Edition o versioni successive, Expression Blend copierà il metodo del gestore dell'evento vuoto negli Appunti e visualizzerà una finestra popup in cui sono descritte le possibili operazioni da effettuare. In questo caso sarà possibile aprire manualmente il file code-behind in un altro editor di testo per incollare il metodo nella definizione di classe per la finestra, come indicato di seguito:
```
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
```
[!NOTA]

Se ai file con estensione cs o vb è associata un'applicazione, ad esempio il Blocco note, sarà possibile aprire manualmente il file code-behind facendo doppio clic sul relativo nome in File del pannello Progetto. Expression Blend aprirà il file nell'applicazione associata.

Se invece ai file cs o vb non è associata alcuna applicazione, Expression Blend non sarà in grado di aprire il file esternamente. Per aprire il file, individuarlo in Esplora risorse oppure, se il progetto è stato salvato in Expression Blend, scegliere EsploraProgetto dal menu Progetto. Fare clic con il pulsante destro del mouse sul file cs o vb che si desidera modificare, scegliere Apri con e quindi Blocco note o un'altra applicazione di modifica. A questo punto, sarà possibile aprire i file code-behind manualmente dal pannello Progetto in Expression Blend.

Dopo aver aperto il file code-behind e avervi incollato il metodo del gestore dell'evento, aggiungere le righe di codice in grassetto seguenti nel metodo del gestore dell'evento:

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

Salvare tutti i file e quindi premere F5 per generare e testare l'applicazione. Nell'applicazione in esecuzione, ad esempio, spostare il mouse sul blocco di testo per verificare se l'animazione viene avviata.

[!NOTA]

Se l'animazione non torna al punto iniziale quando si posiziona nuovamente il mouse sul blocco di testo, è probabile che un fotogramma non è stato impostato in corrispondenza dell'indicatore del secondo 0.

Storyboard in modelli e stili del controllo

Microsoft Expression Blend crea talvolta automaticamente uno storyboard, ad esempio quando si aggiunge un'azione a un trigger di proprietà o di evento durante la modifica di un modello del controllo. Per ulteriori informazioni sull'utilizzo di stili e modelli, vedere Stili e modelli.

Per controllare uno storyboard nell'ambito di un modello

Aprire uno stile o un modello per la modifica in uno dei modi seguenti:

[!NOTA]

Per informazioni sui casi in cui utilizzare uno stile o un modello, vedere Panoramica degli stili e dei modelli.

[!NOTA]

Alcuni oggetti, ad esempio gli oggetti percorso, non supportano i modelli. I controlli, tra cui Button o RadioButton, non supportano i modelli.
- Per creare un nuovo modello, selezionare un oggetto nella tavola da disegno oppure in Oggetti e sequenza temporale, scegliere Modifica parti del controllo (modello) dal menu Oggetto e quindi fare clic su Modifica copia. Verrà visualizzata la finestra di dialogo Crea risorsa [nomestile]. Selezionare il percorso in cui si desidera definire la risorsa e quindi fare clic su OK. Per ulteriori informazioni, vedere Creare una risorsa stile.
- Per creare un nuovo stile, selezionare un oggetto nella tavola da disegno oppure in Oggetti e sequenza temporale, scegliere Modifica stile dal menu Oggetto e quindi fare clic su Modifica copia. Verrà visualizzata la finestra di dialogo Crea risorsa [nomestile]. Selezionare il percorso in cui si desidera definire la risorsa e quindi fare clic su OK. Per ulteriori informazioni, vedere Creare una risorsa stile.
- Per aprire un modello esistente, fare clic sul pulsante Modifica risorsa accanto allo stile nel pannello Risorse. In Oggetti e sequenza temporale fare clic con il pulsante destro del mouse sull'elemento Stile, scegliere Modifica parti del controllo (modello) e quindi selezionare Modifica modello. In alternativa, selezionare un controllo al quale è già applicato uno stile personalizzato, scegliere Modifica parti del controllo (modello) dal menu Oggetto e quindi fare clic su Modifica modello.
- Per aprire uno stile esistente, fare clic sul pulsante Modifica risorsa accanto allo stile nel pannello Risorse. In alternativa, selezionare un controllo al quale è già applicato uno stile personalizzato, scegliere Modifica stile dal menu Oggetto e quindi fare clic su Modifica stile.
- Per modificare uno degli stili semplici forniti con Expression Blend, aprire la Libreria dalla casella degli strumenti, fare clic sulla scheda Controlli, fare clic sul dizionario risorse degli stili semplici, selezionare un controllo con stile già definito, disegnarlo nella tavola da disegno per rendere il dizionario risorse Simple Styles.xaml disponibile nel pannello Risorse e quindi aprire il modello o lo stile semplice utilizzando una delle opzioni precedenti. La modifica del dizionario risorse Simple Styles.xaml nel progetto corrente non influisce sul dizionario risorse Simple Styles.xaml di un altro progetto a meno che il file Simple Styles.xaml non venga copiato dal progetto corrente nell'altro progetto.
Quando ci si trova nell'ambito di modifica dello stile o del modello, notare la nuova barra di navigazione di Expression Blend 2 nella parte superiore della tavola da disegno.

Barra di navigazione con selezionata la modalità di modifica del modello

Facendo clic sui pulsanti della barra di navigazione è possibile passare rapidamente dalla modalità di modifica del modello, alla modalità di modifica dello stile e all'ambito di modifica dell'oggetto per l'oggetto selezionato. La barra di navigazione viene visualizzata per qualsiasi oggetto selezionato a cui sia applicato uno stile o un modello personalizzato.
In Oggetti e sequenza temporale fare clic su Nuovo .

Verrà visualizzata la finestra di dialogo Crea risorsa Storyboard.
Immettere un nome e fare clic su OK. La finestra Crea risorsa Storyboard verrà chiusa e Expression Blend attiverà la modalità di registrazione della sequenza temporale.
Creare alcune animazioni che interessano solo gli oggetti inclusi nello stile o nel modello di cui è in corso la modifica.

[!NOTA]

Non è possibile animare oggetti esterni al modello o allo stile di cui è in corso la modifica. È tuttavia possibile animare oggetti esistenti nello stile o nel modello. Durante la modifica di un modello è inoltre possibile raggruppare gli elementi sotto il nodo Modello in un pannello di layout, ad esempio Grid, e quindi aggiungere alla griglia altri oggetti che è possibile animare.

Per attivare il nuovo storyboard, eseguire una delle operazioni seguenti:

Per aggiungere lo storyboard a un trigger di proprietà esistente, selezionare il trigger in Trigger nel pannello Interazione e quindi, nella metà inferiore del riquadro Trigger, fare clic sul pulsante Aggiungi nuova azione accanto a Azioni all'attivazione o Azioni alla disattivazione, a seconda che si desideri o meno eseguire lo storyboard quando il trigger viene attivato o disattivato. Il nuovo storyboard verrà aggiunto automaticamente come azione che verrà eseguita quando il trigger verrà attivato.
Per aggiungere lo storyboard a un nuovo trigger di proprietà, fare clic sul pulsante Aggiungi trigger proprietà e quindi, nella metà inferiore del riquadro Trigger, modificare il trigger predefinito target-element.IsCancel = False nella proprietà e nel valore desiderato, ad esempio target-element.IsPressed = True. Fare infine clic sul pulsante Aggiungi nuova azione . Il nuovo storyboard verrà aggiunto automaticamente come azione che verrà eseguita quando verrà generato l'evento.
Per aggiungere lo storyboard a un nuovo trigger di evento, fare clic sul pulsante Aggiungi trigger evento e quindi, nella metà inferiore del riquadro Trigger, modificare il trigger predefinito Quando viene generato target-element.Loaded nell'evento desiderato, ad esempio Quando viene generato target-element.Click. Fare infine clic sul pulsante Aggiungi nuova azione . Il nuovo storyboard verrà aggiunto automaticamente come azione che verrà eseguita quando verrà generato l'evento.

Importante:
Selezionare sempre il trigger Predefinito per disattivare la modalità di registrazione dei trigger prima di apportare modifiche generali al modello. In caso contrario, è possibile che venga accidentalmente modificato un trigger esistente.

Attenzione:
Quando si modificano stili e modelli, è possibile che il controllo di sistema a cui è applicato lo stile o il modello non funzioni correttamente. Per un elenco delle precauzioni da adottare, vedere la sezione delle procedure consigliate in Panoramica degli stili e dei modelli.

Salvare tutti i file e quindi premere F5 per generare e testare l'applicazione.

Per un esempio più specifico di modifica di un modello, vedere Esercitazione: aggiungere un'animazione a un pulsante.

Storyboard in controlli utente

L'inserimento di uno storyboard in un controllo utente consente di incapsulare gli oggetti e gli storyboard che animano tali oggetti in un unico documento XAML e file code-behind. Sarà quindi possibile creare un'istanza del controllo utente più volte in altri documenti.

Per controllare uno storyboard contenuto in un controllo utente

Per creare e aprire un controllo utente per la modifica, eseguire una delle operazioni seguenti:
- Creare un controllo da oggetti esistenti.
- Scegliere Nuovo elemento dal menu File. Nella finestra di dialogo Nuovo elemento selezionare UserControl, impostare un valore in Nome e quindi fare clic su OK.
Creare uno storyboard per animazioni e animare alcuni degli oggetti nel controllo utente.
È ora possibile utilizzare una delle attività descritte in Storyboards in the main scope of your document per controllare l'animazione tramite un trigger di evento o un metodo del gestore dell'evento.

[!NOTA]

Se si crea un trigger di evento o un oggetto prima di convertire l'oggetto in un controllo utente tramite il comando Crea controllo, sarà necessario creare nuovamente il trigger di evento nell'ambito del controllo utente, poiché nell'ambito del controllo utente sono disponibili eventi diversi rispetto a quelli inclusi nell'ambito del documento principale. È ad esempio possibile configurare eventi quali Quando viene generato UserControl.MouseDown con un'azione quale Storyboard1.Begin. Quando si utilizza il comando Crea controllo, viene eseguito il refactoring di risorse e animazioni nel nuovo controllo pertanto non è necessario crearle nuovamente.

[!NOTA]

Se si crea un metodo del gestore dell'evento per un oggetto prima di convertire l'oggetto in un controllo utente tramite il comando Crea controllo, il codice del metodo incluso nel file code-behind del documento principale non viene spostato nel file code-behind del controllo utente. È infatti possibile che altri oggetti utilizzino lo stesso metodo del gestore dell'evento. È possibile copiare e incollare il metodo del gestore dell'evento nel file code-behind del controllo utente.

Storyboard in applicazioni Silverlight 1.0

Gli storyboard nelle applicazioni Silverlight 1.0 sono risorse e, analogamente a tutte le risorse disponibili in Silverlight 1.0, sono contraddistinte da un nome e non da una chiave come avviene nelle applicazioni Windows Presentation Foundation.

Per controllare uno storyboard in un'applicazione Silverlight 1.0

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

Storyboard in applicazioni Silverlight 2

Gli storyboard nelle applicazioni Silverlight 2 possono essere controllati utilizzando i gestori degli eventi o gli stati.

Per controllare uno storyboard in un'applicazione Silverlight 2

Nel metodo di un gestore dell'evento utilizzare il codice seguente:

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

In uno stato, Aggiungere un'animazione da riprodurre dopo una modifica allo stato.

Vedere anche

Concetti

Creare, modificare o eliminare uno storyboard

Creare un'animazione semplice

Condividi tramite