Esercitazione: aggiungere un'animazione a un pulsante
.png "Questa pagina si applica solo ai progetti di WPF")
Alle modifiche dello stato del controllo SimpleButton non viene applicata alcuna animazione. Viene invece impostata una risorsa pennello quando si verificano modifiche allo stato. In Microsoft Expression Blend non è possibile applicare un'animazione da una risorsa pennello a un colore. La procedura seguente offre un'alternativa tramite l'utilizzo di trigger di proprietà per avviare sequenze temporali di animazione.
Per applicare un'animazione a un pulsante
Disegnare un controllo SimpleButton nella tavola da disegno di Expression Blend.
.gif "Suggerimento")
Suggerimento:I controlli stile semplice sono disponibili nella categoria Simple Styles della scheda Controlli nella Libreria
.png "Cc294783.0224cabd-5da1-4e01-bddd-4a647401a098(it-it,Expression.10).png")
. Dopo aver selezionato uno stile semplice nell'elenco, è possibile disegnarlo nella tavola da disegno.Fare clic con il pulsante destro del mouse sul pulsante in Oggetti e sequenza temporale, scegliere Modifica parti del controllo (modello) e quindi fare clic su Modifica modello. Se non si desidera modificare il dizionario risorse SimpleStyles.xaml, è possibile fare clic su Modifica copia anziché su Modifica modello, per creare un nuovo modello e salvarlo nel documento. Per ulteriori informazioni sulla creazione di una copia, vedere Creare una risorsa.
Suggerimento:Per uscire dalla modalità di modifica del modello e tornare all'ambito del documento, fare clic sul pulsante Ambito padre
.png "Cc294783.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(it-it,Expression.10).png")
, disponibile sopra la struttura dell'elemento nel pannello Interazione.Per tornare alla modalità di modifica del modello per un modello esistente, in Oggetti e sequenza temporale fare clic con il pulsante destro del mouse sull'elemento di cui si desidera modificare il modello, scegliere Modifica parti del controllo (modello) e quindi fare clic su Modifica modello.
Nell'ambito di modifica del modello del controllo eliminare l'elemento figlio Border di Grid.
Fare doppio clic sull'elemento Grid per renderlo attivo, in modo da poter aggiungere elementi figlio.
Disegnare un elemento Rectangle
.png "Cc294783.ae750268-92e8-403a-9e07-b662da4e9e1e(it-it,Expression.10).png")
nella griglia.Fare clic con il pulsante destro del mouse sull'elemento Rectangle, scegliere Ordine e quindi fare clic su Porta in secondo piano per portare l'elemento dietro ContentPresenter.
Impostare un nuovo valore per la proprietà Fill del rettangolo in Pennelli nel pannello Proprietà. Il valore corrisponderà al colore predefinito del pulsante.
Suggerimento:L'elemento figlio Border del modello originale utilizza la funzionalità di associazione a modello per associare la proprietà Fill del modello alla proprietà Background del controllo a cui è applicato il modello. La funzionalità di associazione a modello consente di utilizzare nel modello alcune proprietà impostate nel controllo e, in tal modo, di creare più pulsanti con colori di sfondo diversi ma che utilizzano lo stesso modello. Non è possibile, tuttavia, applicare un'animazione da una proprietà associata mediante modello a un colore specifico. Per questo motivo, viene impostato un colore predefinito per la proprietà Fill nel modello.
In Trigger nel pannello Interazione fare clic sul trigger IsMouseOver = True per attivare la registrazione del trigger. Accanto ad Azioni all'attivazione fare clic sul pulsante Aggiungi nuova azione
.png "Cc294783.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(it-it,Expression.10).png")
per aggiungere una sequenza temporale di animazione. Se non è già presente una sequenza temporale da attivare quando viene spostato il mouse sul pulsante, verrà visualizzata una finestra Necessaria sequenza temporale. Fare clic su OK per creare una nuova sequenza temporale e avviare la registrazione.Suggerimento:Per visualizzare tutti i trigger e le azioni disponibili in Trigger, potrebbe essere necessario modificare le finestre del pannello Interazione. Per ridimensionare le finestre, utilizzare il mouse.
In Oggetti e sequenza temporale spostare l'indicatore di riproduzione
.png "Cc294783.5626c9eb-40bb-450a-9ca1-3678e5abe429(it-it,Expression.10).png")
in corrispondenza del secondo 1 e quindi impostare un nuovo valore per la proprietà Fill in Pennelli nel pannello Proprietà.Non appena viene modificata la proprietà Fill, nella sequenza temporale viene visualizzato un fotogramma chiave
.png "Cc294783.80da70bb-e635-42e8-b26d-f90453096e21(it-it,Expression.10).png")
. Non è necessario impostare un fotogramma chiave in corrispondenza del secondo 0. Quando il puntatore del mouse viene spostato sul pulsante, alla sequenza temporale verrà applicata un'animazione dal riempimento precedente al riempimento impostato in corrispondenza del secondo 1.In Trigger nel pannello Interazione fare nuovamente clic sul trigger IsMouseOver = True per uscire dalla sequenza temporale di animazione e tornare alla modalità di registrazione per il trigger. Fare clic sul pulsante Aggiungi nuova azione
accanto ad Azioni alla disattivazione. Creare o selezionare la sequenza temporale di animazione da eseguire quando il puntatore del mouse verrà allontanato dal pulsante. È possibile, ad esempio, utilizzare la sequenza temporale precedente, ma selezionando il metodo Stop per la sequenza temporale.Se lo si desidera, è possibile creare sequenze temporali di animazione per altri stati in Trigger.
Eseguire un test dell'applicazione (F5) per visualizzare gli effetti.