Esercitazione: personalizzare l'aspetto di un controllo SimpleScrollBar

This page applies to WPF projects only

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 sulla tavola da disegno di Expression Blend.

    Cc294792.alert_tip(IT-IT,Expression.30).gifSuggerimento:

    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.

    Cc294792.alert_tip(IT-IT,Expression.30).gifSuggerimento:

    Per uscire dalla modalità di modifica e tornare nell'ambito del proprio documento, fare clic su Ambito padreCc294792.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(IT-IT,Expression.30).png, opzione che si trova sopra la struttura a 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% nella categoria 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 Cc294792.3a66ec96-47bb-47fc-8876-6b9456feec3a(IT-IT,Expression.30).png. Per la proprietà Stroke, è innanzitutto necessario rimuovere l'associazione facendo clic sul pulsante Opzioni avanzate proprietàCc294792.12e06962-5d8a-480d-a837-e06b84c545bb(IT-IT,Expression.30).png e quindi scegliendo Reimposta.

  5. Fare clic con il pulsante destro del mouse sull'oggetto IncreaseRepeat nel pannello Oggetti e sequenza temporale, scegliere Modifica modello e 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 ogni trigger e facendo clic su Elimina triggerCc294792.d31907a6-867b-4e16-b860-f07c9531fbd7(IT-IT,Expression.30).png.

  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 oggetto delle modifiche in precedenza.

    • Se si sta modificando il documento principale, fare clic su Ambito padreCc294792.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(IT-IT,Expression.30).png.

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

  9. Attivare l'oggetto GridRoot facendo clic nel pannello Oggetti e sequenza temporale. Fare clic sul controllo Border nel pannello Strumenti e 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 in Oggetti e sequenza temporale, scegliendo Ridimensiona automaticamente, quindi facendo clic su Riempi.

  10. Con il nuovo oggetto Border ancora selezionato in Oggetti e sequenza temporale, modificare la proprietà CornerRadius in Aspetto nel pannello Proprietà impostandola su 4,4,4,4. In questo modo, gli angoli del bordo verranno arrotondati.

  11. Fare clic con il pulsante destro del mouse sull'oggetto [Thumb] in 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 Cc294792.3a66ec96-47bb-47fc-8876-6b9456feec3a(IT-IT,Expression.30).png e 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