Suggerimenti stilistici per il controllo ListBox

Ee371162.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(it-it,Expression.40).png

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

Ee371162.3cc2d3af-6781-4937-b068-c3448a56406d(it-it,Expression.40).png

Parti del modello ListBox

Il controllo ListBox dispone di una parte, ovvero ContentElement. Questa parte è obbligatoria.

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

Stati del controllo ListBox

Per impostazione predefinita, il controllo ListBox può trovarsi in uno dei tre stati seguenti del gruppo di stati ValidationStates:

Nome stato	Descrizione
Valid	L'aspetto del controllo ListBox quando è valido.
InvalidUnfocused	L'aspetto del controllo ListBox quando non è valido e non ha lo stato attivo della tastiera.
InvalidFocused	L'aspetto del controllo ListBox quando non è valido e ha lo stato attivo della tastiera.

Quando si seleziona uno stato, la registrazione dello stato viene attivata e qualsiasi modifica apportata verrà registrata per quello stato. Per disattivare la registrazione di stato, fare clic sul relativo pulsante Ee371162.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(it-it,Expression.40).png sulla tavola da disegno oppure selezionare Base nel pannello Stati.

Per convertire gli oggetti in un controllo ListBox

L'immagine riportata di seguito rappresenta una progettazione composita di un controllo ListBox creato da un progettista:

ListBox

In questo esempio viene utilizzato il codice XAML riportato al passaggio 2 della procedura seguente, che corrisponde all'immagine precedente, per creare una casella personalizzata per la password tramite il modello del controllo ListBox.

[!NOTA]

È importante notare che l'immagine precedente non è ancora un controllo ListBox, ma un oggetto grafico che può essere convertito in un controllo ListBox.

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"/>
```

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

<Grid x:Name="root" Height="146" Width="146">
   <Rectangle Fill="#FF333333" RadiusX="3" RadiusY="3" />
   <TextBlock Margin="5,5,0,0" Foreground="White" Text="Lorem"/>
   <TextBlock Margin="5,26,0,0" Foreground="White" Text="Ipsum"/>
   <Grid x:Name="verticalscrollbar" Width="17" Height="146" 
       HorizontalAlignment="Right" >
      <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>
</Grid>

Aggiungere un tag Grid di chiusura (</Grid>) dopo il codice appena incollato.
Nel pannello Oggetti e sequenza temporale fare clic con il pulsante destro del mouse su root, quindi scegliere Crea controllo. Nella finestra di dialogo Crea controllo fare clic su ListBox e quindi su OK.
Nel pannello Oggetti e sequenza temporale fare clic con il pulsante destro del mouse su ScrollViewer, quindi scegliere Elimina.
Premere MAIUSC e selezionare entrambi gli elementi TextBlock. Fare clic con il pulsante destro del mouse, quindi scegliere Taglia.
Fare clic su ****Reimposta l'ambito **** e quindi premere CTRL+V quattro volte per creare otto nuovi elementi TextBlock. Premere MAIUSC e quindi selezionare ognuno degli elementi TextBlock.
Nella categoria Layout del pannello Proprietà fare clic su Opzioni avanzate a destra della casella Width e quindi su Reimposta. Ripetere per Height.
Nel pannello Oggetti e sequenza temporale fare clic con il pulsante destro del mouse su ListBox, scegliere Modifica modello, quindi fare clic su Modifica corrente.
Nel pannello Oggetti e sequenza temporale fare clic con il pulsante destro del mouse su root, scegliere Crea parte di ListBox, quindi fare clic su ScrollViewer. Fare clic su OK.
Nel pannello Oggetti e sequenza temporale fare clic con il pulsante destro del mouse su ContentPresenter, quindi fare clic su Elimina.
Nel pannello Oggetti e sequenza temporale fare clic su root. Nel pannello Parti fare doppio clic su ScrollContentPresenter.
Nel pannello Oggetti e sequenza temporale fare clic con il pulsante destro del mouse su VerticalScrollBar, scegliere Crea parte di ScrollViewer, quindi fare clic su VerticalScrollBar. Fare clic su OK.

Per definire lo stile di VerticalScrollBar, vedere Suggerimenti sulla definizione dello stile del controllo ScrollBar.
Fare clic su ****Reimposta l'ambito **** per tornare nel modello di ScrollViewer.
Dividere l'oggetto root in due colonne facendo clic sul righello blu a sinistra del controllo e trascinando il righello verso destra accanto alla barra di scorrimento, come mostrato nell'immagine riportata di seguito:
Per la colonna destra, fare clic su ****Ridimensionamento proporzionale **** due volte. Verrà visualizzata l'icona Ridimensionamento automatico .
Nella categoria Layout del pannello Proprietà fare clic su Mostra proprietà avanzate. Fare clic su Opzioni avanzate a destra di MinWidth e quindi su Reimposta.
Nel pannello Oggetti e sequenza temporale fare clic su ScrollContentPresenter. Nella categoria Layout del pannello Proprietà fare clic su Opzioni avanzate a destra di ColumnSpan e quindi su Reimposta.
Dopo aver selezionato VerticalScrollBar nel pannello Oggetti e sequenza temporale, passare alla Doppia visualizzazione. Copiare e incollare il codice riportato di seguito nella riga di codice XAML che inizia con <ScrollBar x:Name="VerticalScrollBar".
```
Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" 
Maximum="{TemplateBinding ScrollableHeight}" 
Value="{TemplateBinding VerticalOffset}" 
ViewportSize="{TemplateBinding ViewportHeight}"
```
[!NOTA]

È inoltre possibile impostare queste proprietà utilizzando espressioni personalizzate.
Fare clic su ****Reimposta l'ambito ****. Nel pannello Oggetti e sequenza temporale fare clic su ScrollViewer. Aggiungere un oggetto ItemsPresenter dal pannello Asset facendo clic su Controlli, quindi su Tutti e infine su ItemsPresenter. Disegnare l'oggetto ItemsPresenter nella tavola da disegno nella colonna sinistra di ListBox.
Dopo aver selezionato l'oggetto ItemsPresenter nel pannello Oggetti e sequenza temporale, nella categoria Layout del pannello Proprietà fare clic su Opzioni avanzate a destra della proprietà Width e quindi su Reimposta. Ripetere per Height.

Compilare il progetto premendo CTRL+MAIUSC+B e quindi testarlo premendo F5.

Importante:
Il controllo ListBox funzionerà come previsto solo se è stato definito lo stile dell'oggetto ScrollBar come descritto in Suggerimenti sulla definizione dello stile del controllo ScrollBar al passaggio 13.

Riferimenti

Per informazioni dettagliate sulle proprietà e gli eventi del controllo ListBox di Silverlight, vedere Silverlight Control Gallery Ee371162.xtlink_newWindow(it-it,Expression.40).png (Raccolta di controlli di Silverlight) su MSDN.

Vedere anche

Attività

Utilizzare il controllo DataGrid
Utilizzare il controllo TreeView

Concetti

Suggerimenti di stile per controlli di Silverlight comuni
SimpleListBox e SimpleListBoxItem
Definizione dello stile di un controllo che supporta i modelli
Applicare uno stile a un controllo che visualizza dati

Last updated on 2017-10-11