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

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

Per personalizzare il pulsante di espansione in un controllo SimpleComboBox

1. Disegnare un oggetto SimpleComboBox nella 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, 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.

   Suggerimento:

   Per uscire dalla modalità di modifica del modello e tornare all'ambito del documento, fare clic su Reimposta l'ambito , disponibile sopra la struttura ad albero degli oggetti nel pannello Oggetti e sequenza temporale. Per tornare alla modalità di modifica per un modello esistente, nel pannello Oggetti e sequenza temporale fare clic con il pulsante destro del mouse sull'oggetto di cui si desidera modificare il modello, scegliere Modifica modello, quindi 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'oggetto ToggleButton nel pannello Oggetti e sequenza temporale, scegliere Modifica modello, quindi eseguire una delle operazioni seguenti:

   • Se al passaggio 4 è stato scelto Modifica corrente, fare clic su Modifica corrente per modificare il modello del controllo ExpanderToggleButton archiviato in SimpleStyles.xaml.

   • Se al passaggio 4 è stato scelto Modifica copia, fare clic su Modifica copia per creare una copia del modello del controllo ExpanderToggleButton e archiviarla nella stessa posizione del modello utilizzato per ComboBox.

   L'aspetto del pulsante di espansione viene progettato nel modello del controllo ExpanderToggleButton. Si noti che l'oggetto Grid nel modello occupa 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'oggetto Arrow nel pannello Oggetti e sequenza temporale per identificarlo nella tavola da disegno. Arrow è un oggetto Path che rappresenta il pulsante di espansione per il controllo ComboBox.

   Per modificare l'oggetto Arrow, è possibile modificare i punti del tracciato utilizzando lo strumento Selezione diretta. In alternativa, è possibile eliminare l'oggetto Arrow e quindi creare un nuovo oggetto 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 oggetto 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 oggetti Rectangle nel modello del controllo ToggleButton. È possibile aggiungere una nuova modifica di proprietà ai trigger esistenti per ruotare l'oggetto Arrow quando si fa clic sul pulsante di espansione. Dopo aver selezionato l'oggetto Arrow nel pannello Oggetti e sequenza temporale, fare clic su IsChecked = True nel pannello Trigger e quindi sulla scheda Ruota in Trasformazione nel pannello Proprietà e digitare 180 nella casella di testo Angle.

   Quando un utente fa clic sul pulsante di espansione per espandere la casella combinata, l'oggetto Arrow ruota di 180 gradi. Quando l'utente fa di nuovo clic sul pulsante di espansione, viene ripristinato l'orientamento originale.

   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

Copyright © 2011 Microsoft Corporation. Tutti i diritti riservati.