Condividi tramite

Esercitazione: creare un pulsante con effetto di attivazione

  • Articolo

Cc294737.bf9c77b1-ba7a-4f3b-8380-d05728d208d1(it-it,Expression.40).png

È possibile creare un effetto di attivazione nel modello di un pulsante modificando l'aspetto del pulsante in base all'interazione dell'utente. Come alternativa all'attivazione di una sequenza temporale di animazione o all'attivazione di modifiche delle proprietà per produrre un effetto di attivazione, è possibile utilizzare la procedura seguente per creare più pannelli Grid che rappresentino i singoli stati del pulsante e quindi alternare le proprietà Visibility di ogni pannello Grid.

Per creare un effetto di attivazione in un pulsante

  1. Disegnare un oggetto SimpleButton nella tavola da disegno.

    tip noteSuggerimento:

    I controlli di stile semplici sono disponibili in Simple Styles nella categoria Stili del pannello Asset Cc294737.0d8b8d29-1af9-418f-8741-be3097d76eab(it-it,Expression.40).png. Dopo aver selezionato uno stile semplice nell'elenco, è possibile disegnarlo nella tavola da disegno.

  2. Fare clic con il pulsante destro del mouse su Button nel pannello 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 o modificare un modello.

    tip noteSuggerimento:

    Per uscire dalla modalità di modifica del modello e tornare all'ambito del documento, fare clic su Reimposta l'ambito Cc294737.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(it-it,Expression.40).png, disponibile 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. Dalla Barra degli strumenti aggiungere tre controlli GridCc294737.a87ee957-7fbf-4135-a6ab-6de7e63160aa(it-it,Expression.40).png all'oggetto Grid radice del modello. Per riempire l'oggetto Grid padre con i nuovi oggetti Grid, selezionarli, scegliere Ridimensiona automaticamente dal menu Oggetto e quindi fare clic su Fill.

  6. Fare clic con il pulsante destro del mouse sull'oggetto ContentPresenter, scegliere Ordine e quindi fare clic su Porta in primo piano per posizionare l'oggetto ContentPresenter in primo piano rispetto ai nuovi oggetti Grid.

  7. Nel pannello Oggetti e sequenza temporale rinominare i nuovi oggetti griglia rispettivamente in "Default", "Pressed" e "MouseOver" facendo clic con il pulsante destro del mouse su ciascun oggetto, quindi scegliendo Rinomina.

  8. Per impostare il comportamento dei trigger, è necessario rendere visibile solo un oggetto griglia per trigger. Ad esempio, dopo aver selezionato l'opzione Predefinito nel pannello Trigger, fare clic sugli oggetti della griglia Pressed e MouseOver tenendo premuto CTRL per selezionarli entrambi. In Aspetto nel pannello Proprietà impostare quindi la proprietà Visibility su Hidden.

  9. Fare clic su IsMouseOver = True nel pannello Trigger, selezionare gli oggetti della griglia Pressed e Default e quindi in Aspetto nel pannello Proprietà impostare la proprietà Visibility su Hidden. Selezionare l'oggetto della griglia MouseOver e impostare la proprietà Visibility su Visible.

  10. Infine, dopo aver selezionato IsPressed = True in Trigger, selezionare gli oggetti della griglia MouseOver e Default e quindi in Aspetto nel pannello Proprietà impostare la proprietà Visibility su Hidden. Selezionare l'oggetto della griglia Pressed e impostare la proprietà Visibility su Visible.

  11. È ora possibile disegnare ciascun oggetto griglia nel modo in cui si desidera che venga visualizzato in base alle diverse condizioni selezionate nel pannello Trigger.

    È possibile utilizzare strumenti di disegno e sequenze temporali di animazione per definire un comportamento esclusivo per il pulsante.

    Per ulteriori informazioni, vedere Disegnare oggetti e Animazione di oggetti.

    Per progettare uno degli oggetti griglia senza che gli altri siano visibili, fare clic su Mostra/NascondiCc294737.3df73f86-a06e-4df8-b696-261c23fac3cc(it-it,Expression.40).png a fianco degli altri oggetti Grid nel pannello Objects and Timeline.

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

Vedere anche

Concetti

SimpleButton

Copyright © 2011 Microsoft Corporation. Tutti i diritti riservati.