Animazione di oggetti

L'animazione è un'illusione ottenuta visualizzando rapidamente e in modo ciclico una serie di immagini, ognuna leggermente diversa dalla precedente. La sequenza di immagini viene percepita dal cervello come un'unica scena in evoluzione. Nei film questa illusione viene creata mediante l'utilizzo di videocamere in grado di registrare un numero elevato di fotografie, o fotogrammi, ogni secondo. Quando i fotogrammi vengono riprodotti mediante un proiettore, il pubblico vede un'immagine in movimento. L'animazione sul computer viene ottenuta in modo analogo, tuttavia i fotogrammi registrati possono essere ulteriormente distanziati nel tempo perché è il computer a interpolare e animare le variazioni da un fotogramma all'altro.

Funzionamento dell'animazione in Expression Blend

In Microsoft Expression Blend le animazioni sono basate su fotogrammi chiave che definiscono i punti iniziale e finale di una transizione visiva graduale. Per creare un'animazione in Expression Blend, è necessario creare uno storyboard. All'interno dello storyboard i fotogrammi chiave vengono impostati su una sequenza temporale per indicare le modifiche delle proprietà. Ad esempio, è possibile impostare un fotogramma chiave sull'indicatore del secondo 0 per registrare la posizione di un oggetto rectangle sul lato sinistro della tavola da disegno e quindi impostare un fotogramma chiave sull'indicatore del secondo 1 per registrare la posizione dello stesso oggetto rectangle sul lato destro della tavola da disegno. L'animazione risultante sarà basata sulla trasformazione che avviene nelle proprietà X e Y dell'oggetto rectangle in un secondo. Quando si esegue uno storyboard per animazioni, Expression Blend interpola le modifiche delle proprietà nel periodo di tempo stabilito e nell'applicazione vengono visualizzati i risultati di tale interpolazione. È possibile seguire questa modalità per applicare un'animazione a qualsiasi proprietà appartenente a un oggetto in una tavola da disegno, anche alle proprietà non visive.

Fotogrammi chiave in una sequenza temporale di uno storyboard denominato "MoveRight" che indicano le modifiche delle proprietà di traslazione X e Y di un oggetto rectangle

In alcuni programmi di animazione è possibile creare animazioni fotogramma per fotogramma, ovvero animazioni in cui ogni fotogramma può contenere un'immagine o un oggetto diverso. Questo tipo di animazioni possono raggiungere dimensioni notevoli e richiedere l'utilizzo di molte risorse in fase di esecuzione. Per questo motivo, in Expression Blend l'animazione si basa sui fotogrammi chiave, che tramite la registrazione delle modifiche delle proprietà consentono di animare in fase di esecuzione la transizione tra le varie modifiche. In Expression Blend, inoltre, tutti gli oggetti che potrebbe essere necessario far comparire o scomparire nella sequenza temporale dell'animazione sono presenti nell'intera sequenza temporale. Le proprietà di visibilità di tali oggetti possono tuttavia essere modificate tramite i fotogrammi chiave, facendo in modo che l'oggetto compaia o scompaia.

[!NOTA]

In Expression Blend non è possibile creare spontaneamente nuovi oggetti in uno storyboard, tuttavia è possibile generare nuovi oggetti e nuovi storyboard per animazioni a livello di programmazione nei file code-behind. Per ulteriori informazioni, vedere gli argomenti relativi ad animazione e temporizzazione  nella sezione di MSDN dedicata a Windows Presentation Foundation.

Storyboard

Gli storyboard sono contenitori di sequenze temporali di un'animazione.Expression Blend include un controllo selezione storyboard con cui è possibile selezionare e cercare storyboard nel progetto corrente.

Per ulteriori informazioni, vedere Aprire o chiudere uno storyboard.

Controllo selezione storyboard in cui sono elencati i diversi storyboard che è possibile aprire

Quando uno storyboard è selezionato, è possibile utilizzare un menu popup per duplicare, invertire, eliminare, rinominare o chiudere lo storyboard attualmente selezionato oppure creare un nuovo storyboard.

Per ulteriori informazioni, vedere Duplicare o invertire uno storyboard e Rinominare uno storyboard.

Menu a comparsa degli storyboard

È possibile impostare le proprietà degli storyboard per fare in modo che vengano invertiti o ripetuti automaticamente quando raggiungono la fine dell'ultima sequenza temporale.

Per ulteriori informazioni, vedere Modificare uno storyboard per la ripetizione o l'inversione.

È possibile creare storyboard dalle posizioni (o ambiti) dell'applicazione seguenti:

• Nel corpo principale del documento   Se lo scopo dell'applicazione è quello di presentare un'animazione o non è necessario riutilizzare l'animazione altrove, è possibile creare le sequenze temporali delle animazioni nel corpo principale del documento.

  Per un esempio, vedere Creare un'animazione semplice.

• In una scena o controllo utente   Se è necessario riutilizzare più volte un'animazione in un singolo documento o in un'altra applicazione, è possibile creare le sequenze temporali delle animazioni in un controllo utente. Ciò è utile anche se si desidera organizzare le animazioni in diversi documenti o progetti. I controlli utente possono essere aggiunti alla tavola da disegno così come qualsiasi altro controllo, ad esempio un pulsante. Per ulteriori informazioni, vedere la sezione "Scene" seguente.

  Per un esempio, vedere Creare un controllo utente vuoto o Creare un nuovo controllo utente nel progetto.

• Nel modello di un controllo   Se si desidera che a tutti i controlli di un determinato tipo dell'applicazione (ad esempio i pulsanti) venga applicata un'animazione allo stesso modo, è possibile creare l'animazione nel modello del controllo. Ciò non significa che tutti i controlli avranno lo stesso aspetto. Se si utilizza l'associazione ai modelli, ovvero l'associazione di una proprietà del modello a una proprietà del controllo al quale il modello è applicato, i singoli controlli possono essere di colore diverso o variare nell'aspetto visivo quando vengono animati.

  Per ulteriori informazioni, vedere Scegliere e utilizzare controlli interattivi. Per un esempio di Windows Presentation Foundation (WPF), vedere Esercitazione: aggiungere un'animazione a un pulsante.

• In uno stato   Se si desidera modificare l'animazione che ha luogo dopo la transizione in un nuovo stato, selezionare lo stato nel pannello Stati e fare clic su Mostra sequenza temporale  nel pannello Oggetti e sequenza temporale.

  Per informazioni sull'utilizzo degli stati, vedere Definire stati di visualizzazione diversi per un controllo.

Gli storyboard possono essere gestiti (avviati, interrotti, sospesi) utilizzando trigger impostati sugli oggetti mediante comportamenti o gestori dell'evento.

Per ulteriori informazioni, vedere Controllare l'esecuzione dello storyboard.

Sequenze temporali

Le sequenze temporali forniscono la struttura per le sequenze di animazione dell'applicazione. In Expression Blend un'animazione è composta da una sequenza temporale sulla quale si registrano i fotogrammi chiave che rappresentano la collocazione nel tempo delle modifiche alle proprietà. Le sequenze temporali possono essere viste come livelli di modifiche alle proprietà che vengono applicate a oggetti nella tavola da disegno. Le sequenze temporali sono contenute negli storyboard

e vengono gestite nel pannello Oggetti e sequenza temporale. I controlli disponibili nel pannello consentono di visualizzare la tavola da disegno man mano che subisce modifiche nel tempo, di aggiungere o modificare sequenze temporali e così via.

Fotogrammi chiave

Un fotogramma chiave è un marcatore sulla sequenza temporale che segnala il momento in cui si verifica una modifica di proprietà. In Expression Blend sono disponibili i quattro tipi di fotogramma chiave seguenti:

• I fotogrammi chiave a livello di oggetto si applicano a un intero oggetto, ad esempio un oggetto rectangle o un pannello grid che contiene più oggetti. In genere, a meno che non sia stato impostato manualmente facendo clic sul pulsante Registra fotogramma chiave, un fotogramma chiave a livello di oggetto indica che una delle proprietà è presente in un oggetto figlio che è stato modificato. Tale modifica può essere verificata espandendo i nodi dell'oggetto. Nell'immagine disponibile nella sezione precedente "Funzionamento dell'animazione in Expression Blend" in questo argomento, ad esempio, il fotogramma chiave impostato nella riga della sequenza temporale corrispondente a Rectangle è un fotogramma chiave a livello di oggetto.

• I fotogrammi chiave composti indicano che alla proprietà sono associate proprietà figlio cui è applicata un'animazione. Nell'immagine precedente, ad esempio, il fotogramma chiave impostato nella riga della sequenza temporale corrispondente alla proprietà Translate è un fotogramma chiave composto. L'utilizzo dei fotogrammi chiave composti risulta utile per modificare varie proprietà contemporaneamente con un'unica selezione, ad esempio quando si spostano fotogrammi chiave lungo la sequenza temporale.

• I fotogrammi chiave semplici rappresentano la modifica di un'unica proprietà in un istante specifico. Nell'immagine precedente, ad esempio, i fotogrammi chiave impostati nelle righe della sequenza temporale corrispondenti alle proprietà X e Y sono fotogrammi chiave semplici. È necessario utilizzare i fotogrammi chiave semplici per eseguire determinate azioni, ad esempio modificare il numero di ripetizioni di un'animazione.

  Per un esempio, vedere Impostare la durata del ciclo.

• I fotogrammi chiave impliciti sono presenti quando un'animazione viene interrotta da un'altra e nella seconda non è impostato alcun fotogramma chiave in corrispondenza dell'indicatore del secondo 0. Al momento dell'interruzione, in Expression Blend viene eseguita l'animazione della modifica tra l'ultimo valore noto di una proprietà e il valore impostato nel primo fotogramma chiave della seconda animazione. L'ultimo valore noto è considerato un fotogramma chiave implicito, anche se il valore si trova tra due fotogrammi chiave della prima animazione. Questa transizione viene denominata animazione uniforme ed è descritta più in dettaglio nella sezione"Utilizzare più sequenze temporali di animazione sovrapposte" seguente.

Conoscere la differenza tra i fotogrammi chiave risulta utile quando non si desidera visualizzare in modo dettagliato ogni proprietà cui è applicata un'animazione. In tal caso, è possibile comprimere le proprietà dei vari oggetti e visualizzare solo i fotogrammi chiave a livello di oggetto. È possibile utilizzare i fotogrammi chiave a livello di oggetto e quelli composti per modificare varie proprietà contemporaneamente con un'unica selezione, ad esempio quando si desidera spostare fotogrammi chiave lungo la sequenza temporale.

Per un esempio, vedere Incollare o spostare un fotogramma chiave.

È necessario utilizzare fotogrammi chiave semplici per eseguire determinate azioni, ad esempio modificare il numero di ripetizioni di un'animazione.

Per un esempio, vedere Impostare la durata del ciclo.

Transizione tra fotogrammi chiave

L'interpolazione dei fotogrammi chiave descrive il modo in cui le modifiche delle proprietà vengono animate nell'intervallo di tempo che intercorre tra due fotogrammi chiave.

È possibile modificare i valori di interpolazione dei fotogrammi chiave selezionando i valori di Variazione in entrata o Variazione in uscita, modificando un grafico KeySpline utilizzando un'opzione EasingFunction preimpostata che rappresenti un grafico KeySpline.

Editor del key spline per la creazione dell'interpolazione personalizzata tra fotogrammi chiave

Per ulteriori informazioni, vedere Modificare l'interpolazione di animazione tra fotogrammi chiave.

Creare sequenze temporali manualmente o tramite tracciati di movimento

[!NOTA]

I tracciati di movimento non sono supportati nei progetti di Microsoft Silverlight.

La creazione manuale della sequenza temporale di un'animazione consente un maggior controllo sul movimento e sul numero di oggetti animati nella sequenza temporale. È possibile creare un'animazione anche tra colori. Per creare manualmente la sequenza temporale di un'animazione in Expression Blend, fare clic su Nuovo in Oggetti e sequenza temporale e quindi registrare i fotogrammi chiave. A tale scopo, innanzitutto spostare l'indicatore di riproduzione della sequenza temporale e quindi modificare un oggetto nella tavola da disegno per generare un fotogramma chiave.

Per un esempio, vedere Creare un'animazione semplice.

La creazione automatica della sequenza temporale di un'animazione tramite lo strumento Converti in tracciato di movimento consente di fare in modo che nella tavola da disegno un oggetto segua un determinato tracciato, sia esso una linea o il perimetro di una forma quale un'ellisse o un rettangolo. Come illustrato nella figura seguente, il perimetro di un'ellisse si trasforma in un tracciato di movimento per il cerchio blu.

Creare una sequenza temporale di un'animazione tramite un tracciato di movimento

	Due oggetti distinti: un oggetto ellipse e un oggetto circle creati con lo strumento Ellisse.
	L'oggetto ellipse diventa un tracciato di movimento. A questo punto, se necessario, è possibile eliminare l'oggetto ellipse.
	Verrà creata una nuova sequenza temporale che, quando viene riprodotta, sposta l'oggetto circle lungo il tracciato ellittico.

Per un esempio su come utilizzare i tracciati di movimento per generare sequenze temporali di animazione, vedere Creare, modificare o eliminare un tracciato di movimento.

I tracciati di movimento non vengono rappresentati nella sequenza temporale da fotogrammi chiave, pertanto non è possibile modificare gli effetti di interpolazione. È tuttavia possibile modificare il numero delle ripetizioni.

Per ulteriori informazioni, vedere Impostare la durata del ciclo.

È inoltre possibile orientare l'oggetto animato in base al tracciato in modo tale che qualsiasi lato dell'oggetto rivolto verso il centro del tracciato continuerà a puntare a tale posizione per tutta la durata della sequenza temporale.

Per ulteriori informazioni, vedere la sezione "Per fare in modo che l'oggetto in movimento si riorienti continuamente in base al tracciato" in Creare, modificare o eliminare un tracciato di movimento.

Dopo la generazione del tracciato di movimento, è possibile aggiungere animazioni manuali alla stessa sequenza temporale che contiene il tracciato di movimento.

[!NOTA]

Non è possibile invertire un tracciato di movimento in Expression Blend invertendo lo storyboard che lo contiene. È possibile, tuttavia, trasformare (capovolgere) il tracciato per eseguirlo in modo inverso o è possibile utilizzare la proprietà dello storyboard AutoReverse per riprodurre lo storyboard in avanti e all'indietro.

Utilizzare più sequenze temporali di animazione sovrapposte

La struttura dello storyboard di Expression Blend consente di eseguire contemporaneamente più storyboard e più sequenze temporali nell'applicazione. È ad esempio possibile disegnare due cerchi che rappresentano una farfalla, creare una sequenza temporale per l'animazione della farfalla che si muove lungo un tracciato di movimento circolare e quindi creare una sequenza temporale di un'animazione distinta per le ali che sbattono. L'animazione delle ali può essere eseguita contemporaneamente all'animazione del movimento circolare, senza interrompere il movimento circolare, poiché le sequenze temporali non applicano un'animazione alle stesse proprietà dell'oggetto della farfalla.

Per un esempio, vedere Esercitazione: creare animazioni sovrapposte.

Se due sequenze temporali di animazione applicano contemporaneamente un'animazione alla stessa proprietà, la transizione tra le sequenze temporali avviene in modo diverso se nella seconda animazione si registra un fotogramma chiave sull'indicatore del secondo 0. Se tale operazione non viene eseguita, in Expression Blend viene presupposto che l'utente desideri aggiungere l'animazione a partire dall'ultimo valore della proprietà al momento dell'interruzione fino al valore della proprietà nel punto del primo fotogramma chiave della seconda sequenza temporale. Questo tipo di transizione viene denominato animazione uniforme. Si consideri, ad esempio, un cerchio che in una sequenza temporale si estende fino a raddoppiare in larghezza e in una seconda sequenza temporale si estende fino a quadruplicare in larghezza. Se la sequenza temporale della seconda animazione interrompe la prima e non include un fotogramma chiave impostato in corrispondenza dell'indicatore del secondo 0, l'ellisse si espande in modo graduale a partire dal momento in cui la prima sequenza temporale viene interrotta fino alla seconda sequenza temporale, arrivando a quadruplicare la larghezza originale. Se la seconda sequenza temporale di animazione non è un'animazione uniforme (ovvero se era impostato un fotogramma chiave in corrispondenza dell'indicatore del secondo 0), il cerchio passerebbe improvvisamente al punto di inizio della seconda animazione.

Per un esempio, vedere Esercitazione: utilizzare animazioni con e senza continuità.

[!NOTA]

Se due sequenze temporali aggiungono un'animazione alla stessa proprietà di un oggetto, la prima si interromperà al punto di interruzione anche se è impostata per la ripetizione continua.

Frequenze fotogrammi

In Expression Blend l'animazione viene creata tramite l'impostazione di fotogrammi chiave lungo una sequenza temporale. L'interpolazione tra i fotogrammi chiave viene eseguita in fase di esecuzione. Non è pertanto necessario configurare la frequenza fotogrammi dell'animazione. Quando si esegue l'applicazione, l'ambiente di esecuzione di .NET Framework esegue il rendering delle sequenze temporali dell'animazione con la frequenza fotogrammi più elevata possibile.

È comunque possibile specificare gli intervalli della sequenza temporale ai quali è possibile impostare un fotogramma chiave. Questa frequenza di intervalli viene denominata risoluzione snap poiché si riferisce alla posizione della sequenza temporale in cui può essere eseguito lo snap dell'indicatore di riproduzione o dei fotogrammi chiave . Se ad esempio la risoluzione snap è stata modificata e impostata su 10 fotogrammi chiave al secondo, è possibile impostare fotogrammi chiave ad ogni decimo di secondo lungo la sequenza temporale. Per modificare la risoluzione snap, fare clic sull'interruttore di snapping in Oggetti e sequenza temporale, quindi fare clic su Imposta snapping per visualizzare la finestra di dialogo Risoluzione snap.

Scene

In Expression Blend è possibile inserire le animazioni all'interno di scene, o controlli utente, e utilizzare tali animazioni più volte in altri documenti nell'applicazione. I controlli utente possono essere creati in un singolo documento o in un file DLL, ovvero una libreria di controlli. È possibile accedere a qualsiasi controllo utente incluso nell'applicazione e successivamente inserirlo in un documento come qualsiasi altro controllo, facendo clic sulla categoria Progetto del pannello Asset 

[!NOTA]

Dopo aver aggiunto al progetto un controllo utente, affinché tale controllo venga visualizzato nel pannello Asset è necessario compilare il progetto. Scegliere Compila progetto dal menu Progetti.

Durante la pianificazione delle animazioni da applicare a un controllo utente, è necessario tenere in considerazione i fattori seguenti:

• I tempi delle varie animazioni   Si consideri ad esempio un'applicazione nella quale prima viene animata una schermata iniziale e quindi viene animata l'interfaccia utente con un effetto dissolvenza in entrata. È possibile inserire ogni animazione nel proprio controllo utente, ma all'inizio della seconda animazione lasciare un tempo sufficiente per far finire l'animazione della schermata iniziale.

• Le proprietà e i trigger che si desidera siano disponibili nelle animazioni   Si consideri ad esempio un'applicazione che include un pulsante e un'animazione contenuta in un controllo utente. Non è possibile aggiungere un trigger al controllo utente che avvierà la sequenza temporale dell'animazione al clic del pulsante, a meno che anche il pulsante non faccia parte del controllo utente. È possibile, inoltre, eseguire associazioni dati tra valori di proprietà solo se entrambe le proprietà si trovano nello stesso controllo utente.

  [!NOTA]

  I trigger non sono disponibili nei progetti di Silverlight. Tuttavia, è possibile utilizzare comportamenti per controllare gli storyboard e le transizioni di stato.

  Per ulteriori informazioni, vedere Utilizzo dei comportamenti.

Per ulteriori informazioni sui controlli utente, vedere Creare un controllo utente vuoto oppure vedere la sezione "Storyboard in controlli utente" in Controllare l'esecuzione dello storyboard.

Eseguire il test di storyboard

In un progetto di Expression Blend il test degli storyboard può essere eseguito in modi diversi, ad esempio nell'ambiente di sviluppo o in fase di esecuzione quando l'applicazione viene compilata (scegliere Esegui progetto dal menu Progetti o premere F5). Per eseguire il test nell'ambiente di sviluppo, è possibile utilizzare i controlli per la riproduzione disponibili nel pannello Oggetti e sequenza temporale.

Controlli per la riproduzione nel pannello Oggetti e sequenza temporale

• Vai a primo fotogramma   Sposta l'indicatore di riproduzione sul primo fotogramma dell'animazione.

• Vai a fotogramma precedente   Sposta l'indicatore di riproduzione sul fotogramma precedente.

• Play   Riproduce l'animazione a partire dall'istante corrente.

• Vai a fotogramma successivo   Sposta l'indicatore di riproduzione sul fotogramma successivo.

• Vai a ultimo fotogramma   Sposta l'indicatore di riproduzione sull'ultimo fotogramma dell'animazione.

Eseguire lo scrubbing della sequenza temporale

L'esecuzione dello scrubbing di una sequenza temporale rappresenta una tecnica estremamente utile per controllare in modo preciso la velocità e la posizione dell'animazione da visualizzare in anteprima o di cui eseguire il test. Per eseguire lo scrubbing. è sufficiente trascinare l'indicatore di riproduzione. Man mano che si trascina l'indicatore di riproduzione, l'animazione verrà visualizzata sulla tavola da disegno. È possibile eseguire lo scrubbing dei fotogrammi normalmente oppure in ordine inverso. La velocità di riproduzione dell'animazione dipende alla velocità con cui si trascina l'indicatore di riproduzione.

Per un esempio, vedere Eseguire lo scrubbing della sequenza temporale.

Snapping temporale

Nel pannello Oggetti e sequenza temporale sono contenuti strumenti che consentono di controllare la riproduzione dell'animazione e di spostarsi nel tempo in base a un valore espresso in unità discrete (fotogrammi al secondo) e determinato dalla risoluzione di snap. Lo snapping temporale viene utilizzato quando ci si sposta nel tempo utilizzando i controlli per la riproduzione. Quando si fa clic sui pulsanti relativi al fotogramma precedente o successivo, l'indicatore di riproduzione viene spostato avanti o indietro in base alla quantità di fotogrammi al secondo specificata, che viene determinata dalla risoluzione di snap.

Finestra di dialogo Risoluzione snap

Per esempi relativi all'utilizzo della risoluzione snap, vedere Attivare o disattivare lo snapping della sequenza temporale e Modificare la risoluzione di snap.

[!NOTA]

Lo snapping della sequenza temporale non viene applicato alla frequenza fotogrammi o alla velocità dell'animazione durante l'esecuzione dell'applicazione. Per ulteriori informazioni, vedere la sezione precedente "Frequenze fotogrammi" in questo argomento.

Campo relativo all'istante corrente

Nel campo relativo all'istante corrente viene visualizzato l'istante attualmente selezionato, espresso nella forma MM.SS.xxx (minuti, secondi, millisecondi). Per spostarsi in modo rapido su un istante specifico, è possibile immetterne il valore numerico in questo campo.

Casella di testo Posizione indicatore di riproduzione che indica il valore 1,450 secondi

Per un esempio di utilizzo del campo relativo all'istante corrente, vedere Passare a un punto specifico in una sequenza temporale.

Trigger

È possibile utilizzare i trigger per modificare lo stato di un oggetto nella tavola da disegno in risposta ad eventi o modifiche di proprietà. Tramite i trigger è possibile avviare e interrompere le sequenze temporali delle animazioni. Ad esempio, quando si crea una sequenza temporale viene creato un trigger predefinito che eseguirà la sequenza temporale al primo caricamento dell'applicazione. È possibile modificare tale trigger o crearne altri che eseguiranno la sequenza temporale quando un utente fa clic su un pulsante o esegue altri azioni.

Per informazioni dettagliate sui trigger, vedere Utilizzo di trigger per definire il comportamento di un controllo WPF.

[!NOTA]

I trigger non sono disponibili nei progetti di Silverlight. Tuttavia, è possibile utilizzare comportamenti per controllare gli storyboard e le transizioni di stato.

Per ulteriori informazioni, vedere Utilizzo dei comportamenti.

Gestori degli eventi

I gestori degli eventi sono metodi che si programmano per essere eseguiti al verificarsi di un determinato evento, ad esempio l'evento MouseOver. È possibile utilizzare un gestore di eventi anziché un trigger se è necessario eseguire operazioni più complesse della semplice impostazione di una proprietà o del controllo della sequenza temporale di un'animazione al verificarsi di un evento nell'applicazione. I metodi dei gestori degli eventi consentono di aggiungere logica di programmazione, ad esempio l'impostazione di una proprietà in un altro oggetto, il caricamento di un nuovo documento, la creazione di un nuovo oggetto, l'utilizzo di calcoli matematici per l'applicazione di un'animazione a un oggetto, e così via. Se ad esempio si desidera determinare il tasto premuto durante l'evento KeyDown, è necessario creare un metodo di un gestore degli eventi che verrà chiamato quando il tasto viene premuto e aggiungere codice per determinare quale tasto è stato premuto.

I metodi del gestore dell'evento sono definiti nel file code-behind del documento. In un progetto WPF o Silverlight, i file code-behind vengono creati in Microsoft Visual C# o Microsoft Visual Basic .NET.

Per esempi, vedere Controllare elementi multimediali utilizzando trigger in una sequenza temporale e Esercitazione: caricare una nuova pagina dinamicamente nell'applicazione Silverlight.

Animazione creata tramite codice

Quando in Expression Blend è attiva la visualizzazione Struttura, è possibile creare intere sequenze temporali di animazioni senza modificare il codice XAML o il codice di un file code-behind. È inoltre possibile configurare trigger per l'avvio, l'interruzione e la sospensione delle sequenze temporali delle animazioni in base alle interazioni con l'utente. Nella visualizzazione Struttura di Expression Blend è possibile eseguire tutte le operazioni relative all'animazione più comunemente utilizzate.

Alcuni scenari avanzati di animazione richiedono la codifica (in C# o Visual Basic .NET), ad esempio l'utilizzo di calcoli matematici per determinare il movimento di un oggetto. Se si intende modificare le sequenze temporali delle animazioni in file code-behind, è utile conoscere il modello di animazione della tecnologia utilizzata nell'applicazione (WPF o Silverlight).

Nel codice XAML le sequenze temporali delle animazioni vengono rappresentate da un elemento STORYBOARD. Quando ad esempio si crea la sequenza temporale di un'animazione nella visualizzazione Struttura di Expression Blend, il codice XAML generato per l'animazione sarà simile al seguente:

<Window.Resources>
  <Storyboard x:Key="MoveRight">
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
        Storyboard.TargetName="rectangle"
        Storyboard.TargetProperty="...(TranslateTransform.Y)">
      <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
      <SplineDoubleKeyFrame KeyTime="00:00:01" Value="375"/>
    </DoubleAnimationUsingKeyFrames>
  </Storyboard>
</Window.Resources>

Gli attributi dell'esempio di codice XAML precedente sono i seguenti:

• L'attributo x:Key specifica il nome della sequenza temporale o dello storyboard.

• L'attributo BeginTime specifica il momento di avvio dell'animazione. In questo caso, l'indicatore del secondo 0.

• L'attributo TargetName specifica il nome dell'elemento al quale lo storyboard o la sequenza temporale applica un'animazione. In questo caso è un oggetto denominato "rectangle".

• L'attributo TargetProperty specifica la proprietà che verrà modificata, ovvero in questo caso la proprietà di posizione Y dell'oggetto rectangle.

• Gli attributi KeyTime specificano gli intervalli di tempo ai quali verranno eseguire le modifiche delle proprietà di destinazione e i relativi nuovi valori da impostare. Nella visualizzazione Struttura di Expression Blend questi elementi vengono rappresentati dai fotogrammi chiave nella sequenza temporale.

È possibile gestire a livello di programmazione le sequenze temporali delle animazioni nei file code-behind tramite codice C# o Visual Basic .NET. Per avviare, ad esempio, la sequenza temporale di animazione precedente in un file code-behind, il codice C# sarà simile al seguente:

Storyboard moveRight;
moveRight = (Storyboard)this.Resources["MoveRight"];
moveRight.Begin(this);

Per ulteriori informazioni su come creare e manipolare sequenze temporali di animazione in file code-behind e XAML, vedere gli argomenti relativi ad animazione e temporizzazione  nella sezione di MSDN dedicata a Windows Presentation Foundation oppure vedere gli esempi e le esercitazioni pubblicate sul sito Web Microsoft Expression .

Copyright © 2011 Microsoft Corporation. Tutti i diritti riservati.