Esercitazione: personalizzare l'aspetto di un controllo SimpleScrollBar

In Microsoft Expression Blend è possibile personalizzare con facilità l'aspetto di una barra di scorrimento utilizzando il modello del controllo SimpleScrollBar.

Per personalizzare l'aspetto di uno stile SimpleScrollBar

1. Disegnare un oggetto SimpleScrollBar 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. Fare clic con il pulsante destro del mouse sulla barra di scorrimento nel pannello Oggetti e sequenza temporale, scegliere Modifica modello e 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 nell'ambito del documento, fare clic su Reimposta l'ambito 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. Nel pannello Oggetti e sequenza temporale fare clic sull'oggetto IncreaseRepeat e impostare l'attributo Alpha, identificato da una "A" nel lato destro della tavolozza colori, delle proprietà Background e BorderBrush su 0% in Pennelli nel pannello Proprietà.

4. Nel pannello Oggetti e sequenza temporale fare clic sull'oggetto tracciato IncreaseArrow, quindi impostare le proprietà Stroke e Fill su un Pennello tinta unita bianco. Per la proprietà Stroke, è innanzitutto necessario rimuovere l'associazione facendo clic su Opzioni avanzate e scegliendo Reimposta.

5. Fare clic con il pulsante destro del mouse sull'oggetto IncreaseRepeat nel pannello Oggetti e sequenza temporale, scegliere Modifica modello, quindi eseguire una delle operazioni seguenti:

   • Se nel passaggio 2 si è fatto clic su Modifica corrente, fare clic su Modifica corrente a questo punto per modificare il modello del controllo SimpleRepeatButton archiviato in SimpleStyles.xaml.

   • Se nel passaggio 2 si è fatto clic su Modifica copia, fare clic su Modifica copia a questo punto per creare una copia del modello del controllo SimpleRepeatButton e archiviarla nella stessa posizione del modello per lo stile SimpleScrollBar.

6. Nell'ambito di modifica dello stile SimpleRepeatButton eliminare i trigger di evento denominati IsMouseOver = True e IsPressed = True nel pannello Trigger, selezionando ciascun trigger e facendo clic su Elimina trigger.

7. Tornare all'ambito di modifica del modello SimpleScrollBar eseguendo una delle operazioni seguenti:

   • Se il documento Simple Styles.xaml viene modificato perché nel passaggio 5 si è fatto clic su Modifica modello, fare clic sulla scheda per il documento principale, ad esempio la scheda Finestra1.xaml, nella parte superiore della tavola da disegno. Fare clic con il pulsante destro del mouse sull'oggetto ScrollBar, scegliere Modifica modello, quindi fare clic su Modifica corrente per tornare al modello ScrollBar che si stava modificando.

   • Se si sta modificando il documento principale, fare clic su Reimposta l'ambito.

8. Ripetere il passaggio precedente per l'oggetto DecreaseRepeat.

9. Attivare l'oggetto GridRoot facendo clic su di esso nel pannello Oggetti e sequenza temporale. Fare clic sul controllo Border nel pannello Strumenti, quindi disegnare un oggetto Border all'interno dell'oggetto GridRoot. Applicare il ridimensionamento automatico al nuovo oggetto Border facendovi clic sopra con il pulsante destro del mouse nel pannello Oggetti e sequenza temporale, scegliendo Ridimensiona automaticamente, quindi facendo clic su Riempi.

10. Con il nuovo oggetto Border ancora selezionato nel pannello Oggetti e sequenza temporale modificare la proprietà CornerRadius in Aspetto nel pannello Proprietà su 4,4,4,4. Questo consentirà di arrotondare gli angoli dei bordi.

11. Fare clic con il pulsante destro del mouse sull'oggetto [Thumb] nel pannello Oggetti e sequenza temporale, scegliere Modifica modello, quindi fare clic su Modifica copia. Nell'ambito di modifica dello stile SimpleThumbStyle fare clic sull'oggetto Rectangle, modificare la proprietà Fill impostandola su un Pennello tinta unita grigio scuro, quindi impostare su 2 le proprietà Margin per i margini destro e sinistro.

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

Vedere anche

Concetti

SimpleScrollBar

Copyright © 2011 Microsoft Corporation. Tutti i diritti riservati.