Cómo personalizar la marca de ListView

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

En Personalización de marca de tus aplicaciones de la Tienda Windows, se explicó cómo incorporar la esencia de tu marca en tu aplicación, cumpliendo con los principios de diseño de Microsoft. Se abarcaron siete aspectos del diseño de marca: color, iconos, imágenes, cuadrícula, diseño, logotipo y tipografía.

Aquí se describe cómo personalizar la página de aterrizaje de tu aplicación con estas técnicas:

  • Cambio de las plantillas de elemento ListView
  • Cambio de los tamaños de elementos ListView
  • Incorporación de animaciones de elementos ListView

En este tema se muestra cómo comenzar desde la plantilla Aplicación de cuadrícula de Visual Studio y modificarla para crear páginas de aterrizaje como estas:

Página de aterrizaje de Contoso Bakery

Ejemplo de Contoso Food Truck

Requisitos previos

Cuándo usar ListView

Tu primera decisión es qué controles usarás en la página de aterrizaje. Para obtener una lista de controles HTML y de la Biblioteca de Windows para JavaScript, consulta la Lista de controles.

Si quieres presentar una colección de datos como una serie de elementos, por ejemplo una lista de correos electrónicos, resultados de búsqueda o un catálogo de elementos de compra, usa ListView.

ListView muestra elementos en un diseño de cuadrícula o lista. La mayoría de las páginas de aterrizaje que muestran elementos usan el diseño de cuadrícula del control ListView, porque crea desbordamientos automáticamente y se desplaza horizontalmente. Puedes personalizar los elementos en ListView al modificar la itemTemplate que se usa para mostrar los elementos.

Diseño de cuadrícula CSS3 y sistema de cuadrícula de Windows 8

El sistema de cuadrícula es una parte importante de la apariencia de Windows 8, y ayuda a lograr unidad visual entre las diferentes aplicaciones y características. Con el diseño de cuadrícula, puedes dividir el espacio para los elementos en la página y alinear fácilmente los elementos con la cuadrícula.

En los ejemplos, también se usa el diseño de cuadrícula de hojas de estilo CSS de nivel 3 (CSS3), que es diferente del diseño de cuadrícula del control ListView. El diseño de cuadrícula CSS3 proporciona estilos de cuadrícula generales para una amplia variedad de usos, mientras que ListView solo se usa para mostrar colecciones de datos. Con el diseño de cuadrícula CSS3, puedes diseñar perfectamente tus aplicaciones y alinear fácilmente los elementos con la cuadrícula.

Ejemplo de Contoso French Bakery

Observemos la plantilla Grid App predeterminada de Visual Studio y comparémosla con el ejemplo de Contoso French Bakery de Personalización de marca de tus aplicaciones de la Tienda Windows. Aquí se muestra una captura de pantalla de la plantilla Grid App:

Aplicación que usa la plantilla Grid App

Comparémosla con la página de aterrizaje de Contoso French Bakery de Personalización de marca de tus aplicaciones de la Tienda Windows. Contoso French Bakery diseña sus elementos de manera personalizada, con énfasis en la marca Contoso.

Página de aterrizaje de Contoso Bakery

Aunque la página de aterrizaje de Contoso French Bakery tiene una apariencia muy diferente de la plantilla Grid App, la diferencia proviene de unas pocas modificaciones de HTML/CSS. En este ejemplo, se supone que los elementos son interactivos y que al seleccionar un elemento, el usuario accede a una página de detalles de grupo con una selección de tipos de galletas, pastelitos, etc. Un control adecuado para esta página de aterrizaje es un ListView que use el diseño de cuadrícula.

Para convertir la plantilla Grid App en la página de aterrizaje de Contoso, se debe cambiar el tamaño de las plantillas de elemento, aumentar los tamaños de las imágenes y agregar descripciones de los elementos.

  1. En Visual Studio, crea una aplicación nueva que use la plantilla Grid App.

  2. Actualiza la clase itemtemplate HTML en groupedItems.html. El cambio principal de la clase itemtemplate predeterminada es agregar un tercer elemento de encabezado para mostrar la descripción de cada elemento.

        <div class="itemtemplate" data-win-control="WinJS.Binding.Template">
        <div class="item">
            <img class="item-image" src="#" 
                 data-win-bind="src: backgroundImage; alt: title" />
            <div class="item-text">
                <h3 class="item-title" data-win-bind="textContent: title"></h3>
                <h6 class="item-subtitle win-type-ellipsis" 
                    data-win-bind="textContent: subtitle"></h6>
                <h6 class="item-detail" data-win-bind="textContent: description"></h6>
            </div>
        </div>
    </div>

  3. Ahora se actualizan los estilos en groupedItems.css. El cambio principal en groupedItems.css es mover el texto div debajo de la imagen, en lugar de superponerlo en la parte superior de la imagen, y agregar otra fila a la cuadrícula para el elemento de detalles de los elementos.

    .groupeditemspage .groupeditemslist .win-horizontal.win-viewport .win-surface {
        margin-bottom: 60px;
        /* Decreased margin */
        margin-left: 35px;
        margin-right: 115px;
}   
.groupeditemspage .groupeditemslist .item {
       /* Changed row size and item size, centered text and changed text color */ 
        -ms-grid-columns: 1fr;
        -ms-grid-rows: 1fr 1280px;
        display: -ms-grid;
        height: 600px500px;
        width: 350px;
        text-align: center;
        color: rgb(160,160,160);

    }

        .groupeditemspage .groupeditemslist .item .item-image {
               /* Increased image size and altered padding */
            height: 340px;
            width: 340px;
            padding: 0px 5px 20px 5px;
        }

        .groupeditemspage .groupeditemslist .item .item-text {
            /* Added a row to the grid and changed height and padding */
            -ms-grid-row: 2;
            -ms-grid-rows: 30px 21px 1fr;
            display: -ms-grid;
            padding: 30px 15px 2px 15px;
            height: 150px;
        }

            .groupeditemspage .groupeditemslist .item .item-text .item-title {
                /* Changed font color */
                -ms-grid-row: 1;
                overflow: hidden;
                font-size: 16pt;
                color: rgb(200,200,200);
            }

            .groupeditemspage .groupeditemslist .item .item-text .item-subtitle {
                -ms-grid-row: 2;
            }
            .groupeditemspage .groupeditemslist .item .item-text .item-detail {
                /* All new CSS for the detail text */
                -ms-grid-row: 3;
                overflow:hidden;
                padding-top: 20px;
                height: 60px;
                margin-left: 30px;
                margin-right: 30px;
            }

  4. Quita los encabezados de grupo de data.js. (La manera más sencilla consiste simplemente en eliminar el título de cada grupo).

Con estos cambios, ahora tu aplicación tiene el siguiente aspecto:

Aplicación actualizada

Agrega algunas imágenes y cambia el fondo y el título; de esta manera, habrás creado la página de aterrizaje de Contoso French Bakery.

Ejemplo de Contoso Food Truck

En el siguiente ejemplo, se crea la página de aterrizaje de Contoso Food Truck a partir de la plantilla Grid App.

Ejemplo de Contoso Food Truck

La página de aterrizaje de Contoso Food Truck capta al usuario con imágenes atractivas en varios tamaños.

A diferencia del ejemplo anterior, esta página de aterrizaje requiere algunas incorporaciones de JavaScript en la plantilla, principalmente agregar la lógica para proporcionar los elementos en los diferentes tamaños de ListView. También en este caso se supone que los elementos de la página de aterrizaje son interactivos y que al elegir uno el usuario accede a la vista de detalles de ese elemento. La herramienta adecuada para el trabajo es ListView con el diseño de cuadrícula. Una vez más, se usa la plantilla Grid App como punto de partida.

Para usar elementos de varios tamaños, primero se debe decidir una unidad de base mínima. Esta unidad se usa para desarrollar todos los demás elementos de cuadrícula, de manera que todos los elementos de cuadrícula deben estar compuestos de múltiplos de este tamaño de cuadrícula. La dimensión más pequeña de uno de estos elementos en la siguiente imagen es la altura de los elementos en la sección “Cercanos”, que tiene alrededor de 80 píxeles. Con la dimensión horizontal hay más flexibilidad. Por motivos de simplicidad, también se usan 80 píxeles para la dimensión horizontal.

En esta imagen se muestra el aspecto de la unidad de base (el cuadrado rojo) en comparación con varios elementos reales.

Tamaño del elemento de base

Al calcular los tamaños de los elementos, cada tamaño de elemento debe ser igual que un múltiplo de la unidad de base, más el espaciado interno entre las unidades. La fórmula es:

item sizeₓ = m * base unit sizeₓ + (m -1) * item paddingₓ

item sizey = m * base unit sizey + (m -1) * item paddingy

donde m es un entero positivo, y x y y denotan las dimensiones x e y del tamaño del elemento y el espaciado interno del elemento.

Si el tamaño base es demasiado pequeño en relación con los elementos, se degradará el rendimiento de tu aplicación. Como regla general, el tamaño de los elementos no debe ser más que algunas unidades de base en cualquier dirección.

  1. En Visual Studio, crea una aplicación nueva que use la plantilla Grid App.

  2. En groupedItems.html, crea una plantilla de elemento denominada multisizebaseitemtemplate. Esta plantilla de elemento es prácticamente igual que la plantilla de elemento predeterminada, pero con un encabezado de “descripción del elemento” agregado para que se pueda incluir la descripción de cada elemento, además del título y el subtítulo en la página de aterrizaje.

      <!-- Template tutorial HTML -->
    <div class="multisizebaseitemtemplate" data-win-control="WinJS.Binding.Template">
        <img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
        <div class="item-overlay">
            <h4 class="item-title" data-win-bind="textContent: title"></h4>
            <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h6>
            <h6 class="item-description" data-win-bind="textContent: description"></h6>
        </div>
    </div>

  3. En groupedItems.js, crea una función de plantillas denominada multisizeItemTemplateRenderer antes de la definición de PageControl (ui.Pages.define).

    Esta función se usa para representar los elementos ListView. Esta función es la que determina qué elementos usan cada plantilla de elemento. Se asigna a la propiedad itemTemplate del control ListView en un paso posterior.

     function multisizeItemTemplateRenderer(itemPromise) {
        return itemPromise.then(function (currentItem) {
            var content;
            // Grab the default item template used on the groupeditems page.
            content = document.querySelector(".multisizebaseitemtemplate");
            var result = content.cloneNode(true);

            // Change the CSS class of the item depending on the group, then set the size in CSS.
            switch (currentItem.groupKey) {
                case "group1":
                    {
                        // For the first item, use the largest template.
                        if (currentItem.index == 0) {
                            result.className = "largeitemtemplate"
                        }
                        // Use the mediumlarge template for the second item
                        else if (currentItem.index == 2) {
                            result.className = "mediumlargeitemtemplate"
                        }
                        // Use the medium template for the third item, and any other items
                        else {
                            result.className = "mediumitemtemplate"
                        }
                        break;
                    }
                default:
                    {
                        // Use the small template for the second group
                        result.className = "smallitemtemplate"
                    }
            }
            // Because we used a WinJS template, we need to strip off some attributes 
            // for it to render.
            result.attributes.removeNamedItem("data-win-control");
            result.attributes.removeNamedItem("style");
            result.style.overflow = "hidden";

            // Because we're doing the rendering, we need to put the data into the item.
            // We can't use data binding.
            result.querySelector(".item-image").src = currentItem.data.backgroundImage;
            result.querySelector(".item-title").textContent = currentItem.data.title;
            result.querySelector(".item-subtitle").textContent = currentItem.data.subtitle;
            result.querySelector(".item-description").textContent = currentItem.data.description;
            return result;
        });
    }

  4. En groupedItems.js, agrega la función groupInfo, también fuera de la definición de la página. Esta función le indica a ListView que use elementos de varios tamaños en la vista e indica el tamaño base de los elementos. El tamaño base es el elemento más pequeño que se muestra en la lista. Los demás elementos deben ser múltiplos de este tamaño para que los diseños funcionen correctamente.

     function groupInfo() {
    return {
        enableCellSpanning: true,
        cellWidth: 80,
        cellHeight: 80
    };
 }

  5. Ahora tenemos que enlazar estas funciones nuevas al control ListView.

    1. En groupedItems.js, cambia la función _initializeLayout de modo que mostremos una lista sin formato de los grupos.

      // Add the itemTemplate parameter as shown.
_initializeLayout: function (listView, viewState, itemTemplate) {
    if (viewState === appViewState.snapped) {
        listView.itemDataSource = Data.groups.dataSource;
        listView.groupDataSource = null;

        // Add the following line of code.
        listView.itemTemplate = itemTemplate;

        listView.layout = new ui.ListLayout();
    } else {

                listView.itemDataSource = Data.items.dataSource;
                listView.groupDataSource = Data.groups.dataSource;
                listView.layout = new ui.GridLayout({ groupHeaderPosition: "top" });

        // Add the following two lines of code.
        listView.itemTemplate = multisizeItemTemplateRenderer;
        listView.layout = new ui.GridLayout({ groupInfo: groupInfo, groupHeaderPosition: "top" });
    }
},

    2. Quita la línea que asigna una plantilla de elemento a ListView y realiza los cambios indicados en los comentarios en este código.

      ready: function (element, options) {
    var listView = element.querySelector(".groupeditemslist").winControl;

    // Add the next line of code to retrieve the item template. 
    var itemTemplate = element.querySelector(".itemtemplate");

    listView.groupHeaderTemplate = element.querySelector(".headerTemplate");

    listView.oniteminvoked = this.itemInvoked.bind(this);
        listView.itemTemplate = element.querySelector(".itemtemplate");

    // Change the last argument of the _initializeLayout function to itemTemplate.
    this._initializeLayout(listView, appView.value, itemTemplate);
    listView.element.focus();
 },

// This function updates the page layout in response to viewState changes.
updateLayout: function (element, viewState, lastViewState) {
    var listView = element.querySelector(".groupeditemslist").winControl;

    // Add the next line of code to retrieve the item template.
    var itemTemplate = element.querySelector(".itemtemplate");

    if (lastViewState !== viewState) {
        if (lastViewState === appViewState.snapped || viewState === appViewState.snapped) {
            var handler = function (e) {
                listView.removeEventListener("contentanimating", handler, false);
                e.preventDefault();
            }
            listView.addEventListener("contentanimating", handler, false);

            // Change this line to pass through the item template.
            this._initializeLayout(listView, viewState, itemTemplate);
        }
    }
},

  6. A continuación, debemos agregar estilos para los elementos en groupedItems.css. Para aplicar estilos a los elementos como se muestra en la imagen anterior, se necesitan 4 clases CSS para las 4 plantillas de elemento diferentes en la página de aterrizaje. Aplica un nombre a las cuatro clases smallitemtemplate, mediumitemtemplate, mediumlargeitemtemplate y largeitemtemplate. La CSS siguiente posiciona principalmente la superposición y el texto en relación con la imagen y ajusta el tamaño de cada elemento según corresponda. En algunos casos, se contraen determinados elementos, porque no todas las plantillas usan todos los elementos de la plantilla de elemento. Agrega esta CSS inmediatamente antes de la primera línea de CSS de @media screen.

    /* Generic styling */
.groupeditemspage .groupeditemslist .item-overlay {
    -ms-grid-row: 2;
}
.groupeditemspage .groupeditemslist .item-overlay .item-description {
    visibility:collapse;
}

/* Small item template */
.groupeditemspage .groupeditemslist .smallitemtemplate {
    width: 440px;
    height: 80px;
    overflow: hidden;

}
.groupeditemspage .groupeditemslist .smallitemtemplate .item-image {
    height: 80px;
    width: 80px;
}
.groupeditemspage .groupeditemslist .smallitemtemplate .item-overlay {
   opacity: 0;
}
.groupeditemspage .groupeditemslist .smallitemtemplate .item-overlay .item-title {
    position: absolute; 
    top: -5px;
    padding-left: 90px;
    font-size: 11pt;
}
.groupeditemspage .groupeditemslist .smallitemtemplate .item-overlay .item-subtitle {
    position: absolute; 
    top: 15px;
    padding-left: 90px;
    font-size: 9pt;
}
.groupeditemspage .groupeditemslist .smallitemtemplate .item-overlay .item-description {
    position: absolute; 
    top: 35px;
    padding-left: 90px;
    font-size: 9pt;
    visibility: visible;
    width: 360px;
    overflow-wrap: normal;
    text-overflow: initial;
}

/* Medium item template */
.groupeditemspage .groupeditemslist .mediumitemtemplate {
    width: 260px;
    height: 170px;
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 1fr 30px;
    display: -ms-grid;
    overflow: hidden;
}      
.groupeditemspage .groupeditemslist .mediumitemtemplate .item-overlay .item-title {
    padding-top: 5px;
    padding-left: 10px;
}
.groupeditemspage .groupeditemslist .mediumitemtemplate .item-overlay .item-title {
    font-size: 14px;
}
.groupeditemspage .groupeditemslist .mediumitemtemplate .item-overlay .item-subtitle {
    visibility: collapse;
}   

/* Medium-large item template */
.groupeditemspage .groupeditemslist .mediumlargeitemtemplate {
    width: 260px;
    height: 350px;
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 1fr 30px;
    display: -ms-grid;
    overflow: hidden;
}
.groupeditemspage .groupeditemslist .mediumlargeitemtemplate .item-overlay .item-title {
    padding-top: 5px;
    padding-left: 10px;
    font-size: 14px;
}

.groupeditemspage .groupeditemslist .mediumlargeitemtemplate .item-overlay .item-subtitle {
    visibility: collapse;
}   

/* Large item template */
.groupeditemspage .groupeditemslist .largeitemtemplate {
    width: 440px;
    height: 530px;
    overflow: hidden;
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 1fr 90px;
    display: -ms-grid;
}
.groupeditemspage .groupeditemslist .largeitemtemplate .item-overlay {
    -ms-grid-row: 2;
    -ms-grid-rows: 1fr 21px;
    display: -ms-grid;
    padding: 6px 15px 2px 15px;
}
.groupeditemspage .groupeditemslist .largeitemtemplate .item-subtitle{
    -ms-grid-row: 2;
}

  7. En la regla @media screen and (-ms-view-state: fullscreen-landscape), screen and (-ms-view-state: fullscreen-portrait), screen and (-ms-view-state: filled), cambia el primer estilo de CSS al siguiente. Este código CSS hace que la superposición resulte opaca y quita la clase "item".

     .groupeditemspage .groupeditemslist .item-overlay {
        background: rgba(0,0,0,1);
    }

  8. Cambia el primer estilo de .groupeditemspage .groupeditemslist .win-horizontal.win-viewport .win-surface en groupedItems.css a este.

        .groupeditemspage .groupeditemslist .win-horizontal.win-viewport .win-surface {
        margin-bottom: 60px;
        margin-left: 45px;
        margin-right: 115px;
    }

    Este código CSS cambia la parte inferior del margen a "50 píxeles" para representar elementos un poco más grandes.

Después de realizar estos cambios, inicia tu aplicación. Tendrá este aspecto:

Aplicación actualizada

Agrega imágenes y cambia el color de superposición, de fondo y de texto, y obtendrás la página de aterrizaje de Contoso Food Truck.

Plantillas y tamaños más creativos

Hay más maneras de personalizar las plantillas de elementos, aparte de las que se muestran aquí. Por ejemplo, esta página de aterrizaje logra un aspecto equilibrado mediante el uso de dos tamaños de elemento y tres plantillas diferentes.

Otra página de aterrizaje personalizada

La unidad de base de esta página de aterrizaje es el tamaño del elemento más pequeño. El primer elemento de cada grupo son las unidades de base de 2x3, que tienen una plantilla que coloca el título y la descripción debajo de la imagen. Los siguientes elementos del grupo son unidades de 1x1 y superponen el título y la descripción en la imagen. La tercera plantilla es para elementos que no tienen imágenes.

Incorporación de animaciones de elementos ListView

En la pantalla Inicio, los iconos dinámicos presentan al usuario imágenes y texto actualizados que proporcionan información de un vistazo. La página de aterrizaje de una aplicación puede hacer lo mismo, si corresponde, con la biblioteca de animaciones de WinJS.

En este ejemplo, el primer elemento de la página de aterrizaje se actualiza con una imagen nueva cada cuatro segundos, la misma cantidad de tiempo que se usa en la pantalla Inicio. Usamos la animación de información de WinJS, que es la misma animación que usan los iconos de Inicio.

  1. En Visual Studio, crea una aplicación nueva que use la plantilla Grid App.

  2. En groupedItems.html, modifica la plantilla de elemento para incluir una segunda imagen, que se usará para la animación.

        <div class="itemtemplate" data-win-control="WinJS.Binding.Template">
        <div class="item">
            <img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
            <img class="item-image-new" src="#" data-win-bind="src: backgroundImage; alt: title" />
            <div class="item-overlay">
                <h4 class="item-title" data-win-bind="textContent: title"></h4>
                <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h6>
            </div>
        </div>
    </div>

  3. En groupedItems.css, modifica la CSS para posicionar la segunda imagen debajo de la imagen inicial. Esto permite animar la imagen nueva en lugar de comenzar desde la parte inferior del elemento. Se debe lograr que ambos elementos usen un posicionamiento relativo para poder cambiar su posición antes de iniciar la animación. El primer y el tercer estilo CSS ya existen en groupedItems.css y solo deben modificarse. El segundo estilo CSS es nuevo.

            /* Update this CSS style. */
        .groupeditemspage .groupeditemslist .item .item-image {
            -ms-grid-row-span: 2;
            position:relative;
        }

        /* Add this CSS style. */
        .groupeditemspage .groupeditemslist .item .item-image-new {
            -ms-grid-row-span: 2;
            position:relative;
            top: 250px;
        }

        /* Update this CSS style. */
        .groupeditemspage .groupeditemslist .item .item-overlay {
            -ms-grid-row: 2;
            -ms-grid-rows: 1fr 21px;
            display: -ms-grid;
            padding: 6px 15px 2px 15px;
            position:relative;
        }

  4. En groupedItems.js, agrega este código a la función ready para desencadenar una nueva animación de elementos cada 4 segundos.

                setInterval(function () { changeImage() } , 4000);

  5. En groupedItems.js, agrega este código fuera de la definición de la página. Las primeras definiciones de variable señalan las diferentes imágenes utilizadas por la plantilla Grid App. Agrega la función peekTile para reproducir la animación de información Biblioteca de Windows para JavaScript. Agrega la función changeImage para actualizar las imágenes antes de reproducir la animación. En este ejemplo, se reproduce la animación únicamente para el primer elemento de ListView.

        // Define images
    var darkGray = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY3B0cPoPAANMAcOba1BlAAAAAElFTkSuQmCC";
    var lightGray = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY7h4+cp/AAhpA3h+ANDKAAAAAElFTkSuQmCC";
    var mediumGray = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY5g8dcZ/AAY/AsAlWFQ+AAAAAElFTkSuQmCC";

    // Play the Peek animation
    function peekTile(tile1, tile2) {
        // Create peek animation
        var peekAnimation = WinJS.UI.Animation.createPeekAnimation([tile1, tile2]);

        // Reposition tiles to their desired post-animation position
        tile1.style.top = "-250px";
        tile2.style.top = "0px";

        // Execute animation
        peekAnimation.execute();
    }

   function changeImage() {
        // Get the two image elements
        var images = document.querySelector(".item-image");
        var imagesNew = document.querySelector(".item-image-new"); 

        // Swap out the old image source and choose the new image source
        images.src = imagesNew.src;
        if (images.src == lightGray)
            imagesNew.src = mediumGray;
        else if (images.src == mediumGray)
            imagesNew.src = darkGray;
        else
            imagesNew.src = lightGray;

        // Reset the elements for the pre-animation position and trigger the animation
        images.style.top = "0px";
        imagesNew.style.top = "250px";
        peekTile(images, imagesNew);
    };

    ¡Felicitaciones, has agregado animaciones de elementos personalizadas a tu ListView!

Temas relacionados

ListView

Inicio rápido: Agregar ListView

Aplicación de estilos a ListView y sus elementos