Suggerimenti sulla definizione dello stile del controllo ScrollBar

È possibile utilizzare il modello del controllo ScrollBar predefinito per creare un modello ScrollBar personalizzato. Per impostazione predefinita, il modello del controllo ScrollBar ha il seguente aspetto:

Parti del modello ScrollBar

Il modello ScrollBar include due insiemi di parti: un insieme per una barra di scorrimento verticale e l'altro per una barra di scorrimento orizzontale. I nomi delle parti sono preceduti dal prefisso "vertical" o "horizontal" in base all'orientamento della barra di scorrimento.

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

Nome parte	Tipo di oggetto
VerticalRoot  HorizontalRoot	FrameworkElement
VerticalSmallDecrease  HorizontalSmallDecrease	RepeatButton
VerticalLargeDecrease  HorizontalLargeDecrease	RepeatButton
VerticalThumb  HorizontalThumb	Thumb
VerticalLargeIncrease  HorizontalLargeIncrease	RepeatButton
VerticalSmallIncrease  HorizontalSmallIncrease	RepeatButton

Suggerimenti per ScrollBar

Parte Root

Questa parte è obbligatoria. La parte Root contiene tutti gli elementi che compongono il controllo ScrollBar con un determinato orientamento.

Per impostare una parte Root, creare una griglia denominata HorizontalRoot oppure VerticalRoot che contenga cinque colonne per l'orientamento orizzontale o cinque righe per l'orientamento verticale e impostare le relative dimensioni su Ridimensionamento automatico, Ridimensionamento automatico, Ridimensionamento automatico, Ridimensionamento proporzionale, Ridimensionamento automatico.

Parte Thumb

Questa parte è obbligatoria. Il cursore (o Thumb) è l'elemento della barra di scorrimento che è possibile postare.

Per impostare l'oggetto oppure gli oggetti che rappresentano il cursore in un controllo Thumb (HorizontalThumb oppure VerticalThumb), collocare la parte Thumb nella colonna/riga centrale della parte Root, quindi impostare le proprietà Width e Height della parte Thumb in modo che la colonna (o la riga) venga ridimensionata in base al cursore.

Non impostare le proprietà Margin per il cursore. Per ottenere lo stesso effetto, impostare i margini dell'oggetto radice del modello Thumb.

Track

Lo spazio entro cui si sposta il cursore è denominato area della barra da riempire (Track). Questo elemento è facoltativo e non rappresenta una parte.

Per includere un'area della barra da riempire, posizionare l'oggetto o gli oggetti che la rappresentano nella parte Root, occupando tutte le cinque colonne o righe oppure le tre colonne o righe centrali.

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

Spostamento veloce del cursore lungo l'area della barra da riempire

Se si desidera consentire all'utente di fare clic nell'area della barra da riempire su entrambi i lati del cursore per eseguire spostamenti veloci, posizionare un controllo RepeatButton nelle due colonne (o righe) adiacenti alla parte Thumb e denominare tali controlli VerticalLargeDecrease e VerticalLargeIncrease oppure HorizontalLargeDecrease e HorizontalLargeIncrease. Affinché i controlli RepeatButtons funzionino ma non siano visibili, assegnare loro un valore Opacity pari a zero. In alternativa, applicare ai controlli RepeatButton un modello contenente un solo oggetto con la proprietà Opacity impostata su zero.

Spostamento del cursore lungo l'elemento Track con piccoli incrementi

Se si desidera consentire all'utente di spostare il cursore con piccoli incrementi facendo clic su un pulsante a entrambe le estremità dell'elemento Track, impostare gli oggetti che rappresentano questi pulsanti nei controlli RepeatButton e denominarli VerticalSmallDecrease e VerticalSmallIncrease (oppure HorizontalSmallDecrease e HorizontalSmallIncrease). Inserirli nelle due colonne (o righe) finali.

Stati del controllo ScrollBar

È inoltre possibile utilizzare gli stati con il modello di controllo ScrollBar. Per impostazione predefinita, il controllo ScrollBar può trovarsi in uno dei tre stati seguenti del gruppo di stati CommonStates:

Nome stato	Descrizione
Normal	L'aspetto del controllo ScrollBar quando non vi è alcuna interazione con il controllo.
MouseOver	L'aspetto del controllo ScrollBar quando l'utente sposta il puntatore su di esso.
Disabled	L'aspetto del controllo ScrollBar quando la proprietà IsEnabled è impostata su False.

Suggerimento:
Per visualizzare gli stati disponibili, aprire il pannello Stati quando si modifica 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 sull'indicatore della modalità di registrazione  oppure selezionare Base nel pannello Stati.

Per ulteriori informazioni, vedere Definire stati di visualizzazione diversi per un controllo.

Associazione a modello

È possibile associare a modello le proprietà Background, BorderBrush, Foreground, BorderThickness e Padding. Per ulteriori informazioni, vedere Portare proprietà oggetto nel modello.

Per convertire oggetti in un controllo ScrollBar

L'immagine seguente è una progettazione composita (comp) di una barra di scorrimento che include gli stati MouseOver e Pressed delle parti VerticalThumb, VerticalSmallDecrease e VerticalSmallIncrease.

Normal

MouseOver

Pressed

Disabled

In questo esempio viene utilizzato il codice XAML riportato al passaggio 1 della procedura seguente, che corrisponde all'immagine precedente, per creare una barra di scorrimento personalizzata utilizzando un modello del controllo ScrollBar.

Suggerimento:
Fare clic su Doppia visualizzazione per visualizzare le modifiche in entrambe le visualizzazioni Progettazione e Codice mentre si esegue la procedura.

1. Aprire un nuovo progetto Microsoft Silverlight. Nella visualizzazione Codice individuare il codice riportato di seguito ed eliminare la barra di chiusura (/).

   <Grid x:Name="LayoutRoot" Background="White"/>
   

2. Copiare e incollare il codice riportato di seguito nel nuovo progetto, dopo il codice individuato al passaggio 1.

   <Grid x:Name="verticalscrollbar" Width="17" Height="146" >
      <Rectangle x:Name="track" Fill="#FF3D3D3D" StrokeThickness="0" />
      <Path x:Name="smalldecrease" Fill="Gray" Stretch="Fill" Width="7" Height="7" 
         Data="M200,312 L204,312 L200,305 z" Margin="0,5,0,0" VerticalAlignment="Top"/>
      <Rectangle x:Name="thumb" Fill="Gray" RadiusX="3" RadiusY="3" Height="61" Width="7" 
         Margin="0,24,0,0" VerticalAlignment="Top"/>
      <Path x:Name="smallincrease" Fill="Gray" Stretch="Fill" Width="7" Height="7" 
         Data="M200,305 L200,312 L204,305 z" Margin="0,0,0,5" 
         VerticalAlignment="Bottom" />
   </Grid>
   

3. Aggiungere un tag Grid di chiusura (</Grid>) dopo il codice appena incollato.

4. Nel pannello Oggetti e sequenza temporale fare clic con il pulsante destro del mouse su verticalscrollbar, quindi scegliere Crea controllo. Nella finestra di dialogo Crea controllo fare clic su ScrollBar, quindi fare clic su OK.

   Notare come nella visualizzazione Codice il codice incollato al passaggio precedente sia stato sostituito con il codice per un nuovo controllo ScrollBar (individuare il codice che inizia con <Grid x:Name="verticalscrollbar">). Inoltre, Microsoft Expression Blend ha convertito verticalscrollbar in un modello per un nuovo stile di ScrollBar e ha applicato tale modello a verticalscrollbar (individuare <Style x:Key="ScrollBarStyle1" TargetType="ScrollBar">).

   Suggerimento:
   Nel pannello Oggetti e sequenza temporale notare come UserControl sia stato sostituito da Modello.

5. Per impostare verticalscrollbar nella parte Root del modello, nel pannello Oggetti e sequenza temporale fare clic con il pulsante destro del mouse su verticalscrollbar, scegliere Crea parte della barra di scorrimento, quindi fare clic su VerticalRoot. Si noti che verticalscrollbar è stata rinominata VerticalRoot.

6. Per aggiungere righe alla griglia della parte Root, nella visualizzazione Progettazione fare clic sul righello blu a sinistra del controllo per aggiungere nuove righe come illustrato nell'immagine seguente:

   

   Se si aggiungono le righe come mostrato, le parti si troveranno nelle righe corrette. Track dispone di una proprietà RowSpan pari a 5, smalldecrease si trova nell'oggetto Row 0, thumb nell'oggetto Row 2 e smallincrease nell'oggetto Row 4.

   [!NOTA]

   Poiché la numerazione inizia da 0, alle 5 righe vengono assegnati i numeri da 0 a 4.

   È necessario definire gli elementi dell'oggetto grafico come parte del modello. Definendo gli elementi, è inoltre possibile assegnare valori a proprietà specifiche.

7. Nel pannello Oggetti e sequenza temporale fare clic con il pulsante destro del mouse su smalldecrease, scegliere Crea parte della barra di scorrimento, quindi fare clic su VerticalSmallDecrease. Nella finestra di dialogo Crea parte fare clic su OK.

   L'elemento smalldecrease è stato creato in un tipo di RepeatButton, che è la parte VerticalSmallDecrease del modello del controllo ScrollBar.

8. Per impostazione predefinita, Expression Blend crea un ContentPresenter per la parte. In questo esempio il ContentPresenter non è necessario e pertanto può essere eliminato facendo clic con il pulsante destro del mouse su ContentPresenter nel pannello Oggetti e sequenza temporale e scegliendo Elimina.

9. Per impostare le proprietà per la parte VerticalSmallDecrease, nel pannello Oggetti e sequenza temporale fare clic su smalldecrease, quindi aprire il pannello Proprietà. Nella categoria Layout impostare Width e Height su 7.

10. Per aggiungere gli stati alla parte VerticalSmallDecrease, nel pannello Stati fare clic su MouseOver. Nel pannello Proprietà impostare Fill su #FFCCCCCC. Tornare al pannello Stati, quindi fare clic su Base per terminare la registrazione dello stato.

    [!NOTA]

    È inoltre possibile terminare la registrazione dello stato facendo clic sull'indicatore della modalità di registrazione  nell'angolo superiore sinistro della finestra del documento.

    Nel pannello Stati fare clic su Pressed. Nel pannello Proprietà impostare la proprietà Riempi su #FFE5E5E5. Tornare al pannello Stati, quindi fare clic su Base.

    Nel pannello Stati fare clic su Normal, quindi su Aggiungi transizione e infine su Normal a MouseOver. Nella casella Durata transizione digitare 0,2, quindi fare clic su Base.

11. Nel pannello Oggetti e sequenza temporale fare clic su Grid. Nella categoria Pennelli, nel pannello Proprietà, fare clic su Pennello tinta unita , quindi impostare la proprietà Alfa su 1.

12. Tornare alla modalità di modifica del modello per il controllo ScrollBar [ScrollBarStyle1 (Modello ScrollBar)] facendo clic su Reimposta l'ambito  nel pannello Oggetti e sequenza temporale oppure facendo clic su VerticalSmallDecrease nella barra di navigazione, nella parte superiore della tavola da disegno.

    Ripetere i passaggi da 7 a 12 per l'elemento smallincrease.

13. Per definire il thumb come parte del modello, nel pannello Oggetti e sequenza temporale fare clic con il pulsante destro del mouse su thumb, scegliere Crea parte della barra di scorrimento, quindi fare clic su VerticalThumb. Nella finestra di dialogo Crea parte fare clic su OK.

14. Per impostare le proprietà per la parte VerticalThumb, tornare alla modalità di modifica del modello per il controllo ScrollBar [ScrollBarStyle1 (Modello ScrollBar)] facendo clic su Reimposta l'ambito , quindi nel pannello Oggetti e sequenza temporale fare clic su VerticalThumb. Nel pannello Proprietà, nella categoria Layout, impostare Width e Height su 7. Impostare i valori di Margine come indicato di seguito:

    • Sinistra: 5

    • Destra: 5

    • Alto: 0

    • Basso: 0

    Fare clic su Proprietà avanzate, quindi impostare MinHeight su 7. Ciò consente di assegnare un valore di altezza minimo per il cursore in modo che sia sempre visibile.

15. Per aggiungere stati alla parte thumb, tornare al modello Thumb [ThumbStyle1(ThumbTemplate)] facendo clic sul cursore nella barra di navigazione nella parte superiore della tavola da disegno. Nel pannello Stati fare clic su MouseOver. Nel pannello Proprietà impostare Fill su #FFCCCCCC. Tornare al pannello Stati, quindi fare clic su Base.

    Nel pannello Stati fare clic su Pressed. Nel pannello Proprietà impostare la proprietà Riempi su #FFE5E5E5. Tornare al pannello Stati, quindi fare clic su Base.

    Nel pannello Stati fare clic su Normal, quindi su Aggiungi transizione e infine su Normal a MouseOver. Nella casella Durata transizione digitare 0,2, quindi fare clic su Base.

16. Tornare a ScrollBarStyle1 (Modello ScrollBar) facendo clic su Reimposta l'ambito  nel pannello Oggetti e sequenza temporale. Nel pannello Oggetti e sequenza temporale fare clic su VerticalRoot. Nel pannello Parti fare doppio clic su VerticalLargeDecrease per creare tale parte e per renderla un figlio di VerticalRoot. Nel pannello Proprietà impostare Row su 1 e Opacity su 0.

17. Nel pannello Oggetti e sequenza temporale fare clic su VerticalRoot. Nel pannello Parti fare doppio clic su VerticalLargeIncrease per creare tale parte e per renderla un figlio di VerticalRoot. Nel pannello Proprietà impostare Row su 3 e Opacity su 0.

18. Per le righe 0, 1, 2 e 4, fare clic due volte sull'icona Ridimensionamento proporzionale  finché non viene visualizzata l'icona Ridimensionamento automatico°. Per la riga 3, assicurarsi che venga visualizzata l'icona Ridimensionamento proporzionale. In questo modo si imposta l'altezza delle righe come specificato di seguito: Ridimensionamento automatico, Ridimensionamento automatico, Ridimensionamento automatico, Ridimensionamento proporzionale e Ridimensionamento automatico. Fare clic su ciascun divisore di riga con ridimensionamento automatico, quindi, nel pannello Proprietà fare clic su Mostra proprietà avanzate. A destra del valore MinHeight fare clic su Opzioni avanzate, quindi fare clic su Reimposta.

    

19. Nel pannello Oggetti e sequenza temporale fare clic su VerticalRoot. Nel pannello Stati fare clic su Disabled. Nel pannello Proprietà impostare Opacity su 50.

20. Compilare il progetto facendo clic su CTRL+MAIUSC+B. Al termine, eseguire il progetto facendo clic su F5 e verificare la barra di scorrimento.

Riferimenti

È possibile trovare informazioni dettagliate sulle proprietà e sugli eventi del controllo Silverlight ScrollBar nella Galleria di controlli 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
Definizione dello stile di un controllo che supporta i modelli

Copyright © 2011 Microsoft Corporation. Tutti i diritti riservati.