Plantilla de imagen y lista de texto (acoplamiento de colección) (HTML)
[ 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 ]
Define un elemento para una vista acoplada que contiene un icono, un encabezado en negrita más grande, un subencabezado más pequeño y texto descriptivo. 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.
Para que la plantilla funcione correctamente, asigna la clase win-selectionstylefilled a tu ListView.
HTML
<!-- Item template -->
<div id="imageTextListCollectionSnapTemplate"
data-win-control="WinJS.Binding.Template">
<div class="imageTextListCollectionSnap">
<img class="imageTextListCollectionSnapImage"
data-win-bind="src: icon"/>
<div class="imageTextListCollectionSnapText">
<div class="imageTextListCollectionSnapTextTitle"
data-win-bind="innerText: largeText"></div>
<h6 class="imageTextListCollectionSnapTextDescription"
data-win-bind="innerText: smallText"></h6>
</div>
</div>
</div>
<!-- ListView -->
<div id="imageTextListCollectionSnap"
class="win-selectionstylefilled"
data-win-control="WinJS.UI.ListView"
data-win-options="{ itemDataSource: list.dataSource,
itemTemplate: select('#imageTextListCollectionSnapTemplate'),
layout: { type: WinJS.UI.ListLayout } }">
</div>
CSS
/* overall list dimensions */
#imageTextListCollectionSnap {
margin-left: 110px;
width: 323px; /* +31 px to account for margins applied by ListView */
height: 640px;
}
/*-------------------------------------------------------------------------------------------*/
/* imageTextList-collectionSnap - used in app template collection page snap view*/
/*-------------------------------------------------------------------------------------------*/
/* style the background color of the filled-selection style items */
.win-selectionstylefilled :not(.win-footprint).win-container {
background-color: transparent;
}
.win-selectionstylefilled .win-container.win-swipe:hover {
background-color: transparent;
}
/* margins between items */
#imageTextListCollectionSnap .win-container {
margin-top: 0px;
margin-bottom: 0px;
}
/* hide the hover outline for edge-to-edge items */
#imageTextListCollectionSnap .win-container:hover {
outline: none;
}
/* individual item dimensions */
.imageTextListCollectionSnap {
display: -ms-grid;
width: 282px;
height: 70px;
padding: 5px;
overflow: hidden;
}
/* image */
.imageTextListCollectionSnap img.imageTextListCollectionSnapImage {
-ms-grid-column: 1;
margin: 5px;
width: 60px;
height: 60px;
}
.imageTextListCollectionSnap .imageTextListCollectionSnapText {
margin: 5px;
-ms-grid-column: 2;
}
/* Text line 1 */
.imageTextListCollectionSnap .imageTextListCollectionSnapText .imageTextListCollectionSnapTextTitle {
width: 190px;
height: 40px;
overflow: hidden;
}
/* Text line 2 */
.imageTextListCollectionSnap .imageTextListCollectionSnapText .imageTextListCollectionSnapTextDescription {
overflow: hidden;
}
/* style the focus visual for edge-to-edge items */
#imageTextListCollectionSnap .win-focusedoutline {
width: calc(100% - 4px);
height: calc(100% - 4px);
left: 2px;
top: 2px;
z-index: 5;
}