Bild- und Textlistenvorlage (Sammlung) (HTML)
[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation ]
Definiert ein Element, das ein Symbol, eine größere, fett formatierte Überschrift, eine kleinere Unterüberschrift und beschreibenden Text enthält. Diese Vorlage dient zur Verwendung mit einer ListView mit einem Listenlayout. Weitere Vorlagen finden Sie unter Elementvorlagen für Rasterlayouts und Elementvorlagen für Listenlayouts.
So verwenden Sie die Vorlage
Um die Vorlage zu verwenden, kopieren Sie den HTML-Code und die CSS-Formatvorlage in Ihr Projekt. Der HTML-Code enthält ein ListView-Steuerelement, das zusammen mit der Vorlage verwendet werden kann. Nachdem Sie den HTML-Code kopiert haben, legen Sie die itemDataSource-Eigenschaft des ListView-Steuerelements auf die Datenquelle Ihrer App fest, und aktualisieren Sie die data-win-bind-Attribute der Vorlage entsprechend Ihren Daten.
Damit die Vorlage richtig funktioniert, weisen Sie Ihrer ListView die win-selectionstylefilled-Klasse zu.
HTML
<!-- Item template -->
<div id="imageTextListCollectionTemplate"
data-win-control="WinJS.Binding.Template">
<div class="imageTextListCollection">
<img class="imageTextListCollectionImage"
data-win-bind="src: icon"/>
<div class="imageTextListCollectionTextArea">
<h4 class="imageTextListCollectionTextStrong"
data-win-bind="innerText: largeText"></h4>
<h6 class="imageTextListCollectionTextLight"
data-win-bind="innerText: smallText"></h6>
<div class="imageTextListCollectionText"
data-win-bind="innerText: mediumText"></div>
</div>
</div>
</div>
<!-- ListView -->
<div id="imageTextListCollection"
class="win-selectionstylefilled"
data-win-control="WinJS.UI.ListView"
data-win-options="{ itemDataSource: list.dataSource,
itemTemplate: select('#imageTextListCollectionTemplate'),
layout: { type: WinJS.UI.ListLayout } }">
</div>
CSS
/* overall list dimensions */
#imageTextListCollection {
margin: 0px 110px;
width: 531px; /* +31 px to account for margins applied by ListView */
height: 637px;
}
/*-------------------------------------------------------------------------------------------*/
/* imageTestList-collection - used in app template collection page in portrait*/
/*-------------------------------------------------------------------------------------------*/
/* 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;
}
/* individual item dimensions */
#imageTextListCollection .imageTextListCollection {
display: -ms-grid;
width: 100%;
height: 120px;
padding: 5px;
overflow: hidden;
}
/* image */
.imageTextListCollection img.imageTextListCollectionImage {
-ms-grid-column: 1;
width: 110px;
height: 110px;
margin: 5px;
}
.imageTextListCollection .imageTextListCollectionTextArea {
-ms-grid-column: 2;
margin: 9px 5px 5px 5px;
line-height: 20px;
}
/* text line 1 */
.imageTextListCollection .imageTextListCollectionTextStrong {
width: 360px;
height: 20px;
overflow: hidden;
}
/* text line 2 */
.imageTextListCollection .imageTextListCollectionTextLight {
width: 360px;
height: 20px;
overflow: hidden;
}
/* text line 3 */
.imageTextListCollection .imageTextListCollectionText {
width: 360px;
height: 60px;
overflow: hidden;
}