Guida introduttiva: Aggiunta di un controllo ListView (HTML)

Articolo
03/04/2016

[ 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 ]

Molte app visualizzano elenchi di dati, ad esempio elenchi di contatti, immagini di una raccolta o il contenuto di una casella email. I dati in questi elenchi possono provenire da un database, dal Web o da un'origine dati JSON. WinJS include un controllo ListView che puoi usare per visualizzare i dati.

Prerequisiti

Dovresti essere in grado di creare una semplice app di Windows Runtime in JavaScript che usa controlli WinJS. Per istruzioni di base sui controlli WinJS, vedi Guida introduttiva: Aggiunta di controlli e stili WinJS.

Che cos'è un controllo ListView?

ListView è un controllo WinJS che visualizza i dati da un oggetto IListDataSource in un elenco o una griglia personalizzabile. WinJS offre diversi tipi di oggetti IListDataSource:

Puoi usare un oggetto List per creare un'interfaccia IListDataSource da una matrice di dati.
Puoi usare un oggetto StorageDataSource per accedere a informazioni su file e directory.

Puoi inoltre creare la tua origine dati personalizzata che si connette a un altro tipo di provider di dati, ad esempio un servizio Web o un database. Per istruzioni, vedi Come creare un'origine dati personalizzata.

Creazione di un controllo ListView

Hh465496.wedge(it-it,WIN.10).gif Per creare un controllo ListView

Se non sono già inclusi, aggiungi al tuo file HTML i riferimenti a WinJS.

Per usare la versione più recente di WinJS:

Scarica la versione più recente dalla pagina per il download di WinJS e copiala nella directory della tua app o del tuo sito Web.
Aggiungi i riferimenti per gli script e gli stili CSS WinJS in ogni pagina dell'app o del sito Web che usa le funzionalità di WinJS.


<!-- WinJS references -->
<link href="/WinJS/css/ui-dark.css" rel="stylesheet">
<script src="/WinJS/js/WinJS.js"></script>

Questo esempio illustra il codice HTML per il file default.html che viene generato quando crei un nuovo progetto App vuota in Microsoft Visual Studio.


<!-- default.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ListViewExample</title>

    <!-- WinJS references -->
    <link href="/WinJS/css/ui-dark.css" rel="stylesheet">
    <script src="/WinJS/js/WinJS.js"></script>

    <!-- ListViewExample references -->
    <link href="/css/default.css" rel="stylesheet">
    <script src="/js/default.js"></script>
</head>
<body>
    <p>Content goes here</p>
</body>
</html>

Nel tuo file HTML crea un elemento div e impostane la proprietà data-win-control su WinJS.UI.ListView.
```
<div id="basicListView" 
    data-win-control="WinJS.UI.ListView">  
</div>
```

Nel codice JavaScript che accompagna il file HTML chiama la funzione WinJS.UI.processAll durante il caricamento del codice HTML.

WinJS.UI.processAll();

L'esempio successivo illustra il file default.js che accompagna quello default.html creato automaticamente durante la creazione di un nuovo progetto Applicazione vuota.


(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
    WinJS.strictProcessing();

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll());
        }
    };

    app.oncheckpoint = function (args) {
        // TODO: This application is about to be suspended. Save any state
        // that needs to persist across suspensions here. You might use the
        // WinJS.Application.sessionState object, which is automatically
        // saved and restored across suspension. If you need to complete an
        // asynchronous operation before your application is suspended, call
        // args.setPromise().
    };

    app.start();
})();

Questo esempio funziona se intendi aggiungere l'oggetto ListView alla tua pagina iniziale (default.html). Se intendi aggiungere l'oggetto ListView a un controllo Page, non devi chiamare WinJS.UI.processAll perché la chiamata viene effettuata automaticamente dal controllo Page. Se stai aggiungendo l'oggetto ListView al tuo codice HTML personalizzato, puoi usare l'evento DOMContentLoaded per chiamare WinJS.UI.processAll. Per altre informazioni sull'attivazione dei controlli, vedi Guida introduttiva: Aggiunta di controlli e stili WinJS.

Con questo codice viene creato un oggetto ListView vuoto. Se esegui l'app, non verrà visualizzato ancora nulla. Nella sezione successiva vengono creati alcuni dati da visualizzare con ListView.

Definizione dei dati

Per gestire più facilmente il codice per creare la tua origine dati, puoi inserirlo in un file JavaScript distinto. In questa sezione imparerai a creare un file JavaScript per i dati, a creare un oggetto List e a usare la funzione WinJS.Namespace.define per rendere i dati accessibili alle altre parti dell'app.

Usa Visual Studio per aggiungere un file di dati al tuo progetto. In Esplora soluzioni fai clic con il pulsante destro del mouse sulla cartella js del progetto e scegli Aggiungi > Nuovo elemento. Verrà visualizzata la finestra di dialogo Aggiungi nuovo elemento.
Seleziona File JavaScript. Assegna al file il nome "dataExample.js". Fai clic su Aggiungi per creare il file. Visual Studio creerà un file JavaScript vuoto chiamato dataExample.js.
Apri dataExample.js. Crea una funzione anonima e attiva la modalità strict.

Come descritto nell'argomento sulla codifica di app di base, è preferibile incapsulare il codice JavaScript eseguendone il wrapping in una funzione anonima e usare la modalità strict.
```
(function () {
    "use strict"; 





})();
```

Crea una matrice di dati. In questo esempio viene creata una matrice di oggetti. Ogni oggetto ha tre proprietà: titolo, testo e immagine.

(function () {
    "use strict";

    var dataArray = [
    { title: "Basic banana", text: "Low-fat frozen yogurt", picture: "images/60banana.png" },
    { title: "Banana blast", text: "Ice cream", picture: "images/60banana.png" },
    { title: "Brilliant banana", text: "Frozen custard", picture: "images/60banana.png" },
    { title: "Orange surprise", text: "Sherbet", picture: "images/60orange.png" },
    { title: "Original orange", text: "Sherbet", picture: "images/60orange.png" },
    { title: "Vanilla", text: "Ice cream", picture: "images/60vanilla.png" },
    { title: "Very vanilla", text: "Frozen custard", picture: "images/60vanilla.png" },
    { title: "Marvelous mint", text: "Gelato", picture: "images/60mint.png" },
    { title: "Succulent strawberry", text: "Sorbet", picture: "images/60strawberry.png" }
    ];

})();

Nota Se stai ripetendo gli stessi passaggi con il tuo codice, puoi cambiare le immagini selezionando file disponibili nel tuo computer locale o puoi procurarti le immagini scaricando Introduzione all'esempio del controllo ListView (non è lo stesso esempio, ma usa le stesse immagini). L'esempio verrà comunque eseguito anche senza aggiungere le immagini.

Usa la matrice per creare un oggetto List.

(function () {
    "use strict";

    var dataArray = [
    { title: "Basic banana", text: "Low-fat frozen yogurt", picture: "images/60banana.png" },
    { title: "Banana blast", text: "Ice cream", picture: "images/60banana.png" },
    { title: "Brilliant banana", text: "Frozen custard", picture: "images/60banana.png" },
    { title: "Orange surprise", text: "Sherbet", picture: "images/60orange.png" },
    { title: "Original orange", text: "Sherbet", picture: "images/60orange.png" },
    { title: "Vanilla", text: "Ice cream", picture: "images/60vanilla.png" },
    { title: "Very vanilla", text: "Frozen custard", picture: "images/60vanilla.png" },
    { title: "Marvelous mint", text: "Gelato", picture: "images/60mint.png" },
    { title: "Succulent strawberry", text: "Sorbet", picture: "images/60strawberry.png" }
    ];

    var dataList = new WinJS.Binding.List(dataArray); 

})();

Esponi l'oggetto List dichiarando uno spazio dei nomi e aggiungendo l'oggetto List come membro pubblico.

Poiché il codice che hai appena scritto è racchiuso in una funzione anonima, non è accessibile pubblicamente neppure in parte. È anche per questo che usi la funzione anonima: per garantire la riservatezza dei dati privati. Il tuo controllo ListView potrà accedere all'oggetto List solo se renderai quest'ultimo accessibile pubblicamente. A questo scopo puoi usare la funzione WinJS.Namespace.define per creare uno spazio dei nomi e quindi aggiungere l'oggetto List come uno dei suoi membri.

La funzione WinJS.Namespace.define accetta due parametri: il nome dello spazio dei nomi da creare e un oggetto che contiene una o più coppie proprietà/valore. Ogni proprietà è il nome pubblico del membro, mentre ogni valore è la variabile, la proprietà o la funzione sottostante nel tuo codice privato che vuoi esporre.

In questo esempio viene creato uno spazio dei nomi denominato DataExample, che espone un membro pubblico denominato itemList, il quale restituisce l'oggetto List.

(function () {
    "use strict";

    var dataArray = [
    { title: "Basic banana", text: "Low-fat frozen yogurt", picture: "images/60banana.png" },
    { title: "Banana blast", text: "Ice cream", picture: "images/60banana.png" },
    { title: "Brilliant banana", text: "Frozen custard", picture: "images/60banana.png" },
    { title: "Orange surprise", text: "Sherbet", picture: "images/60orange.png" },
    { title: "Original orange", text: "Sherbet", picture: "images/60orange.png" },
    { title: "Vanilla", text: "Ice cream", picture: "images/60vanilla.png" },
    { title: "Very vanilla", text: "Frozen custard", picture: "images/60vanilla.png" },
    { title: "Marvelous mint", text: "Gelato", picture: "images/60mint.png" },
    { title: "Succulent strawberry", text: "Sorbet", picture: "images/60strawberry.png" }
    ];

    var dataList = new WinJS.Binding.List(dataArray);

    // Create a namespace to make the data publicly
    // accessible. 
    var publicMembers =
        {
            itemList: dataList 
        };
    WinJS.Namespace.define("DataExample", publicMembers); 

})();

Hai creato un'origine dati alla quale può accedere il tuo controllo ListView. A questo punto puoi connettere i dati al controllo ListView.

Connessione dei dati al controllo ListView

Nella sezione head del file HTML che contiene l'oggetto ListView aggiungi un riferimento al file di dati appena creato (dataExample.js):

<head>
    <!-- Other file references ... -->

    <!-- Your data file. -->
    <script src="/js/dataExample.js"></script>

</head>

Usa i dati che hai creato nell'ultima sezione per impostare la proprietà itemDataSource del controllo ListView.

La proprietà itemDataSource accetta un oggetto IListDataSource. List non è un oggetto IListDataSource, ma include una proprietà dataSource che restituisce una versione IListDataSource dell'oggetto stesso.

Per connettere i tuoi dati, imposta la proprietà itemDataSource del controllo ListView su DataExample.itemList.dataSource:
```
<div id="basicListView"
    data-win-control="WinJS.UI.ListView"
    data-win-options="{ itemDataSource : DataExample.itemList.dataSource }">
</div>  
```

Esegui l'app. L'oggetto ListView visualizza le proprietà e i valori nell'origine dati:

Visualizzazione del contenuto dell'origine dati senza un modello.

Non è questo il risultato che volevamo ottenere. Noi vogliamo visualizzare solo i valori del titolo e del campo di testo e vogliamo visualizzare le immagini vere e proprie, non il percorso delle immagini. Per ottenere il rendering che vogliamo, dobbiamo definire un oggetto Template. Scopri come fare nel passaggio successivo.

Definizione di un modello di elemento

A questo punto, l'oggetto ListView include i dati necessari ma non sa come visualizzarli. Per questo motivo devi aggiungere un modello di elemento che contenga il markup che vuoi usare per visualizzare ogni voce di elenco. Il modello di elemento può contenere la maggior parte degli altri controlli (per informazioni vedi la sezione sull'aggiunta di elementi interattivi), ma non può contenere controlli FlipView o ListView.

Per creare un modello, puoi usare il markup per definire un oggetto WinJS.Binding.Template oppure creare un'apposita funzione. In questo esempio viene creato un modello nel markup. Per info sulla creazione di una funzione modello, vedi la proprietà itemTemplate.

Creare un oggetto WinJS.Binding.Template è facilissimo: ti basta definire il markup da usare per visualizzare i singoli elementi dell'elenco e quindi indicare dove visualizzare i campi dei dati.

Nel codice HTML crea un controllo WinJS.Binding.Template e assegna ad esso un ID. In questo esempio l'ID usato è "mediumListIconTextTemplate".
```
    <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">

    </div>
```
Nota Poiché devi definire il tuo modello prima di poterlo usare, aggiungi il codice HTML per il modello prima del codice HTML per ListView.

WinJS.Binding.Template deve avere un solo elemento radice. Crea un elemento div da usare come padre del contenuto del modello.

    <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
        <div>

        </div>
    </div>

Crea il markup che l'oggetto ListView produrrà per ogni elemento di dati in esso contenuto. I dati che hai creato nel passaggio precedente contengono il percorso di un'immagine, un titolo e un po' di testo, quindi crea questi elementi:

Un elemento img per la visualizzazione del campo picture.
Un elemento h4 per la visualizzazione del campo title.
Un elemento h6 per la visualizzazione del campo text.

    <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
        <div>

            <!-- Displays the "picture" field. -->
            <img src="#"  />
            <div>

                <!-- Displays the "title" field. -->
                <h4></h4>

                <!-- Displays the "text" field. --> 
                <h6></h6>
            </div>
        </div>
    </div>

Per evitare problemi di layout, specifica sempre le dimensioni di un elemento radice del modello e le dimensioni degli elementi img nel modello.

    <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
        <div style="width: 150px; height: 100px;">

            <!-- Displays the "picture" field. -->
            <img src="#" style="width: 60px; height: 60px;" />
            <div>

                <!-- Displays the "title" field. -->
                <h4></h4>

                <!-- Displays the "text" field. --> 
                <h6></h6>
            </div>
        </div>
    </div>

Imposta l'attributo data-win-bind su ogni elemento che visualizza dati. La sintassi dell'attributo data-win-bind è:

data-win-bind="propertyName: dataFieldName"

Ad esempio, per associare la proprietà src di un oggetto img al campo "picture", usa la sintassi:

<img data-win-bind="src : picture" />

Per impostare più proprietà, separale con un punto e virgola:

data-win-bind="property1Name: dataField1Name; property2Name: dataField2Name"

Questo esempio associa gli elementi del modello ai campi dati corrispondenti.

    <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
        <div style="width: 150px; height: 100px;">

            <!-- Displays the "picture" field. -->
            <img src="#" style="width: 60px; height: 60px;" 
                 data-win-bind="alt: title; src: picture" />
            <div>

                <!-- Displays the "title" field. -->
                <h4 data-win-bind="innerText: title"></h4>

                <!-- Displays the "text" field. --> 
                <h6 data-win-bind="innerText: text"></h6>
            </div>
        </div>
    </div>

Per usare il modello di elemento, usa la sintassi select per impostare la proprietà itemTemplate dell'oggetto ListView sul tuo modello di elemento.

    <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
        <div style="width: 150px; height: 100px;">

            <!-- Displays the "picture" field. -->
            <img src="#" style="width: 60px; height: 60px;" 
                 data-win-bind="alt: title; src: picture" />
            <div>

                <!-- Displays the "title" field. -->
                <h4 data-win-bind="innerText: title"></h4>

                <!-- Displays the "text" field. --> 
                <h6 data-win-bind="innerText: text"></h6>
            </div>
        </div>
    </div>       

    <div id="basicListView" data-win-control="WinJS.UI.ListView" 
        data-win-options="{itemDataSource : DataExample.itemList.dataSource, 
            itemTemplate: select('#mediumListIconTextTemplate')}">
    </div>

Quando ora esegui l'app, l'elenco includerà i dati associati.

Un controllo ListView con dati associati che visualizza immagini e testo

Stile del controllo ListView

L'altezza del controllo ListView non si adatta automaticamente al contenuto. Per il rendering di un controllo ListView, devi specificare un valore assoluto per l'altezza. I fogli di stile WinJS impostano l'altezza del controllo ListView su 400px, ma è facile specificare un'altezza personalizzata sostituendo lo stile predefinito con un tuo foglio di stile CSS. Aggiungi questo foglio di stile CSS al file CSS della tua app per impostare l'altezza e la larghezza del controllo ListView e definire un bordo:

Stile del controllo ListView per Windows

.win-listview 
{
    height: 500px; 
    width: 500px; 
    border: 2px solid gray;
}

Stile del controllo ListView per Windows Phone 8.1

.win-listview 
{
    height: 400px; 
    width: 300px; 
    border: 2px solid gray;
}

win-listview è una classe definita da WinJS che puoi usare per applicare uno stile al controllo ListView. L'esempio precedente modifica l'altezza, la larghezza e il bordo di ogni controllo ListView. Per cambiare solo un controllo ListView, aggiungi l'ID dell'elemento div di hosting del controllo ListView al selettore:

Stile di un controllo ListView specifico per Windows

#basicListView .win-listview 
{
    height: 500px; 
    width: 500px; 
    border: 2px solid gray;
}

Stile di un controllo ListView specifico per Windows Phone 8.1

#basicListView .win-listview 
{
    height: 400px; 
    width: 300px; 
    border: 2px solid gray;
}

Esegui l'app. Ora il controllo ListView è sufficientemente grande da poter visualizzare tutti gli elementi.

Un controllo ListView 500px.

I fogli di stile WinJS definiscono classi CSS che puoi modificare per personalizzare l'aspetto di un controllo WinJS. Le classi CSS da usare con un controllo ListView includono:

win-listview

Specifica gli stili per il controllo ListView stesso.
win-container

Specifica gli stili per il contenitore di un elemento ListView o FlipView. Ogni elemento ha un proprio contenitore.
win-progress

Specifica gli stili per il controllo di stato visualizzato quando il controllo ListView sta caricando gli elementi.

Per un elenco completo, vedi la ListView reference page.

Questo esempio definisce uno stile che aggiunge un margine attorno a ciascun contenitore di elemento nel controllo ListView.


#basicListView .win-listview .win-container {
    margin: 10px; 
}

Elementi a cui è applicato uno stile in un controllo ListView

L'esempio successivo definisce uno stile che si applica agli elementi dell'elenco in un controllo ListView al passaggio del mouse.

#basicListView .win-listview .win-container:hover {
    color: red;
}

Nota

Il controllo ListView supporta i margini lungo i lati sinistro, superiore e inferiore, ma non consente di specificare un margine per il lato destro. Per aggirare questo problema potresti aggiungere un elemento della stessa larghezza del margine che vuoi, quindi impostare la relativa proprietà style.visibility su "none" e infine aggiungere l'elemento a destra del controllo ListView.

Stile degli elementi

Negli esempi precedenti sono stati usati gli stili in linea e le classi WinJS per applicare gli stili al controllo ListView e ai relativi elementi. Puoi usare anche le classi CSS per applicare uno stile al modello del tuo elemento. Nell'esempio successivo viene aggiornato il modello che hai definito nella sezione Definizione di un modello di elemento. Vengono rimossi gli stili incorporati che hai definito e vengono aggiunte alcune classi CSS.

    <div id="mediumListIconTextTemplate" 
         data-win-control="WinJS.Binding.Template" 
         style="display: none">
        <div class="mediumListIconTextItem">
            <img src="#" class="mediumListIconTextItem-Image" data-win-bind="src: picture" />
            <div class="mediumListIconTextItem-Detail">
                <h4 data-win-bind="innerText: title"></h4>
                <h6 data-win-bind="innerText: text"></h6>
            </div>
        </div>
    </div>

Aggiungi questi stili al foglio di stile della tua app:

.mediumListIconTextItem
{
    width: 282px;
    height: 70px;
    padding: 5px;
    overflow: hidden;
    display: -ms-grid;
}

    .mediumListIconTextItem img.mediumListIconTextItem-Image 
    {
        width: 60px;
        height: 60px;
        margin: 5px;
        -ms-grid-column: 1;
    }

    .mediumListIconTextItem .mediumListIconTextItem-Detail
    {
        margin: 5px;
        -ms-grid-column: 2;
    }

Ecco come si presenta ora il controllo ListView:

Controllo ListView con elementi con stili

Non devi creare gli stili del tuo modello da zero. Per informazioni sui modelli più usati e sui CSS corrispondenti, vedi Modelli di elementi per layout elenco e Modelli di elementi per layout griglia.

Alternare tra il layout elenco, il layout griglia e il layout cella

L'elemento ListView ha tre modalità di layout: elenco, griglia e cella.

Per usare il layout elenco, imposta la proprietà layout su WinJS.UI.ListLayout, come mostrato qui:

    <div id="basicListView" 
        data-win-control="WinJS.UI.ListView"
        data-win-options="{ itemDataSource : DataExample.itemList.dataSource, 
            itemTemplate: select('#mediumListIconTextTemplate'), 
            layout: {type: WinJS.UI.ListLayout}}">
    </div>

Per usare il layout griglia, imposta la proprietà layout su WinJS.UI.GridLayout, come qui:

    <div id="basicListView" 
        data-win-control="WinJS.UI.ListView"
        data-win-options="{ itemDataSource : DataExample.itemList.dataSource, 
            itemTemplate: select('#mediumListIconTextTemplate'), 
            layout: {type: WinJS.UI.GridLayout}}">
    </div>

(Solo Windows) Per usare il layout cella imposta la proprietà layout su WinJS.UI.CellSpanningLayout, come mostrato qui:

    <div id="basicListView" 
        data-win-control="WinJS.UI.ListView"
        data-win-options="{ itemDataSource : DataExample.itemList.dataSource, 
            itemTemplate: select('#mediumListIconTextTemplate'), 
            layout: {type: WinJS.UI.CellSpanningLayout}}">
    </div>

Puoi cambiare il layout di un controllo ListView in qualsiasi momento, anche dopo averlo creato.

Raggruppamento dei dati

Puoi raggruppare gli elementi presenti nel tuo controllo ListView. Questa figura mostra gli elementi raggruppati in ordine alfabetico:

Controllo ListView con elementi raggruppati

Per le istruzioni, vedi Come raggruppare gli elementi in un controllo ListView.

Aggiunta di elementi interattivi a un modello di elemento

Nota Il modello di elemento può contenere la maggior parte degli altri controlli, ma non può contenere controlli FlipView o ListView.

Selezione e richiamo di elementi ListView

In genere, quando l'utente interagisce con un elemento, ListView acquisisce l'interazione e la usa per determinare se l'utente ha selezionato o richiamato un elemento oppure esegue una panoramica tra gli elementi. Affinché un elemento interattivo, come un controllo, riceva input, devi collegare la classe CSS win-interactive all'elemento stesso o a uno dei relativi elementi padre. L'elemento e gli elementi figlio ricevono l'interazione e non generano più eventi per ListView.

Quando associ win-interactive a un elemento in un modello di elemento, accertati che l'elemento non riempia completamente l'elemento, altrimenti l'utente non potrà selezionarlo o richiamarlo.

Per aggiungere elementi interattivi al modello di elemento, ti consigliamo di usare una funzione per la creazione di modelli anziché WinJS.Binding.Template. Per altre informazioni sulle funzioni per la creazione di modelli, vedi Come creare una funzione per la creazione di modelli.

Aggiunta di funzionalità di riordinamento, trascinamento e rilascio a un controllo ListView (solo Windows)

Il controllo ListView consente inoltre agli utenti di riordinare, trascinare e rilasciare singoli elementi. Ad esempio, puoi dichiarare la funzionalità di trascinamento impostando su "true" la proprietà itemsDraggable del controllo ListView. Analogamente, per consentire agli utenti di riordinare gli elementi nel controllo ListView, poi impostare su "true" la proprietà itemsReorderable del controllo ListView.

<div id="basicListView" 
        data-win-control="WinJS.UI.ListView"
        data-win-options="{ itemDataSource : DataExample.itemList.dataSource, 
            itemTemplate: select('#mediumListIconTextTemplate'), 
            itemsDraggable: true,
            itemsReorderable: true }">
</div>

La proprietà itemsDraggable consente di trascinare visivamente singoli elementi dal controllo ListView. Quando l'utente trascina un elemento dal controllo ListView, viene generato l'evento itemdragstart. Tale evento viene generato anche all'inizio di un'operazione di riordinamento. Quando un elemento viene rilasciato nel controllo ListView, il controllo ListView genera un evento itemdragdrop.

Per altre informazioni sull'aggiunta di funzionalità di riordinamento, trascinamento o rilascio per un controlloListView, vedere Come abilitare il riordinamento, il trascinamento e il rilascio per un controllo ListView oppure scaricare l'esempio delle funzionalità di trascinamento della selezione e riordinamento del controllo HTML ListView.

Esempi di ListView

Per esempi di codice reali per quasi tutti i controlli WinJS e un editor online, vedi try.buildwinjs.com.

Questi ulteriori esempi possono esserti utili per acquisire familiarità con il controllo ListView.

Riepilogo e passaggi successivi

Hai imparato a creare un controllo ListView e ad associarlo ai dati. Hai anche imparato a creare i modelli di elementi e ad applicare gli stili.

Per un elenco dei modelli di elementi predefiniti che puoi usare nella tua app, vedi Modelli di elementi per layout elenco e Modelli di elementi per layout griglia. Per istruzioni sul raggruppamento di elementi, vedi Come raggruppare gli elementi in un controllo ListView.

Condividi tramite