Visualizzazione di elementi con altezza variabile in un ListLayout

Question

Possiedo un'app Metro WinJs contenente uno ListView con elementi di altezza variabile. Fondamentalmente è fatto allo stesso modo dello scenario 4 nel "HTML ListView item templates" sample. Una funzione groupInfo viene utilizzato per attivare Spaning cella del GridLayout associato alla ListView:

Ora, in vista scatto di mia domanda mi piacerebbe gli elementi per scorrere verticalmente, così ho cercato di sostituire il GridLayout con a ListLayout. Questo provoca lo scorrimento verticale, ma ora la Spaning cellulare è mancante e articoli sovrappongono:

ho usato la funzione groupInfo allo stesso modo con la GridLayout, ma sembra essere ignorato:

layout: { 
    groupInfo: groupInfo, 
    type: WinJS.UI.ListLayout 
} 

Esiste un modo per utilizzare elementi di dimensioni variabili in un ListLayout? Alcuni dei miei articoli hanno più contenuti di altri e mi piacerebbe davvero usare piastrelle di dimensioni diverse per mostrare tutto in modo ottimale.

Answer 1

vecchio post

Sì, è certamente possibile personalizzare tutto. Penso che il tuo problema di rendering provenga da ciò che potresti aver dimenticato, lo forceLayout.

ready: function (element, options) { 
      element.querySelector("#listView").winControl.forceLayout(); 
     } 

io non ho il mio Windows 8 nei pressi di me così se nessun altro risposta e il problema non è venuto dal forceLayout io aggiornare la risposta dal la notte.

Spero che questo aiuto.

Ok, quindi ho frainteso il problema in precedenza.

Ecco qualcosa che dovrebbe soddisfarti.

Il problema è che devi gestire il diverso stato di visualizzazione della tua applicazione in entrambi i file JavaScript e CSS.

Per quanto riguarda il codice JavaScript, ho utilizzato due funzioni che possono essere trovate nel modello di applicazione della griglia, ad esempio. Quindi ho modificato lo scenario4.js per ottenere questo codice.

function MyCellSpanningJSTemplate(itemPromise) { 
    return itemPromise.then(function (currentItem) { 
     var result = document.createElement("div"); 

     // Use source data to decide what size to make the 
     // ListView item 
     result.className = currentItem.data.type; 
     result.style.overflow = "hidden"; 

     // Display image 
     var image = document.createElement("img"); 
     image.className = "regularListIconTextItem-Image"; 
     image.src = currentItem.data.picture; 
     result.appendChild(image); 

     var body = document.createElement("div"); 
     body.className = "regularListIconTextItem-Detail"; 
     body.style.overflow = "hidden"; 
     result.appendChild(body); 

     // Display title 
     var title = document.createElement("h4"); 
     title.innerText = currentItem.data.title; 
     body.appendChild(title); 

     // Display text 
     var fulltext = document.createElement("h6"); 
     fulltext.innerText = currentItem.data.text; 
     body.appendChild(fulltext); 

     return result; 
    }); 
} 

var appViewState = Windows.UI.ViewManagement.ApplicationViewState; 
var appView = Windows.UI.ViewManagement.ApplicationView; 
var ui = WinJS.UI; 

(function() { 
    "use strict"; 
    var page = WinJS.UI.Pages.define("/html/scenario4.html", { 
     initializeLayout: function (listView, viewState) { 
      /// <param name="listView" value="WinJS.UI.ListView.prototype" /> 

      if (viewState === appViewState.snapped) { 
       listView.layout = new ui.ListLayout(); 
      } 
      else { 
       listView.layout = new ui.GridLayout({ groupInfo: groupInfo }); 
      } 
     }, 
     ready: function (element, options) { 
      var listView = element.querySelector("#listView").winControl; 
      this.initializeLayout(listView, appView.value); 
     }, 
     updateLayout: function (element, viewState, lastViewState) { 

      var listView = element.querySelector("#listView").winControl; 

      if (lastViewState !== viewState) { 
       if (lastViewState === appViewState.snapped || viewState === appViewState.snapped) {     
        this.initializeLayout(listView, viewState); 
       } 
       else { 
        listView.layout = new ui.GridLayout({ groupInfo: groupInfo }); 
       } 
      } 
     } 
    }); 
})(); 

Poi ho cancellato l'intero layout proprietà del listview nella scenario4.html da quando creo la disposizione di cui sopra nelle scenario4.js

Pertanto vostro ListView utilizza un layout diverso a seconda della visualizzazione stato ma avrai lo stesso risultato ottenuto prima (devi comunque cambiare lo scenario mentre sei in modalità snap per vedere il risultato).

Quindi non ci resta che aggiornare lo scenario4.css in base allo stato di visualizzazione e in CSS 3 abbiamo le query multimediali che ci consentono di farlo. Quindi a seconda dello stato della vista qui snapped sostituiremo le nostre proprietà. Devi solo aggiungere il codice qui sotto al tuo scenario4.css

@media screen and (-ms-view-state: snapped) { 
    #listView { 
     max-width: 260px; 
     height: 280px; 
     border: solid 2px rgba(0, 0, 0, 0.13); 
    } 

    .regularListIconTextItem { 
     max-width: 250px; 
     max-height: 70px; 
     padding: 5px; 
     overflow: hidden; 
     display: -ms-grid; 
    } 

    .smallListIconTextItem { 
     max-width: 250px; 
     max-height: 70px; 
     padding: 5px; 
     overflow: hidden; 
     background-color: Pink; 
     display: -ms-grid; 
    } 

    /* Medium size */ 
    .mediumListIconTextItem { 
     max-width: 250px; 
     max-height: 70px; 
     padding: 5px; 
     overflow: hidden; 
     background-color: LightGreen; 
     display: -ms-grid; 
    } 

    /* Large size */ 
    .largeListIconTextItem { 
     max-width: 250px; 
     max-height: 70px; 
     padding: 5px; 
     overflow: hidden; 
     background-color: LightBlue; 
     display: -ms-grid; 
    } 
} 

Spero che questo tempo aiuta;)

Answer 2

Il mio pensiero generale è quello di cambiare il modello nella vista scattò evitare di utilizzare il MyCellSpanningJSTemplate che fa il ridimensionamento modello di elemento. Puoi dare questo tentativo.

1) Creare un secondo modello di elemento:

<div id="listLayoutItemTemplate" data-win-control="WinJS.Binding.Template" style="display: none"> 
     <div class="regularListIconItem"> 
      <img src="#" class="regularListIconItem-Image" data-win-bind="src: picture" /> 
     </div> 
    </div> 

2) individuare per la vista scattata da ascoltando l'evento resize (vedi http://code.msdn.microsoft.com/windowsapps/Snap-Sample-2dc21ee3)

3) modificare a livello del modello per il modello in creato nel passaggio 1.

var listView = document.querySelector("#listView").winControl; 
listView.itemTemplate = listLayoutItemTemplate;