Suggerimenti per lo stile del controllo ScrollBar

Il controllo ScrollBar rappresenta una gamma di valori in cui il valore corrente è rappresentato dalla posizione di un tipo di oggetto denominato Thumb. Gli oggetti ScrollBar in genere vengono utilizzati all'interno dei modelli di altri controlli quali ListBox o ScrollViewer, per garantire la funzionalità di scorrimento.

Come per tutti gli altri controlli, è possibile modificare il controllo ScrollBar in modo da conferirgli un aspetto molto diverso da quello predefinito. Per impostazione predefinita, l'aspetto del controllo ScrollBar è simile a quello visualizzato di seguito:

Proprietà di interesse del controllo ScrollBar

È possibile definire l'orientamento verticale oppure orizzontale del controllo ScrollBar impostando la proprietà Orientation in Layout nel pannello Proprietà. La gamma di valori può essere specificata impostando le proprietà Minimum e Maximum in Proprietà comuni nel pannello Proprietà. Il valore corrente, specificato nella proprietà Value, deve essere compreso tra i valori minimo e massimo. Nella categoria Proprietà comuni è possibile impostare altre proprietà quali LargeChange e SmallChange.

È possibile modificare tali proprietà nei modi seguenti:

• Impostare le proprietà dell'oggetto   Dopo aver disegnato un oggetto ScrollBar nella tavola da disegno, è possibile impostare direttamente le proprietà dell'oggetto. Se si desidera che più ScrollBar utilizzino gli stessi valori, impostare le proprietà in uno stile.

• Impostare le proprietà in un stile   Se si impostano le proprietà in uno stile  dell'oggetto ScrollBar, tutti gli oggetti ScrollBar che utilizzano un determinato stile utilizzeranno i valori impostati. È possibile sovrascrivere i valori per un oggetto specifico.

  Per ulteriori informazioni, vedere Creare uno stile.

L'aspetto del controllo ScrollBar varia in base allo stato del controllo. È possibile modificare l'aspetto di ciascuno stato tramite la modalità di modifica del modello, selezionando uno stato nel pannello Stati.

Per ulteriori informazioni, vedere gli stati disponibili nelle tabelle seguenti e Definire stati di visualizzazione diversi per un controllo.

Parti del modello ScrollBar

Il controllo ScrollBar utilizza un modello: il ScrollBar Template. Ciascuna parte del modello svolge un ruolo specifico nell'aspetto e nel comportamento dell'oggetto ScrollBar a cui è applicato il modello.

Nel modello possono essere presenti altri oggetti che contribuiscono a definire l'aspetto del controllo ScrollBar, tuttavia le parti elencate nella tabella seguente sono legate al comportamento del controllo mediante una relazione.

Per visualizzare le parti del modello, aprire il pannello Parti durante la modifica del modello.

Nome parte	Tipo di oggetto	Descrizione
VerticalRoot  HorizontalRoot	FrameworkElement	Pannello di layout contenente gli oggetti che definiscono l'aspetto del controllo ScrollBar quando è orientato in verticale o in orizzontale. Questa parte è obbligatoria.
VerticalSmallDecrease  HorizontalSmallDecrease	RepeatButton	Oggetto che riduce la proprietà Value dello ScrollBar quando l'utente fa clic sull'oggetto. La proprietà Value viene ridotta in modo incrementale dal valore nella proprietà SmallChange.
VerticalLargeDecrease  HorizontalLargeDecrease	RepeatButton	Oggetto che riduce la proprietà Value dello ScrollBar quando l'utente fa clic sull'oggetto. La proprietà Value viene ridotta in modo incrementale dal valore nella proprietà LargeChange. Questa parte è obbligatoria. Suggerimento: Gli oggetti RepeatButton dispongono di proprietà che è possibile impostare, tuttavia se si desidera aggiungere, eliminare o modificare gli oggetti che costituiscono l'oggetto RepeatButton, è necessario aprire il relativo modello.
VerticalThumb  HorizontalThumb	Thumb	Oggetto la cui posizione lungo una traccia rappresenta il valore corrente del controllo ScrollBar. Questa parte è obbligatoria. Suggerimento: Gli oggetti Thumb dispongono di proprietà che è possibile impostare, tuttavia se si desidera aggiungere, eliminare o modificare gli oggetti che costituiscono l'oggetto Thumb, è necessario aprire il relativo modello.
VerticalLargeIncrease  HorizontalLargeIncrease	RepeatButton	Oggetto che aumenta la proprietà Value dello ScrollBar quando si fa clic su di esso. La proprietà Value viene aumentata in modo incrementale dal valore nella proprietà LargeChange. Questa parte è obbligatoria.
VerticalSmallIncrease  HorizontalSmallIncrease	RepeatButton	Oggetto che aumenta la proprietà Value dello ScrollBar quando si fa clic su di esso. La proprietà Value viene aumentata in modo incrementale dal valore nella proprietà SmallChange.

Stati del controllo ScrollBar

Per impostazione predefinita, il controllo ScrollBar può trovarsi in uno dei tre stati seguenti, che è possibile visualizzare nel pannello Stati durante la modifica di un modello ScrollBar:

Quando si seleziona uno stato, la registrazione dello stato viene attivata e qualsiasi modifica apportata verrà registrata per quello stato. Per disattivare la registrazione dello stato, fare clic sul pulsante di registrazione oppure selezionare Base nel pannello Stati.

Per convertire oggetti in un controllo ScrollBar

Per modificare il modello di un controllo ScrollBar, eseguire una delle operazioni seguenti:

• Disegnare uno ScrollBar  nella tavola da disegno, quindi creare una copia del modello predefinito.

  Per ulteriori informazioni, vedere Creare o modificare un modello.

• Progettare l'aspetto del controllo ScrollBar disegnando oggetti o importando elementi grafici, quindi utilizzare il comando Crea controllo.

Se si utilizza il comando Crea controllo, per garantire la creazione di tutti gli oggetti richiesti dal modello ScrollBar, eseguire questa procedura:

1. Pertanto, è necessario raggruppare gli oggetti in un pannello di layout, selezionarlo e, nel menu Strumenti, fare clic su Crea controllo.

2. Nella finestra di dialogo visualizzata, selezionare ScrollBar, assegnare un nome al modello e selezionare il percorso in cui archiviarlo.

   Per ulteriori informazioni sui percorsi, vedere Creare una risorsa.

3. Dopo aver fatto clic su OK, in Microsoft Expression Blend viene attivata la modalità di modifica del testo e vengono visualizzati gli oggetti che costituiscono il controllo ScrollBar.

4. Il modello di un controllo ScrollBar include le parti utilizzate quando un oggetto ScrollBar viene orientato in verticale o in orizzontale. È possibile assegnare tutte le parti nel pannello Parti agli oggetti contenuti nel modello o assegnare solo le parti relative a un orientamento del controllo ScrollBar. Se si dispone di un solo insieme di oggetti, ma si desidera progettare il modello per entrambi gli orientamenti del controllo ScrollBar, è possibile duplicare gli oggetti e riorganizzarli.

   Suggerimento:

   Se agli oggetti presenti nel pannello Parti vengono assegnate solo le parti orizzontali e l'oggetto ScrollBar (a cui è applicato il modello) è impostato per la visualizzazione verticale, essi non saranno più visibili nella tavola da disegno. Per modificare l'orientamento dell'oggetto ScrollBar, fare clic su [ScrollBar] nella barra di navigazione nella parte superiore della tavola da disegno per tornare all'ambito di modifica dell'oggetto ScrollBar, impostare la proprietà Orientation su Horizontal, quindi, per tornare alla modalità di modifica del modello, utilizzare il terzo pulsante sulla barra di navigazione.

5. Per creare l'oggetto per la parte VerticalRoot o HorizontalRoot, eseguire le operazioni seguenti:

   1. Disegnare un pannello di layout Grid  con cinque colonne o cinque righe). Le cinque colonne devono essere dimensionate rispettivamente su Auto, Auto, Auto, * e Auto.

      

      Per ulteriori informazioni, vedere Aggiungere o rimuovere una riga o una colonna e Modificare l'opzione di ridimensionamento di una riga o di una colonna.

   2. Fare clic con il pulsante destro del mouse sul nuovo oggetto Grid, scegliere Crea parte della barra di scorrimento, quindi fare clic su VerticalRoot o HorizontalRoot.

6. Lo spazio in cui si muove l'oggetto Thumb è denominato traccia. La traccia non è una parte del modello, pertanto è facoltativa. Posizionare gli oggetti che si desidera utilizzare per rappresentare la traccia nell'oggetto VerticalRoot o HorizontalRoot occupando tutte e cinque le colonne o righe oppure soltanto la terza centrale.

   Suggerimento:
   Per consentire a un oggetto di occupare più colonne o righe, selezionare l'oggetto, quindi nel pannello Proprietà impostare la proprietà RowSpan o ColumnSpan.

7. Poiché gli oggetti Thumb possono disporre di un modello proprio, è consigliabile convertire gli oggetti che si desidera utilizzare in un controllo Thumb eseguendo le operazioni seguenti:

   1. Raggruppare gli oggetti che rappresenteranno l'oggetto Thumb in un pannello di layout.

   2. Spostare il nuovo pannello di layout nella riga o colonna centrale dell'oggetto VerticalRoot o HorizontalRoot.

      Suggerimento:
      Per posizionare un oggetto in una colonna (o riga) specifica, selezionare l'oggetto, quindi nel pannello Proprietà impostare la proprietà Row o Column. Il numero della prima riga o colonna è 0.

   3. Fare clic con il pulsante destro del mouse sul nuovo pannello di layout, scegliere Crea parte della barra di scorrimento, quindi fare clic su VerticalThumb o HorizontalThumb.

   4. Nella finestra di dialogo Crea parte, selezionare il percorso nel quale verrà archiviato il modello.

   5. Quando è attiva la modalità di modifica del modello per il nuovo oggetto Thumb, è possibile continuare ad apportare modifiche, ad esempio selezionando gli stati nel pannello Stati per modificare l'aspetto dell'oggetto Thumb in quegli stati. Se si desidera disporre di un margine nell'oggetto Thumb, impostare la proprietà Margin nell'oggetto radice.

   6. Tornare alla modalità di modifica del modello per l'oggetto ScrollBar facendo clic su Ambito padre  nel pannello Oggetti e sequenza temporale o facendo clic su VerticalThumb o HorizontalThumb nella barra di navigazione nella parte superiore della tavola da disegno.

   7. Impostare le proprietà Width e Height dell'oggetto Thumb su Auto, impostare la proprietà MinHeight o MinWidth su un valore maggiore di 0 e impostare le proprietà Margin su 0.

8. Se si desidera abilitare l'utente alla selezione di un pulsante ad una delle estremità del track per spostare l'oggetto Thumb di piccoli incrementi, eseguire le operazioni seguenti:

   1. Raggruppare gli oggetti che si desidera utilizzare per il pulsante di riduzione in un pannello di layout.

   2. Spostare il pannello di layout nella prima riga dell'oggetto VerticalRoot o nella prima colonna dell'oggettoHorizontalRoot.

   3. Fare clic con il pulsante destro del mouse sul pannello di layout, scegliere Crea parte della barra di scorrimento, quindi fare clic su VerticalSmallDecrease o su HorizontalSmallDecrease.

   4. Nella finestra di dialogo Crea parte, selezionare il percorso nel quale verrà archiviato il modello.

   5. In modalità di modifica modello per il nuovo oggetto RepeatButton, è possibile continuare ad apportare modifiche, ad esempio eliminare l'oggetto ContentPresenter. Se si desidera disporre di un margine nell'oggetto RepeatButton, impostare la proprietà Margin nell'oggetto radice.

   6. Tornare alla modalità di modifica del modello per l'oggetto ScrollBar facendo clic su Ambito padre  nel pannello Oggetti e sequenza temporale o facendo clic su VerticalSmallDecrease o su HorizontalSmallDecrease nella barra di navigazione, nella parte superiore della tavola da disegno.

   7. Regolare le proprietà in Layout nel pannello Proprietà per consentire di visualizzare l'oggetto RepeatButton nella posizione desiderata. È inoltre possibile riordinare gli oggetti nascosti dietro altri oggetti.

      Per ulteriori informazioni, vedere Modificare l'ordine dei livelli degli oggetti.

   8. Ripetere questa procedura per l'oggetto VerticalSmallIncrease o HorizontalSmallIncrease, spostando l'oggetto nell'ultima riga dell'oggetto VerticalRoot o nell'ultima colonna dell'oggetto HorizontalRoot.

9. Per consentire all'utente di fare clic sulla traccia su un lato dell'oggetto Thumb e spostarlo di grandi incrementi, eseguire le operazioni seguenti:

   1. Disegnare un controllo RepeatButton in ciascuna riga o colonna su un lato dell'oggetto Thumb.

   2. Fare clic con il pulsante destro del mouse sull'oggetto RepeatButton che ridurrà il valore dell'oggetto ScrollBar, scegliere Crea parte della barra di scorrimento, quindi fare clic su VerticalLargeDecrease o su HorizontalLargeDecrease.

   3. Fare clic con il pulsante destro del mouse sull'oggetto RepeatButton che aumenterà il valore dell'oggetto ScrollBar, scegliere Crea parte della barra di scorrimento, quindi fare clic su VerticalLargeDecrease o su HorizontalLargeDecrease.

   4. Se non si desidera che gli oggetti RepeatButton siano visibili, impostare le proprietà Opacity su 0.

      Suggerimento:
      È facoltativamente possibile convertire gli oggetti esistenti nei modelli del controllo RepeatButton, come è stato fatto per gli oggetti VerticalSmallDecrease o HorizontalSmallDecrease. Accertarsi di spostare gli oggetti RepeatButton convertiti nelle righe o nelle colonne su un lato dell'oggetto Thumb.

10. È possibile continuare a modificare il modello in questa modalità. Ad esempio, aggiungere e modificare oggetti o selezionare uno stato nel pannello Stati per modificare l'aspetto del modello in tale stato.

11. È consigliabile associare alcune delle proprietà dei pennelli degli oggetti nel modello alle seguenti proprietà dell'oggetto ScrollBar che utilizzerà il modello:

    • Background

    • BorderBrush

    • Foreground

    • BorderThickness

    Per ulteriori informazioni, vedere Portare proprietà oggetto nel modello.

12. Per uscire dalla modalità di modifica del modello, fare clic su [ScrollBar] nella barra di navigazione nella parte superiore della tavola da disegno o su Ambito padre  nel pannello Oggetti e sequenza temporale.

    Per ulteriori informazioni sull'applicazione del nuovo modello Barra di scorrimento ad altri oggetti ScrollBar, vedere Applicare o rimuovere una risorsa.

Riferimenti

Per informazioni dettagliate sulle proprietà e sugli eventi del controllo ScrollBar di Microsoft Silverlight, vedere Silverlight Control Gallery (Raccolta di controlli di Silverlight) su MSDN.

Vedere anche

Attività

Associare un oggetto a input utente o altri valori interni

Concetti

Suggerimenti di stile per controlli di Silverlight comuni

SimpleScrollBar

Applicazione di stili a un controllo che supporta modelli