Text list (media queue) template (HTML)
[ This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation ]
Defines an item in a media queue. This template is for use with a ListView that has a list layout. For additional templates, see Item templates for grid layouts and Item templates for list layouts.
To use the template
To use the template, copy the HTML and the CSS styles into your project. The HTML includes a ListView that's designed to be used with the template. After you copy the HTML, set the ListView control's itemDataSource to your app's data source and update the template's data-win-bind attributes so they work with your data.
For the template to work properly, assign the win-selectionstylefilled class to your 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;
}