Condividi tramite

Come personalizzare ListView

  • Articolo

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

In Personalizzazione di un'app di Windows Store abbiamo illustrato come incorporare l'essenza del tuo marchio nell'app rispettando allo stesso tempo i principi di progettazione Microsoft. Abbiamo trattato sette aspetti della progettazione del marchio: colore, icone, immagini, griglia, layout, logo e tipografia.

In questa sezione parleremo di come personalizzare la pagina di destinazione dell'app con queste tecniche:

  • Modifica dei modelli di elementi di ListView
  • Modifica delle dimensioni degli elementi di ListView
  • Aggiunta di animazioni agli elementi di ListView

Questo argomento illustra come modificare il modello di app Grid di Visual Studio per creare pagine di destinazione come queste:

Pagina di destinazione di Contoso Bakery

Esempio di Contoso Food Truck

Prerequisiti

Quando usare un controllo ListView

La prima decisione da prendere riguarda i controlli da usare nella pagina di destinazione. Per un elenco di controlli HTML e della Libreria Windows per JavaScript, vedi l'elenco di controlli.

Se vuoi presentare una raccolta di dati come serie di elementi, ad esempio un elenco di e-mail, i risultati di una ricerca o un catalogo di elementi per l'acquisto, usa ListView.

ListView visualizza gli elementi in un layout elenco o a griglia. Nella maggior parte delle pagine che visualizzano elementi si usa il layout a griglia del controllo ListView, perché esegue automaticamente l'overflow e scorre in orizzontale. Puoi personalizzare gli elementi di ListView modificando l'oggetto itemTemplate usato per visualizzare gli elementi.

Layout a griglia CSS3 e sistema della griglia di Windows 8

Il sistema della griglia è una parte importante dell'aspetto di Windows 8, in quanto aiuta a conferire uniformità visiva alle diverse app e funzionalità. Con il layout a griglia puoi dividere lo spazio per gli elementi sulla pagina e allineare facilmente gli elementi alla griglia.

Nei nostri esempi usiamo anche il layout a griglia del foglio di stile CSS3 (Cascading Style Sheet, livello 3), che è diverso dal layout a griglia del controllo ListView. Il layout a griglia di CSS3 consente l'applicazione di stili generici per un'ampia varietà di utilizzi, mentre il controllo ListView può essere usato solo per la visualizzazione di raccolte di dati. Con il layout a griglia di CSS3 puoi disporre disporre le tue app in modo pulito e allineare facilmente gli elementi alla griglia.

Esempio di Contoso French Bakery

Esaminiamo il modello Grid App predefinito di Visual Studio e confrontiamolo con l'esempio di Contoso French Bakery della sezione Personalizzazione di un'app di Windows Store. Ecco una cattura di schermata del modello Grid App:

App con il modello Grid App

Confrontiamo questo modello con la pagina di destinazione di Contoso French Bakery della sezione Personalizzazione di un'app di Windows Store. In Contoso French Bakery gli elementi sono disposti in un modo personalizzato che enfatizza il marchio Contoso.

Pagina di destinazione di Contoso Bakery

Anche se la pagina di destinazione di Contoso French Bakery ha un aspetto molto diverso dal modello Grid App, questa differenza dipende da poche modifiche apportate in HTML/CSS. In questo esempio presumiamo che gli elementi siano interattivi e che la selezione di un elemento visualizzi una pagina di dettagli gruppo con una scelta di tipi di di tipi di biscotti, dolci e così via. Per questa pagina di destinazione, è appropriato usare un controllo ListView con il layout a griglia.

Per convertire il modello Grid App nella pagina di destinazione di Contoso, dobbiamo modificare le dimensioni dei modelli di elementi, aumentare le dimensioni delle immagini e aggiungere le descrizioni degli elementi.

  1. In Visual Studio crea una nuova app che usa il modello Grid App.

  2. Aggiorna il l'oggetto itemtemplate HTML in groupedItems.html. La principale modifica rispetto al modello itemtemplate predefinito consiste nell'aggiunta di un terzo elemento di intestazione per visualizzare la descrizione di ogni 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. Ora aggiorniamo gli stili in groupedItems.css. La principale modifica apportata a groupedItems.css consiste nello spostare il testo div sotto l'immagine, anziché sovrapporlo, e nell'aggiungere un'altra riga alla griglia per i dettagli dell'elemento.

    .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. Rimuovi le intestazioni di gruppo da data.js. Il modo più semplice consiste nell'eliminare il titolo di ogni gruppo.

Con queste modifiche, l'app avrà ora questo aspetto:

App aggiornata

Aggiungi alcune immagini e cambia lo sfondo e il titolo e avrai creato la pagina di destinazione di Contoso French Bakery.

Esempio di Contoso Food Truck

Nell'esempio successivo creiamo la pagina di destinazione di Contoso Food Truck dal modello Grid App.

Esempio di Contoso Food Truck

La pagina di destinazione di Contoso Food Truck attira l'attenzione dell'utente con immagini accattivanti in un'ampia varietà di dimensioni.

A differenza dell'esempio precedente, questa pagina di destinazione richiede alcuni interventi in JavaScript sul modello, prevalentemente per aggiungere la logica e assegnare dimensioni diverse agli elementi di ListView. Anche in questo caso, presumiamo che gli elementi della pagina di destinazione siano interattivi e che la scelta di un elemento apra la relativa visualizzazione dettagli. Un controllo ListView con il layout a griglia rappresenta lo strumento appropriato per questo scopo. Ancora una volta usiamo il modello Grid App come punto di partenza.

Per usare elementi in più dimensioni, dobbiamo prima decidere un'unità di base minima. Useremo questa unità per creare tutti gli elementi della griglia, pertanto tutti gli elementi della griglia devono essere composti da multipli di queste dimensioni. La dimensione minore di uno degli elementi dell'immagine successiva corrisponde all'altezza degli elementi della sezione "Near Me", che è di circa 80 px. La dimensione orizzontale offre una maggiore flessibilità. Per semplicità, usiamo 80 px anche per la dimensione orizzontale.

Questa immagine mostra l'unità di base (il quadrato rosso) rispetto a diversi elementi.

Dimensioni dell'elemento di base

Per il calcolo delle dimensioni degli elementi, ogni dimensione deve essere un multiplo dell'unità di base più il riempimento tra unità. La formula è

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

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

dove m è un numero intero positivo e x e y indicano le dimensioni x e y dell'elemento e del relativo riempimento.

La scelta di dimensioni di base troppo piccole rispetto agli elementi avrà effetti negativi sulle prestazioni della nostra app. Come regola generale, le dimensioni di un elemento devono essere multipli di poche unità di base in entrambe le direzioni.

  1. In Visual Studio crea una nuova app che usa il modello Grid App.

  2. In groupedItems.html crea un nuovo modello di elemento denominato multisizebaseitemtemplate. Questo modello di elemento è più o meno uguale a quello predefinito, ma con l'aggiunta dell'intestazione "item-description" in modo che possiamo includere la descrizione dell'elemento oltre al titolo e al sottotitolo nella pagina di destinazione.

      <!-- 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. In groupedItems.js crea una funzione di modello denominata multisizeItemTemplateRenderer prima della definizione di PageControl (ui.Pages.define).

    Questa funzione viene usata per il rendering degli elementi di ListView. Si tratta della funzione che determina quali elementi usare in quale modello. In un passaggio successivo la assegneremo alla proprietà itemTemplate del controllo ListView.

     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. In groupedItems.js aggiungi la funzione groupInfo, sempre all'esterno della definizione di pagina. Questa funzione indica al controllo ListView di usare elementi di dimensioni diverse nella visualizzazione e specifica le dimensioni di base degli elementi. Le dimensioni di base corrispondono a quelle dell'elemento più piccolo nell'elenco. Gli altri elementi devono essere di dimensioni diverse affinché i layout funzionino correttamente.

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

  5. Ora dobbiamo associare queste nuove funzioni al controllo ListView.

    1. In groupedItems.js, modifica la funzione _initializeLayout in modo da mostrare un elenco semplice dei gruppi.

      // 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. Rimuovi la riga che assegna un modello di elemento al controllo ListView ed esegui le modifiche indicate dai commenti nel codice seguente.

      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. Ora dobbiamo aggiungere gli stili per gli elementi in groupedItems.css. Per applicare gli stili agli elementi, come mostrato nell'immagine precedente, ci servono quattro classi CSS per i quattro diversi modelli di elemento nella pagina di destinazione. Assegna alle quattro classi i nomi smallitemtemplate, mediumitemtemplate, mediumlargeitemtemplate e largeitemtemplate. Il codice CSS successivo posiziona prevalentemente la sovrapposizione e il testo rispetto alle immagini e imposta nel modo appropriato le dimensioni di ogni elemento. In alcuni casi, certi elementi sono compressi, perché non tutti i modelli usano tutti gli elementi del modello. Aggiungi questo codice CSS prima della prima riga CSS di @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. Nella regola @media screen and (-ms-view-state: fullscreen-landscape), screen and (-ms-view-state: fullscreen-portrait), screen and (-ms-view-state: filled) sostituisci il primo stile CSS con il seguente. Questo codice CSS rende opaca la sovrapposizione e rimuove la classe "item".

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

  8. Sostituisci il primo stile .groupeditemspage .groupeditemslist .win-horizontal.win-viewport .win-surface in groupedItems.css con questo.

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

    Questo codice CSS cambia le dimensioni dal margine alla parte inferiore in "50 px" per tenere conto di elementi leggermente più grandi.

Dopo aver apportato queste modifiche, avvia l'app. L'aspetto sarà il seguente:

App aggiornata

Aggiungi le immagini, cambia il colore dello sfondo, del testo e della sovrapposizione e otterrai la pagina di destinazione di Contoso Food Truck.

Dimensioni e modelli più creativi

Esistono altri modi per personalizzare i modelli di elementi oltre a quelli illustrati qui. Ad esempio, questa pagina di destinazione raggiunge un aspetto bilanciato con l'uso di due dimensioni di elementi e di tre modelli diversi.

Un'altra pagina di destinazione personalizzata

L'unità di base della pagina di destinazione corrisponde alle dimensioni dell'elemento più piccolo. Il primo elemento di ogni gruppo è pari a 2 x 3 unità di base e include un modello che inserisce il titolo e la descrizione sotto l'immagine. Gli elementi successivi sono pari a 1 x 1 unità e sovrappongono il titolo e la descrizione sull'immagine. Il terzo modello è destinato agli elementi senza immagini.

Aggiunta di animazioni agli elementi di ListView

Nella schermata Start i riquadri animati presentano all'utente immagini e testo aggiornati con informazioni immediatamente visibili. La pagina di destinazione di un'app può svolgere la stessa funzione, se appropriata, usando la Libreria animazioni WinJS.

Nell'esempio il primo elemento della pagina di destinazione viene aggiornato con una nuova immagine ogni quattro secondi, lo stesso intervallo di tempo usato nella schermata Start. Usiamo l'animazione con alternanza WinJS, che è la stessa usata per i riquadri della schermata Start.

  1. In Visual Studio crea una nuova app che usa il modello Grid App.

  2. In groupedItems.html modifica il modello di elemento per includere una seconda immagine, che verrà usata per l'animazione.

        <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. In groupedItems.css modifica lo stile CSS per posizionare la seconda immagine sotto quella iniziale. In questo modo possiamo applicare un'animazione alla nuova immagine sul posto, iniziando dalla parte inferiore dell'elemento. Dobbiamo fare in modo che entrambi gli elementi usino il posizionamento relativo, così che possiamo cambiarne la posizione quando disattiviamo l'animazione. Il primo e il terzo stile CSS esistono già in groupedItems.css e devono solo essere modificati. Il secondo stile CSS è invece nuovo.

            /* 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. In groupedItems.js aggiungi questo codice alla funzione ready per avviare una nuova animazione dell'elemento ogni quattro secondi.

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

  5. In groupedItems.js aggiungi questo codice all'esterno della definizione di pagina. Le prime definizioni di variabile puntano alle diverse immagini usate dal modello Grid App. Aggiungi la funzione peekTile per riprodurre l'animazione con alternanza della Libreria Windows per JavaScript. Aggiungi la funzione changeImage per aggiornare le immagini prima di riprodurre l'animazione. In questo esempio riproduciamo l'animazione solo per il primo elemento di 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);
    };

    Congratulazioni, hai aggiunto animazioni di elementi personalizzate al tuo controllo ListView.

Argomenti correlati

ListView

Guida introduttiva: Aggiunta di un controllo ListView

Applicazione di stili a un controllo ListView e ai relativi elementi