Esercitazione: creare un pulsante con effetto di attivazione

È 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 ogni stato del pulsante e quindi alternare le proprietà Visibility di ogni pannello Grid.

Per creare un effetto di attivazione in un pulsante

1. Disegnare un SimpleButton sulla tavola da disegno in Microsoft Expression Blend.

   Suggerimento:
   I controlli stile semplice sono disponibili nella categoria Simple Styles della scheda Controlli nella Libreria. 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 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, 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.

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

4. Fare doppio clic sull'elemento Grid per renderlo attivo in modo da poter aggiungere elementi figlio.

5. Dalla Barra degli strumenti aggiungere tre controlli Grid nel pannello Grid del modello. È possibile aggiungere tali controlli rapidamente facendo doppio clic sull'icona Grid nella casella degli strumenti, facendo clic con il pulsante destro del mouse su ogni controllo Grid in Oggetti e sequenza temporale, scegliendo Ridimensiona automaticamente e quindi facendo clic su Riempi.

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

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

8. Per impostare il comportamento dei trigger, è necessario rendere visibile solo un oggetto Grid per trigger. Ad esempio, con Default selezionato in Trigger nel pannello Interazione, fare clic sugli oggetti Grid Pressed e MouseOver tenendo premuto CTRL per selezionarli entrambi. In Aspetto nel pannello Proprietà impostare la proprietà Visibility su Hidden.

9. Fare clic su IsMouseOver = True in Trigger nel pannello Interazione, selezionare gli oggetti Grid Pressed e Default e quindi impostare la proprietà Visibility su Hidden in Aspetto nel pannello Proprietà.

10. Infine, dopo avere selezionato IsPressed = True in Trigger, selezionare gli oggetti Grid MouseOver e Default e quindi impostare la proprietà Visibility su Hidden in Aspetto nel pannello Proprietà.

11. A questo punto sarà possibile progettare ogni oggetto Grid nel modo in cui si desidera venga visualizzato nelle diverse condizioni. È possibile utilizzare strumenti di disegno e sequenze temporali di animazione per definire un comportamento esclusivo per il pulsante. Per progettare uno degli oggetti Grid senza che gli altri siano visibili, è possibile fare clic sul pulsante Nascondi/Mostra accanto agli altri oggetti Grid in Oggetti e sequenza temporale.

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

Vedere anche

Concetti

SimpleButton