Esercitazione: aggiungere un'animazione a un pulsante
.png "Questa pagina si applica solo ai progetti WPF")
Alle modifiche dello stato del controllo SimpleButton non viene aggiunta 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 oggetto SimpleButton nella tavola da disegno di Expression Blend.
.gif "tip note")
Suggerimento:I controlli stile semplice sono disponibili in Simple Styles nella categoria Stili del pannello Asset. 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 modello, quindi fare clic su Modifica corrente. Se non si desidera modificare il dizionario risorse SimpleStyles.xaml, è possibile fare clic su Modifica copia anziché su Modifica corrente, 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 nell'ambito del documento, fare clic su Reimposta l'ambito
.png "Cc294783.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(it-it,Expression.40).png")
sopra la struttura ad albero degli oggetti nel pannello Oggetti e sequenza temporale.Per tornare alla modalità di modifica del modello per un modello esistente, nel pannello Oggetti e sequenza temporale fare clic con il pulsante destro del mouse sull'elemento di cui si desidera modificare il modello, scegliere Modifica modello, quindi fare clic su Modifica corrente.
Nell'ambito di modifica del modello del controllo eliminare l'oggetto figlio Border dell'oggetto Grid.
Fare doppio clic sull'oggetto Grid per renderlo attivo, in modo da poter aggiungere oggetti figlio.
Disegnare un Rectangle
.png "Cc294783.ae750268-92e8-403a-9e07-b662da4e9e1e(it-it,Expression.40).png")
nella griglia.Fare clic con il pulsante destro del mouse sull'oggetto Rectangle, scegliere Ordine e quindi fare clic su Porta in secondo piano per posizionarlo dietro l'oggetto ContentPresenter.
Impostare un nuovo valore per la proprietà Fill del rettangolo in Pennelli nel pannello Proprietà. Questo valore costituirà il colore predefinito del pulsante.
Suggerimento:L'oggetto figlio Border del modello originale utilizza la funzionalità di associazione a modello per associare la proprietà Fill del modello alla proprietà Background del controllo cui è applicato il modello. È possibile utilizzare l'associazione a modelli per trasportare proprietà di oggetti all'interno del modello e creare in tal modo più pulsanti con sfondi diversi ma che utilizzano lo stesso modello. Non è tuttavia possibile 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.
Nel pannello Trigger fare clic sul trigger IsMouseOver = True per attivarne la registrazione. Accanto ad Azioni all'attivazione fare clic sul pulsante Aggiungi nuova azione
.png "Cc294783.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(it-it,Expression.40).png")
per aggiungere una sequenza temporale di animazione. Se non è già presente una sequenza temporale da attivare quando viene spostato il puntatore 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, potrebbe essere necessario regolare le finestre del pannello Trigger. Per ridimensionare le finestre, utilizzare il mouse.
Nel pannello Oggetti e sequenza temporale spostare l'indicatore di riproduzione
.png "Cc294783.5626c9eb-40bb-450a-9ca1-3678e5abe429(it-it,Expression.40).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.fa3c696d-5463-4000-8a6b-650fe6759bf7(it-it,Expression.40).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.Nel pannello Trigger 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 a 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 nel pannello Trigger.
Eseguire un test dell'applicazione (F5) per visualizzare gli effetti.
Vedere anche
Attività
Aggiungere o rimuovere un trigger in un controllo WPF
Creare un'animazione semplice
Concetti
SimpleButton
Utilizzo di trigger per definire il comportamento di un controllo WPF
Copyright © 2011 Microsoft Corporation. Tutti i diritti riservati.