Aplicaciones de Windows
Contraer la tabla de contenido
Expandir la tabla de contenido

Inicio rápido: Agregar un ListView (aplicaciones de la Tienda Windows con JavaScript y HTML)

La mayoría de las aplicaciones muestran 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. Es posible que estas listas obtengan sus datos de una base de datos, de la web o de un origen de datos JSON. La biblioteca de Windows para JavaScript proporciona un control ListView que puedes usar para mostrar datos.

Requisitos previos

Se supone que sabes crear una aplicación básica de la Tienda Windows desarrollada para Windows con JavaScript que use controles de la Biblioteca de Windows para JavaScript. Para obtener ayuda para empezar a usar controles de la Biblioteca de Windows para JavaScript, consulta Inicio rápido: Agregar controles y estilos de WinJS.

¿Qué es un ListView?

ListView es un control de la biblioteca de Windows para JavaScript que muestra datos de un IListDataSource en una lista o cuadrícula personalizada. La biblioteca de Windows para JavaScript 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-ar,WIN.10).gifPara crear un control ListView

  1. Agrega al archivo HTML algunas referencias a la biblioteca de Windows para JavaScript, si aún no las contiene.

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

    En este ejemplo, se muestra el HTML del archivo default.html que se genera cuando creas un nuevo proyecto Aplicación vacía en Microsoft Visual Studio Express 2012 for Windows 8.

    
    
    <!-- default.html -->
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>ListViewExample</title>
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet">
        <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
        <script src="//Microsoft.WinJS.1.0/js/ui.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>
    
    

    En este ejemplo se usa la hoja de estilos clara en lugar de la oscura. Por eso, si quieres que la aplicación coincida con estos ejemplos, cambia esta referencia:

    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet">
    
    
    

    por este código:

    
         <!-- WinJS references -->
        <link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet">
    
    
    
  2. En el 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. Si deseas agregar un archivo de datos al proyecto, usa Visual Studio Express 2012 para Windows 8. 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 Express 2012 para Windows 8 crea un archivo JavaScript en blanco 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). También puedes ejecutar la muestra sin agregar las imágenes. No dejará de ejecutarse sin ellas.

  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>
        <meta charset="utf-8">
        <title>ListViewExample</title>
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet">
        <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
        <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
    
        <!-- ListViewExample references -->
        <link href="/css/default.css" rel="stylesheet">
        <script src="/js/default.js"></script>
    
        <!-- 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.

Puedes crear una plantilla de dos maneras: usando el marcado para definir un WinJS.Binding.Template o creando una función de plantilla. En este ejemplo se crea una plantilla mediante marcado. Para obtener información sobre cómo crear una función de plantilla, 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 imgpara 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 garantizar el diseño de la propiedad, 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 la biblioteca de Windows para JavaScript establecen el alto del control ListView en 400 px. Pero es sencillo especificar el alto que desees. Para ello, invalida el estilo predeterminado con tu propia hoja CSS. Agrega esta CSS al archivo CSS de la aplicación para establecer el alto y el ancho de ListView y ponle un borde:


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

win-listview es una clase definida por la biblioteca de Windows para JavaScript 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 el identificador del control ListView que hospeda el elemento div al selector:


#basicListView.win-listview 
{
    height: 500px; 
    width: 500px; 
    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 la biblioteca de Windows para JavaScript definen clases CSS que puedes reemplazar para personalizar el aspecto de un control de la Biblioteca de Windows para JavaScript. 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 {
    background-color: red;
    border-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 deListView.

Aplicar estilos a elementos

En los ejemplos anteriores se usaron estilos en línea y las clases de la biblioteca de Windows para JavaScript para aplicar estilos al control ListView y sus elementos. También puedes usar clases CSS para aplicar estilos a la plantilla de elementos. En el ejemplo siguiente 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:

Hh465496.basicListView2d(es-ar,WIN.10).png

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 y cuadrícula

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

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

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

La plantilla de elemento puede contener la mayoría de los otros controles, pero no puede contener un FlipView ni otro 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 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.

Muestras de ListView

Estas muestras te ayudarán a conocer mejor el control 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.

 

 

Mostrar:
© 2018 Microsoft