Modèle de liste de texte (file d’attente d’éléments multimédias) (HTML)
[ Cet article est destiné aux développeurs Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]
Définit un élément dans une file d’attente d’éléments multimédias. Ce modèle est destiné à être utilisé avec un objet ListView disposé en liste. Pour obtenir des modèles supplémentaires, voir Modèles d’éléments pour les dispositions en grille et Modèles d’éléments pour les dispositions en liste.
Pour utiliser le modèle
Pour utiliser le modèle, copiez le code HTML et les styles CSS dans votre projet. Le code HTML inclut un élément ListView conçu pour être utilisé avec le modèle. Après avoir copié le code HTML, définissez le paramètre itemDataSource du contrôle ListView sur la source de données de votre application et mettez à jour les attributs data-win-bind du modèle pour qu’ils fonctionnent avec vos données.
Pour que le modèle fonctionne correctement, affectez la classe win-selectionstylefilled à votre objet ListView.
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"
class="win-selectionstylefilled"
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*/
/*-------------------------------------------------------------------------------------------*/
/* 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 */
.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;
}