Condividi tramite


Esercitazione: applicare uno stile a un pulsante utilizzando effetti

Questa pagina si applica solo ai progetti WPF

Oltre a utilizzare trigger di proprietà per modificare l'aspetto di un pulsante in base all'interazione dell'utente, in Microsoft Expression Blend è anche possibile applicare un effetto a ciascuno stato.

Per creare effetti in un pulsante

  1. Disegnare un oggetto SimpleButton nella tavola da disegno di Expression Blend.

    tip noteSuggerimento:

    I controlli di stile semplici 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.

  2. 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.

    tip noteSuggerimento:

    Per uscire dalla modalità di modifica del modello e tornare nell'ambito del documento, fare clic su Reimposta l'ambitoCc295324.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.

  3. Nell'ambito di modifica del modello del controllo eliminare l'oggetto figlio Border dell'oggetto Grid.

  4. Fare clic sull'oggetto Grid per attivarlo, in modo da poter aggiungere oggetti figlio.

  5. Disegnare un oggetto Rectangle nella griglia e quindi impostare la proprietà Fill sul colore giallo in Pennelli nel pannello Proprietà.

  6. 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.

  7. Arrotondare i bordi dell'oggetto Rectangle utilizzando l'Adorner Cc295324.8ff4c5e0-3b7f-49d7-97cb-ad373c3a7fe7(it-it,Expression.40).png visualizzato quando il puntatore del mouse viene spostato su uno dei due punti di controllo esterni all'angolo superiore sinistro del rettangolo oppure utilizzando le proprietà RadiusX e RadiusY in Aspetto nel pannello Proprietà.

  8. Dalla categoria Effetti del pannello Asset trascinare l'oggetto DropShadowEffect sull'oggetto Rectangle.

    Verrà aggiunta un'ombreggiatura all'oggetto Rectangle come oggetto figlio.

  9. Dopo aver selezionato DropShadowEffect nel pannello Oggetti e sequenza temporale, modificare le proprietà dell'effetto nel pannello Proprietà. Impostare la proprietà ShadowDepth su 20.

  10. Nel pannello Trigger fare clic sul trigger IsMouseOver = True per attivarne la registrazione. Nel pannello Proprietà impostare la proprietà ShadowDepth su 25.

    In Proprietà per stato attivo nel pannello Trigger verrà visualizzata una nuova riga che rifletterà la modifica della proprietà applicata quando il mouse viene spostato sul pulsante.

    tip noteSuggerimento:

    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.

  11. Nel pannello Trigger fare clic sul trigger IsPressed = True per attivarne la registrazione. Nel pannello Proprietà impostare la proprietà ShadowDepth su 10.

    In Proprietà per stato attivo nel pannello Trigger verrà visualizzata una nuova riga che rifletterà la modifica della proprietà applicata quando si fa clic con il mouse nell'applicazione in esecuzione.

  12. Fare clic su Predefinito nel pannello Trigger per disattivare la registrazione del trigger.

  13. Eseguire un test dell'applicazione (F5) per visualizzare gli effetti.

Vedere anche

Attività

Aggiungere o rimuovere un trigger in un controllo WPF

Concetti

SimpleButton
Utilizzo di trigger per definire il comportamento di un controllo WPF
Applicazione di effetti

Copyright © 2011 Microsoft Corporation. Tutti i diritti riservati.