Esercitazione: personalizzare l'aspetto del pulsante di espansione in un controllo SimpleComboBox

In Microsoft Expression Blend è possibile personalizzare con facilità l'aspetto del pulsante di espansione di una casella combinata utilizzando il modello del controllo ToggleButton dell'elemento SimpleComboBox.

Per personalizzare il pulsante di espansione in un controllo SimpleComboBox

1. Disegnare un controllo SimpleComboBox sulla tavola da disegno di Expression Blend.

   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.

2. Aggiungere un elemento alla casella combinata facendo clic con il pulsante destro del mouse sulla casella combinata nel pannello Oggetti e sequenza temporale e scegliendo quindi Aggiungi SimpleComboBoxItem.

3. Aggiungere uno o due elementi alla casella combinata ripetendo il passaggio precedente.

4. Fare clic con il pulsante destro del mouse su ComboBox nel pannello Oggetti e sequenza temporale, scegliere Modifica modello e 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 all'ambito del documento, fare clic su Ambito padre, disponibile sopra la struttura dell'elemento 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 e fare clic su Modifica corrente.

5. Nell'ambito di modifica del modello del controllo, espandere tutti i nodi nel pannello Oggetti e sequenza temporale.

6. Fare clic con il pulsante destro del mouse sull'elemento ToggleButton nel pannello Oggetti e sequenza temporale, scegliere Modifica modello, quindi effettuare una delle operazioni seguenti:

   • Se nel passaggio 4 era stato scelto il comando Modifica corrente, fare clic su Modifica corrente per modificare il modello del controllo ExpanderToggeButton archiviato in SimpleStyles.xaml.

   • Se nel passaggio 4 era stato scelto il comando Modifica copia, a questo punto fare clic su Modifica copia per creare una copia del modello del controllo ExpanderToggeButton e archiviarla nella stessa posizione del modello utilizzato per ComboBox.

   L'aspetto del pulsante di espansione viene progettato nel modello del controllo ExpanderToggeButton. Si noti che l'elemento Grid nel modello viene esteso per l'intera larghezza della casella combinata. Questa progettazione consente di visualizzare l'elenco a discesa indipendentemente dalla posizione in cui l'utente fa clic all'interno della casella combinata.

7. Selezionare l'elemento Arrow nel pannello Oggetti e sequenza temporale per identificarlo nella tavola da disegno. L'elemento Arrow è un tracciato che rappresenta il pulsante di espansione per il controllo ComboBox.

   È possibile modificare l'elemento Arrow utilizzando lo strumento Selezione diretta per modificare i punti del tracciato In alternativa, è possibile eliminare l'elemento Arrow e creare quindi un nuovo elemento utilizzando lo strumento Penna nel pannello Strumenti.

   Suggerimento:
   Per eseguire lo zoom avanti nella tavola da disegno, è possibile utilizzare la casella di testo Zoom disponibile nella parte inferiore della tavola da disegno oppure la rotellina del mouse mentre si tiene premuto CTRL.

   Suggerimento:
   In alternativa al disegno di un elemento tracciato con lo strumento Penna, è possibile utilizzare una risorsa grafica importata da Microsoft Expression Design oppure un file di immagine da aggiungere al progetto.

8. L'effetto di attivazione generato quando si fa clic sul pulsante di espansione è definito da trigger di proprietà che modificano l'aspetto degli elementi Rectangle nel modello del controllo ToggleButton. È possibile aggiungere una nuova modifica della proprietà ai trigger esistenti per fare in modo che l'elemento Arrow ruoti quando si fa clic sul pulsante di espansione. Con l'elemento Arrow selezionato nel pannello Oggetti e sequenza temporale, fare clic su IsChecked = True nel pannello Trigger, quindi fare clic sulla scheda Ruota sotto Trasformazione nel pannello Proprietà e immettere 180 nella casella di testo Angle.

   Quando un utente fa clic sul pulsante di espansione per espandere la casella combinata, l'elemento Arrow ruota di 180 gradi. L'elemento tornerà alla posizione originale quando l'utente vi farà nuovamente clic sopra.

   Suggerimento:

   Quando nel pannello Trigger è selezionato un trigger di proprietà, tutte le modifiche apportate in qualsiasi area di Expression Blend determinano la modifica di un valore in base alla condizione di tale trigger. Prima di eseguire modifiche, verificare che sia selezionato il trigger corretto. Se si desidera apportare modifiche che influiscono sullo stato predefinito del modello del controllo, fare clic su Predefinito nel pannello Trigger.

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

Vedere anche

Concetti

SimpleComboBox e SimpleComboBoxItem