Mostrando artículos con altura variable en un ListLayout

Question

Tengo una aplicación de metro WinJs que contiene un ListView con elementos de altura variable. Básicamente se hace de la misma manera que en el Escenario 4 en el "HTML ListView item templates" sample. Una función groupInfo se utiliza para habilitar Spaning célula del GridLayout asociado con el ListView:

Ahora bien, en vista de complemento de mi solicitud me gustaría los artículos para desplazarse verticalmente, por lo que trató de sustituir el GridLayout con a ListLayout. Esto provoca el desplazamiento vertical, pero ahora el Spaning celular no está y los elementos se solapan:

que utiliza la función groupInfo la misma forma que con el GridLayout, pero parece ser ignorado:

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

¿Hay alguna manera de usar elementos de tamaño variable en un ListLayout? Algunos de mis artículos tienen más contenido que otros y realmente me gustaría utilizar mosaicos de diferentes tamaños para mostrar todo de manera óptima.

Answer 1

antiguo puesto

Sí que sin duda puede personalizar todo. Creo que su problema render proviene de esto, puede haber olvidado, el forceLayout.

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

no tengo mi Windows 8 cerca de mí por lo que si nadie contesta y el problema no vino de la forceLayout Voy a actualizar la respuesta de la noche.

Espero que esta ayuda.

Ok, he entendido mal su problema antes.

Aquí hay algo que debería satisfacerte.

Lo que pasa es que tiene que administrar el estado de vista diferente de su aplicación en ambos archivos JavaScript y CSS.

Por lo tanto, con respecto al JavaScript he utilizado dos funciones que se pueden encontrar en la plantilla de la aplicación Grid, por ejemplo. Así que modifiqué el escenario4.js para obtener este código.

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

Luego he borrado todo el layout propiedad de la vista de lista en el scenario4.html desde que crear el diseño más arriba en los scenario4.js

lo tanto, su vista de lista utiliza un diseño diferente dependiendo de la vista estado, pero tendrá el mismo resultado que obtiene antes (Por cierto, tiene que cambiar el escenario mientras está en modo de ajuste para ver el resultado).

Así que solo tenemos que actualizar el scenario4.css dependiendo del estado de la vista y en CSS 3 tenemos consultas de medios que nos permiten hacer eso. Luego, dependiendo del estado de la vista aquí snapped anularemos nuestras propiedades. Solo tiene que agregar el código a continuación a su escenario4.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; 
    } 
} 

esperanza esta vez ayuda;)

Answer 2

Mi idea general es la de cambiar la plantilla a la vista, pero ajustados a evitar el uso de la MyCellSpanningJSTemplate la que hace el cambio de tamaño de plantilla de elementos. Puedes dar esta oportunidad.

1) Crear una segunda plantilla de elementos:

<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) detectar de vista snapped al escuchar el caso de cambio de tamaño (ver http://code.msdn.microsoft.com/windowsapps/Snap-Sample-2dc21ee3)

3) mediante programación cambiar la plantilla a la plantilla en creado en el paso 1.

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