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

Plantilla de lista de texto (cola multimedia) (aplicaciones de la Tienda Windows con JavaScript y HTML)

Define un elemento en una cola multimedia. Esta plantilla se usa con una ListView que tenga un diseño de lista. Para plantillas adicionales, consulte el tema sobre plantillas de elementos para diseños de cuadrícula y plantillas de elementos para diseños de listas.

Para usar la plantilla

Para usar la plantilla, copia el HTML y los estilos CSS en el proyecto. El HTML incluye un ListView que está diseñado para usarse con la plantilla. Después de copiar el HTML, establece la propiedad itemDataSource del control ListView en el origen de datos de la aplicación y actualiza los atributos data-win-bind de la plantilla para que funcionen con los datos.

HTML


<!-- Item template -->
<div id="textListMediaQueueTemplate" 
     data-win-control="WinJS.Binding.Template">
  <div class="textListMediaQueue">
    <div class="textListMediaQueueDetail1">
      <h4 class="textListMediaQueueTextTrack" 
          data-win-bind="innerText: textTrack"></h4>
      <h6 class="textListMediaQueueTextArtist" 
          data-win-bind="innerText: textArtist"></h6>
    </div>
    <h6 class="textListMediaQueueTextAlbum" 
        data-win-bind="innerText: textAlbum"></h6>
    <h6 class="textListMediaQueueNumberLength" 
        data-win-bind="innerText: numberLength"></h6>
  </div>
</div>

<!-- ListView -->
<div id="textListMediaQueue" 
    style="position: relative; left: -1px; top: 139px; border: none"
    data-win-control="WinJS.UI.ListView"
    data-win-options="{ itemDataSource: list.dataSource, 
        itemTemplate: select('#textListMediaQueueTemplate'), 
        layout: { type: WinJS.UI.ListLayout } }">
</div>

CSS


/* overall list dimensions */
#textListMediaQueue
{
    margin-left: 110px;
    width: 618px; /*+18 px to account for scrollbar*/
    height: 632px;
}

/*-------------------------------------------------------------------------------------------*/
/* textList-mediaQueue - used for Media app queue item*/
/*-------------------------------------------------------------------------------------------*/
    /* individual item dimensions */
    .textListMediaQueue
    {
        display: -ms-flexbox;
        width: 100%;
        height: 40px;
        overflow: hidden;
        padding: 8px 5px;  
    }

        .textListMediaQueue .textListMediaQueueDetail1
        {
            -ms-flex: 1 auto;
        }

            /* Text line 1: Track */
            .textListMediaQueue .textListMediaQueueDetail1 .textListMediaQueueTextTrack
            {
                overflow: hidden;
            }

            /* Text line 2 col 1: Artist */
            .textListMediaQueue .textListMediaQueueDetail1 .textListMediaQueueTextArtist
            {
                width: 280px;
            }

        /* Text line 2 col 2: Album */
        .textListMediaQueue .textListMediaQueueTextAlbum
        {
            line-height: 60px;
            width: 180px;   
        }

        /* Text line 2 col 3: Length */
        .textListMediaQueue .textListMediaQueueNumberLength
        {
            line-height: 60px;
            margin: 0px 10px;
            width: 40px;   
        }

Temas relacionados

Plantillas de elemento para diseños de cuadrícula
Plantillas de elemento para diseños de lista

 

 

Mostrar:
© 2018 Microsoft