Inicio rápido: agregar ListView (HTML)

  • Artículo

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows Runtime. Si estás desarrollando para Windows 10, consulta la documentación más reciente ]

La mayoría de las aplicaciones muestra listas de datos, como una lista de contactos, imágenes en una galería o el contenido de una bandeja de entrada de correo electrónico. Estas listas pueden obtener sus datos de una base de datos, de la web o de un origen de datos JSON. WinJS proporciona un control ListView que puedes usar para mostrar datos.

Requisitos previos

Debes saber crear una aplicación de Windows en tiempo de ejecución básica con JavaScript que use controles de WinJS. Para obtener instrucciones sobre cómo empezar a usar controles de WinJS, consulta Inicio rápido: Agregar controles y estilos de WinJS.

¿Qué es un ListView?

ListView es un control de WinJS que muestra datos de un IListDataSource en una lista o cuadrícula personalizables. WinJS ofrece varios tipos de objetos IListDataSource:

  • Puedes usar un objeto List para crear un objeto IListDataSource desde una matriz de datos.
  • Puedes usar un StorageDataSource para acceder a información sobre archivos y directorios.

También puedes crear tu propio origen de datos personalizado que se conecte a otro tipo de proveedor de datos, como un servicio web o una base de datos. Para obtener instrucciones, consulta el tema de procedimiento para crear un origen de datos personalizado.

Crear un control ListView

Hh465496.wedge(es-es,WIN.10).gifPara crear un control ListView

  1. Agrega a tu archivo HTML algunas referencias a WinJS (si aún no las contiene).

    Para usar la versión más reciente de WinJS:

    1. Descarga la versión más reciente de Descargar WinJS y cópiala en el directorio de la aplicación o el sitio web.
    2. Agrega referencias de script y CSS de WinJS a cada página de la aplicación o del sitio web que use funciones de WinJS.
    
<!-- WinJS references -->
<link href="/WinJS/css/ui-dark.css" rel="stylesheet">
<script src="/WinJS/js/WinJS.js"></script>

    En este ejemplo se muestra el HTML del archivo default.html que se genera cuando creas un proyecto Aplicación vacía en 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>

  2. En tu archivo HTML, crea un elemento div y establece su propiedad data-win-control en WinJS.UI.ListView.

    <div id="basicListView" 
    data-win-control="WinJS.UI.ListView">  
</div>

  3. En el código de JavaScript que acompaña al archivo HTML, llama a la función WinJS.UI.processAll cuando se cargue el HTML.

    WinJS.UI.processAll();

    En el siguiente ejemplo se muestra el archivo default.js que acompaña al archivo default.html que se creó cuando creaste un nuevo proyecto Aplicación vacía.

    
(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();
})();

    Este ejemplo funciona si vas a agregar ListView a la página de inicio (default.html). Si vas a agregar ListView a un control Page, no necesitas llamar a WinJS.UI.processAll porque el control Page lo hace automáticamente. Si agregas el ListView a tu propio HTML personalizado, puedes usar el evento DOMContentLoaded para llamar a WinJS.UI.processAll. Para obtener más información sobre la activación de controles, consulta Inicio rápido: Agregar controles y estilos de WinJS.

Este código crea un ListView vacío. Si ejecutas la aplicación, aún no verás nada. En la siguiente sección, creaste algunos datos para que se muestre ListView.

Definir tus datos

Coloca el código para crear el origen de datos en un archivo JavaScript independiente. De esta manera, será más fácil de mantener. En esta sección, aprendiste a crear un archivo JavaScript para los datos, el procedimiento para crear un List y el procedimiento para usar la función WinJS.Namespace.define para que los datos estén accesibles al resto de la aplicación.

  1. Usa Visual Studio agregar un archivo de datos al proyecto. En el Explorador de soluciones, haz clic con el botón secundario en la carpeta js del proyecto y selecciona Agregar > Nuevo elemento. Se abre el cuadro de diálogo Agregar nuevo elemento.

  2. Selecciona Archivo JavaScript. Asígnale el nombre "dataExample.js". Haz clic en Agregar para crear el archivo. Visual Studio crea un archivo JavaScript vacío denominado dataExample.js.

  3. Abre dataExample.js. Crea una función anónima y activa el modo estricto.

    Como se describe en el tema sobre programación de aplicaciones básicas, una práctica recomendada de programación es encapsular el código JavaScript en una función anónima, así como usar el modo estricto.

    (function () {
    "use strict"; 





})();

  4. Crea una matriz de datos. En este ejemplo se crea una matriz de objetos. Cada objeto tiene tres propiedades: title, text e image.

    (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  Si vas trabajando en tu código, puedes cambiar las imágenes a archivos en tu equipo local o puedes conseguir las imágenes si descargas la Muestra de tareas iniciales con ListView (no es la misma muestra, pero usa las mismas imágenes). El ejemplo seguirá funcionando si no se agregan las imágenes.

     

  5. Usa la matriz para crear un objeto 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); 

})();

  6. Para exponer el control List, declara un espacio de nombres y agrega el control List como miembro público.

    Como el código que acabas de escribir está incluido en una función anónima, no se puede acceder públicamente al mismo. En parte, este es el motivo por el que usaste la función anónima: para que los datos privados sigan siendo privados. Para que el control ListView pueda acceder al control List, debes hacer que sea de acceso público. Una manera de hacerlo es usar la función WinJS.Namespace.define para crear un espacio de nombres y agregar el control List como uno de sus miembros.

    La función WinJS.Namespace.define toma dos parámetros: el nombre del espacio de nombres para crear y un objeto que contiene uno o más pares de propiedad/valor. Cada propiedad es el nombre público del miembro, y cada valor es la variable, propiedad o función subyacente en el código privado que deseas exponer.

    En este ejemplo se crea un espacio de nombres llamado DataExample que expone un miembro público con el nombre itemList, que devuelve el control 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); 

})();

Creaste un origen de datos al que podía accederse mediante ListView. A continuación, conectarás los datos a ListView.

Conectar los datos al control ListView

  1. En la sección head del archivo HTML que contiene tu ListView, agrega una referencia al archivo de datos que acabas de crear (dataExample.js):

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

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

</head>

  2. Usa los datos que creaste en la última sección para establecer la propiedad itemDataSource del control ListView.

    La propiedad itemDataSource toma un objeto IListDataSource. El objeto List no es un objeto IListDataSource, pero tiene una propiedad dataSource que devuelve una versión propia de IListDataSource.

    Para conectar tus datos, establece la propiedad itemDataSource del control ListView en DataExample.itemList.dataSource:

    
<div id="basicListView"
    data-win-control="WinJS.UI.ListView"
    data-win-options="{ itemDataSource : DataExample.itemList.dataSource }">
</div>

Ejecuta la aplicación. El ListView muestra las propiedades y los valores en el origen de datos:

Mostrar el contenido del origen de datos sin una plantilla.

Este no es el aspecto que queremos. Queremos mostrar solo los valores del campo de título y de texto, y queremos mostrar las imágenes reales, no la ruta de acceso a las imágenes. Para obtener la representación que queremos, tenemos que definir una Template. El siguiente paso muestra cómo hacerlo.

Definir una plantilla de elemento

A estas alturas, el ListView tiene todos los datos que necesita, pero no sabe cómo mostrarlos. Para ello, necesitas una plantilla de elemento que contenga el marcado que desees usar para mostrar cada elemento de la lista. La plantilla de elemento puede contener la mayoría de los otros controles (para obtener más información, consulta la sección Agregar elementos interactivos), pero no puede contener FlipView ni otro ListView.

Hay dos formas de crear una plantilla: puedes usar el marcado para definir un WinJS.Binding.Template o puedes crear una función de plantillas. En este ejemplo se crea una plantilla mediante marcado. Para obtener información sobre cómo crear una función de plantillas, consulta la propiedad itemTemplate.

Un WinJS.Binding.Template es muy fácil de crear: tienes que definir el marcado que quieres usar para mostrar cada elemento de lista y después indicar dónde se mostrará cada campo de datos.

  1. En el HTML, crea un control WinJS.Binding.Template y asígnale un identificador. En este ejemplo se usa el identificador "mediumListIconTextTemplate".

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

    </div>

    Nota  Para poder usar la plantilla, primero debes definirla. Agrega el HTML para la plantilla antes del HTML para ListView.

     

  2. WinJS.Binding.Template debe tener un único elemento raíz. Crea un elemento div que sirva de elemento primario para el contenido de la plantilla.

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

        </div>
    </div>

  3. Crea el marcado que el ListView presentará para cada elemento de datos que contenga. Los datos que creaste en el paso anterior contienen una ubicación de imagen, un título y algo de texto, así que crea estos elementos:

    • Un elemento img para mostrar el campo de imagen.
    • Un elemento h4 para mostrar el campo de título.
    • Un elemento h6 para mostrar el campo de texto.
        <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>

  4. Para que no surjan problemas de diseño, especifica siempre el tamaño de un elemento raíz de la plantilla, así como el tamaño de los elementos img en la plantilla.

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

  5. Establece el atributo data-win-bind en cada elemento que muestre datos. El atributo data-win-bind usa esta sintaxis:

    data-win-bind="propertyName: dataFieldName"

     

    Por ejemplo, para enlazar la propiedad src de un objeto img al campo "picture", usa esta sintaxis:

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

    Para establecer varias propiedades, sepáralas con un punto y coma:

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

     

    En este ejemplo se enlazan los elementos de la plantilla con sus campos de datos correspondientes.

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

  6. Para usar la plantilla de elemento, usa la sintaxis select para establecer la propiedad itemTemplate del control ListView en la plantilla de 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>

    Ahora, cuando ejecutes la aplicación, los datos enlazados aparecerán en la lista.

    Un ListView enlazado a datos que muestra imágenes y texto.

Aplicar estilos a ListView

El control ListView no ajusta dinámicamente su alto para encajar en el contenido. Para representar un ListView, debes especificar un valor absoluto para su alto. Las hojas de estilo de WinJS establecen la altura del control ListView en 400px, pero puedes especificar tu propia altura muy fácilmente: basta con reemplazar el estilo predeterminado por tu propia CSS. Agrega esta CSS al archivo CSS de la aplicación para establecer el alto y el ancho de ListView y ponle un borde:

Aplicación de estilos ListView para Windows

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

Aplicación de estilos ListView para Windows Phone 8.1

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

win-listview es una clase definida por WinJS que puedes usar para aplicar estilos a ListView. En el ejemplo que acabas de ver, se cambia el alto, el ancho y un borde de cada ListView. Para cambiar solo un ListView, agrega al selector el identificador del control ListView que hospeda el elemento div:

Aplicación de estilos ListView específicos para Windows

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

Aplicación de estilos ListView específicos para Windows Phone 8.1

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

Ejecuta la aplicación. Ahora, ListView es lo suficientemente grande como para mostrar todos los elementos.

Un control ListView de 500px.

Las hojas de estilo de WinJS definen clases CSS que puedes reemplazar para personalizar el aspecto de un control de WinJS. Entre las clases CSS que usas con ListView se incluyen:

  • win-listview

    Especifica estilos para el propio control ListView.

  • win-container

    Especifica estilos para un contenedor de elementos ListView o FlipView. Cada elemento tiene su propio contenedor.

  • win-progress

    Especifica estilos para el control de progreso que muestra cuándo ListView está cargando elementos.

Para obtener una lista completa, consulta la ListView reference page.

En este ejemplo se define un estilo que agrega un margen sobre cada contenedor de elementos en ListView.


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

Elementos con estilo en un ListView

En el ejemplo siguiente se define un estilo que se aplica a elementos de lista en un ListView en el estado de movimiento del mouse.

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

Nota  

El control ListView admite márgenes en los lados izquierdo, superior e inferior, pero no puedes especificar un margen en el lado derecho. Una solución es agregar un elemento que sea tan ancho como el margen que quieres agregar y establecer su propiedad style.visibility en "ninguno". Después, agrega el elemento a la derecha de ListView.

 

Aplicar estilos a elementos

En los ejemplos anteriores se usaron estilos en línea y las clases de WinJS para aplicar estilo al control ListView y sus elementos. También puedes usar clases CSS para aplicar estilo a la plantilla de elementos. En el siguiente ejemplo se actualiza la plantilla que definiste en la sección Definir una plantilla de elemento. Esta plantilla quita los estilos en línea que definiste y agrega algunas clases 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>

Agrega estos estilos a la hoja CSS de la aplicación:

.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;
    }

Este es el aspecto que ListView tiene ahora:

Un ListView con elementos con estilo

No tienes que crear los estilos de la plantilla desde cero. Para obtener un conjunto de plantillas más comunes y sus CSS correspondientes, consulta Plantillas de elemento para diseños de lista y Plantillas de elemento para diseños de cuadrícula.

Cambiar entre diseños de lista, cuadrícula y celdas

El elemento ListView tiene tres modos de diseño: lista, cuadrícula y celda.

  • Para usar el diseño de lista, establece la propiedad layout en WinJS.UI.ListLayout, como se muestra aquí:

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

  • Para usar el diseño de cuadrícula, establece la propiedad layout en WinJS.UI.GridLayout, como se muestra aquí:

        <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) Para usar el diseño de celda, establece la propiedad layout en WinJS.UI.CellSpanningLayout, como se muestra aquí:

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

Puedes cambiar el diseño de un control ListView cuando quieras, incluso después de crearlo.

Agrupar los datos

Puedes usar agrupar elementos en el control ListView. Esta ilustración muestra elementos agrupados alfabéticamente:

Un control ListView con elementos agrupados

Para aprender a hacerlo, consulta el tema de procedimiento para agrupar elementos en un control ListView.

Agregar elementos interactivos a una plantilla de elemento

Nota  La plantilla de elemento puede contener la mayoría de los otros controles, pero no puede contener un FlipView ni otro ListView.

 

Seleccionar e invocar elementos de ListView

Normalmente, cuando el usuario interactúa con un elemento, el ListView captura esa interacción y la usa para determinar si el usuario seleccionó o invocó un elemento o si está realizando un movimiento panorámico por los elementos. Para que un elemento interactivo, como un control, reciba entrada, debes adjuntar la clase win-interactive CSS al elemento interactivo o a uno de sus elementos principales. Ese elemento y sus elementos secundarios reciben la interacción y ya no desencadenan eventos para el ListView.

Cuando adjuntas la clase win-interactive a un elemento en una plantilla de elemento, asegúrate de que el elemento no rellene todo el elemento; de lo contrario, el usuario no tendrá una manera de seleccionar o invocar ese elemento.

Para agregar elementos interactivos a la plantilla de elemento, recomendamos que uses una función de plantillas en lugar de WinJS.Binding.Template. Para obtener más información acerca de las funciones de plantillas, consulta Procedimiento para crear una función de plantilla.

Agregar a ListView funciones para reordenar, arrastrar y colocar (solo Windows)

El control ListView también permite al usuario reordenar, arrastrar y colocar elementos individuales. Por ejemplo, puedes declarar la funcionalidad de arrastrar estableciendo la propiedad itemsDraggable de ListView en 'true'. De manera similar, para permitir al usuario reordenar los elementos en el control ListView, establece la propiedad itemsReorderable de ListView en 'true'.

<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 propiedad itemsDraggable permite que los elementos individuales se arrastren visiblemente desde el control ListView. Cuando el usuario arrastra un elemento desde ListView, se general el evento itemdragstart. (Este evento también se genera al inicio de una operación de reordenación). Cuando un elemento se coloca en ListView, ListView genera un evento itemdragdrop.

Para obtener más información sobre cómo agregar funcionalidades para reordenar, arrastrar o colocar a un control ListView, consulta Cómo habilitar funcionalidades para reordenar, arrastrar y colocar en un ListView o descarga la muestra en HTML para reordenar, arrastrar y colocar un ListView.

Muestras de ListView

Para ver ejemplos de código en directo de casi cualquier control de WinJS y un editor en línea, consulta try.buildwinjs.com.

Estas muestras adicionales pueden ayudarte a obtener más información acerca del control de ListView.

Resumen y pasos siguientes

Aprendiste a crear un control ListView y enlazarlo a los datos. También aprendiste a crear plantillas de elemento y aplicarles estilos.

Para obtener una lista de plantillas de elemento predefinidas que puedes usar en la aplicación, consulta Plantillas de elemento para diseños de lista y Plantillas de elemento para diseños de cuadrícula. Para aprender a agrupar elementos, consulta el tema de procedimiento para agrupar elementos en un control ListView.