Applicazione di stili a un controllo ListView e ai relativi elementi (HTML)

  • Articolo

[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]

Esistono molti modi per personalizzare un controllo ListView. Puoi applicare stili al controllo ListView stesso, agli elementi presenti al suo interno o ai modelli che compongono questi elementi.

Uso delle classi CSS della libreria Windows per JavaScript

Come altri controlli della libreria Windows per JavaScript, ListView fornisce un insieme di classi che puoi modificare per personalizzarne l'aspetto. Le sezioni seguenti descrivono come usare queste classi per personalizzare il controllo ListView.

Applicazione di stili al controllo ListView

Prima di occuparci dell'applicazione degli stili agli elementi del controllo ListView, esaminiamo come applicare gli stili al controllo ListView stesso. Ecco le classi principali da usare per l'applicazione di stili al controllo ListView:

  • win-listview: applica gli stili all'intero ListView.
  • win-viewport: applica gli stili al riquadro di visualizzazione, dove viene visualizzata la barra di scorrimento, se necessaria.
  • win-surface: applica gli stili all'area scorrevole di ListView. Se la superficie è più ampia del riquadro di visualizzazione, nel riquadro vengono visualizzate le barre di scorrimento.

Ecco un esempio di un controllo ListView tipico contenente elementi raggruppati.

ListView con elementi raggruppati

La figura seguente mostra lo stesso controllo ListView con l'indicazione delle parti win-listview, win-viewport e win-surface:

Componenti principali di un controllo ListView

Consigli generali sull'applicazione di stili

Assegna sempre un ID a ListView e inseriscilo all'inizio del selettore CSS, come in questo esempio:

#myListView .win-listview {
    background-image: url('../images/icecream.png'); 
    border: 2px solid red;
}

Il controllo ListView include numerosi stili predefiniti. Se tenti di eseguire l'ovverride di uno degli stili e non vedi alcun effetto, è possibile che il tuo selettore CSS non sia abbastanza specifico per sovrascrivere gli stili predefiniti.

Applicazione di stili all'intero controllo ListView

Se vuoi aggiungere al controllo ListView un'immagine di sfondo fissa visualizzata internamente dietro gli elementi o se vuoi applicare un bordo all'intero controllo, devi modificare la classe win-listview. Questo esempio assegna un'immagine di sfondo e un bordo rosso al controllo ListView.

#myListView .win-listview {
    background-image: url('../images/icecream.png'); 
    border: 2px solid red;
}

Ecco come si presenta ora il controllo ListView:

ListView con bordo e immagine di sfondo

Applicazione di stili ai margini in ListView

Usa la classe win-surface per applicare margini a ListView. Non applicare margini all'elemento div che ospita ListView, perché lo stile non sarebbe applicato correttamente. Usa invece win-surface. Se aggiungi un margine a win-surface, ricorda di regolare di conseguenza l'altezza di ListView. Per impostare l'altezza, applica uno stile all'elemento div che ospita ListView.

Non aggiungere margini o riempimenti a win-surface quando usi un list layout.

Per impostazione predefinita le intestazioni di gruppo hanno un margine sinistro di 70 pixel. Se esegui l'override di win-surface quando visualizzi gruppi, qualsiasi margine tu desideri aggiungere ti consigliamo di impostarlo su un valore maggiore di 70 pixel.

Applicazione di stili al riquadro di visualizzazione in base alla direzione di scorrimento

Per applicare gli stili al controllo ListView quando scorre in direzione orizzontale o verticale, puoi usare le classi win-horizontal e win-vertical. Questo esempio aggiunge un margine sinistro al riquadro di visualizzazione quando il controllo ListView può scorrere in direzione orizzontale.

#myListView .win-listview .win-viewport.win-horizontal {
    margin-left: 10px;  
}

L'esempio seguente rimuove il margine sinistro quando il controllo ListView può scorrere in direzione verticale. In genere si assegna al controllo ListView un orientamento verticale quando il suo stato di visualizzazione è ancorato.


#myListView .win-listview .win-viewport.win-vertical {
    margin-left: 0px; 
}

Applicazione di stili all'intera area scorrevole

Per applicare gli stili all'area scorrevole del controllo ListView, devi eseguire l'override della classe win-surface. Questo esempio applica al controllo ListView un'immagine di sfondo che scorre insieme agli elementi.


#myListView .win-listview .win-surface {
    background-image: url('../images/icecream.png'); 
}

ListView con stili applicati alla superficie

Applicazione di stili all'indicatore di stato di caricamento

Il controllo ListView visualizza un indicatore progress durante il caricamento degli elementi. Per applicare stili a questo indicatore, devi modificare la classe win-progress. Questo esempio nasconde l'indicatore progress.

#myListView .win-listview .win-progress{
    display: none;
}

Applicazione di stili a elementi e gruppi

ListView contiene gruppi ed elementi.

  • Ogni gruppo è contenuto in un'intestazione di gruppo, rappresentata dalla classe win-groupheader.
  • Ogni elemento è contenuto in un contenitore di elemento, rappresentato dalla classe win-container.

Componenti dell'intestazione del gruppo e del contenitore di un controllo ListView

Applicazione di stili a un elemento

Ci sono due modi per applicare stili agli elementi del tuo controllo ListView: puoi applicare gli stili al modello dell'elemento oppure puoi modificare la classe win-container. In ogni caso, quello che devi sempre fare nel tuo modello è impostare la dimensione degli elementi. In caso contrario, potresti non ottenere il layout che vuoi.

Per impostare la dimensione degli elementi:

  • Se usi WinJS.Binding.Template, imposta la dimensione del figlio dell'elemento WinJS.Binding.Template come mostrato in questo esempio:

    <!-- The WinJS.Binding.Template element. -->
<div id="templateExample" data-win-control="WinJS.Binding.Template">

    <!-- This is the root element. Be sure to set its width and height. -->
    <div style="width: 120px; height: 125px;">


        <img src="#" data-win-bind="alt: title; src: picture"
            style="width: 60px; height: 60px;" />
        <div>
            <h4 data-win-bind="innerText: title">
            </h4>

            <h6 data-win-bind="innerText: text">
            </h6>
        </div>
    </div>
</div>

  • Se usi una funzione di modello, imposta la larghezza e l'altezza di qualunque elemento DOM che viene restituito dalla tua funzione.

Applicazione di stili al contenitore di elemento

Per applicare stili al contenitore di elemento, devi modificare la classe win-container. Questo esempio aggiunge un margine al contenitore di ogni elemento.

#myListView .win-listview .win-container{
    margin: 2px;
}

Esistono solo due proprietà a cui è possibile applicare stili in win-container: margin e background.

Per rendere trasparente un elemento, imposta come trasparente il colore di sfondo. Questo esempio crea un elemento trasparente:

#myListView .win-container:not(.footprint):not(.hover)
{
    background-color: transparent;
}

Applicazione di margini e riempimenti agli elementi

Per aggiungere una spaziatura tra gli elementi, imposta un margine nella classe win-container. Ti sconsigliamo di aggiungere un riempimento per creare spazio tra gli elementi; a questo scopo usa un margine. Tutti gli elementi dello stesso ListView devono avere lo stesso margine.

Non modificare il margine o riempimento in win-container dopo che ListView ha iniziato a visualizzare gli elementi.

Applicazione di stili all'intestazione di gruppo

Per applicare stili all'intestazione di gruppo, devi sovrascrivere la classe win-groupheader. Questo esempio aggiunge uno sfondo grigio alle intestazioni di gruppo

#myListView .win-listview .win-groupheader {                        
        background-color: #bfbfbf;           
}

ListView con applicazione di stili alle intestazioni di gruppo

Applicazione di stili alle interazioni degli elementi

Applicazione di stili a un elemento in stato di attivazione al passaggio del mouse

Quando l'utente passa il puntatore del mouse su un elemento, l'elemento entra in stato di attivazione. Per modificare lo stile di un elemento in questo stato, devi usare la pseudoclasse hover. Questo esempio modifica lo sfondo e il contorno dell'elemento attivato.

#myListView .win-container:hover {
    background-color: red; 
    outline: orange solid 5px;
}

ListView con un elemento in stato di attivazione

Applicazione di stili a elementi che hanno lo stato attivo

Per applicare stili a un elemento che ha lo stato attivo, devi usare la classe win-focus come parte del tuo selettore di stile quando applichi gli stili al contenitore dell'elemento. Per applicare stili al contorno del punto attivo, devi usare la classe win-focusedoutline. Questo esempio modifica il contorno in stato attivo in una linea tratteggiata rossa.

#myListView .focusExample.win-listview .win-focusedoutline {
    outline: red dashed 2px;
                     
}

Applicazione di stili agli elementi selezionati

Per impostazione predefinita, gli elementi selezionati mostrano un bordo di selezione. Se vuoi conferire agli elementi selezionati un aspetto "pieno", collega la classe CSS win-selectionstylefilled a ListView.

Per personalizzate ulteriormente l'aspetto degli elementi selezionati, puoi eseguire l'override di queste classi:

  • win-selectionborder

    Applica stili al bordo che circonda un elemento selezionato.

  • win-selectionbackground

    Applica stili allo sfondo degli elementi selezionati.

  • win-selectionhint

    Applica stili al suggerimento della selezione, un secondo segno di spunta che viene visualizzato dietro l'elemento selezionato. Facendo scorrere rapidamente un dito sull'elemento, il suggerimento diventa visibile.

  • win-selectioncheckmark

    Segno di spunta su una voce selezionata.

  • win-selectioncheckmarkbackground

    Sfondo del segno di spunta su un elemento selezionato.

Puoi anche aggiungere la classe win-selected come parte del tuo selettore di stile per personalizzare altri componenti, ad esempio il contenitore di elemento, quando un elemento viene selezionato.