Esercitazione: creare un pulsante utilizzando effetti bitmap
.png "Questa pagina si applica solo ai progetti di 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 bitmap in ogni stato.
Per creare effetti bitmap in un pulsante
Disegnare un SimpleTabControl nella tavola da disegno in Expression Blend.
.gif "Suggerimento")
Suggerimento:I controlli stile semplice sono disponibili nella categoria Simple Styles della scheda Controlli nella Libreria
.png "Cc295324.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 per l'impostazione dell'ambito padre
.png "Cc295324.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 nella griglia e quindi impostare la proprietà Fill sul colore giallo in Pennelli nel pannello Proprietà.
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.
Arrotondare i bordi dell'elemento Rectangle utilizzando l'adorner
.png "Cc295324.8ff4c5e0-3b7f-49d7-97cb-ad373c3a7fe7(it-it,Expression.10).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à.Con l'elemento Rectangle ancora selezionato, individuare la proprietà BitmapEffect nella sezione Avanzate
.png "Cc295324.81e110f1-4068-4299-957d-0693cea95088(it-it,Expression.10).png")
in Aspetto nel pannello Proprietà. Fare clic sulla freccia rivolta verso il basso e quindi su Smussatura. Lasciare la proprietà BevelWidth impostata su 5, ma modificare le altre proprietà relative alla smussatura fino a ottenere l'effetto desiderato.In Trigger nel pannello Interazione fare clic sul trigger IsMouseOver = True per attivare la registrazione del trigger. Nel pannello Proprietà fare nuovamente clic sulla freccia in giù della casella a discesa accanto alla proprietà BitmapEffect, fare clic su Smussatura e quindi modificare la proprietà BevelWidth impostandola su 10.
In Proprietà per stato attivo in Trigger verrà visualizzata una nuova riga che rifletterà la modifica della proprietà applicata quando il mouse viene spostato sul pulsante.
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 Trigger nel pannello Interazione fare clic sul trigger IsPressed = True per attivare la registrazione del trigger. Nel pannello Proprietà fare nuovamente clic sulla freccia rivolta verso il basso accanto alla proprietà BitmapEffect, fare clic su Smussatura e quindi modificare la proprietà BevelWidth impostandola su 2.
In Proprietà per stato attivo in Trigger verrà visualizzata una nuova riga che rifletterà la modifica della proprietà applicata quando si fa clic sul pulsante.
Fare clic su Predefinito in Trigger nel pannello Interazione per disattivare la registrazione del trigger.
Eseguire un test dell'applicazione (F5) per visualizzare gli effetti.
Suggerimento:Poiché gli effetti bitmap non dispongono di accelerazione hardware, è consigliabile impostare un valore esplicito ed evitare di applicare un'animazione ai valori utilizzando un trigger di evento e una sequenza temporale di animazione.