Modelo de texto (faixa de álbum) (HTML)
[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente ]
Define um item que contém o número e o título de uma faixa de álbum. Este modelo deve ser usado com um ListView que tenha layout de grade. Para obter mais modelos, veja Modelos de item para layouts de grade e Modelos de item para layouts de lista.
Usar o modelo
Para usar o modelo, copie o código HTML e os estilos CSS em seu projeto. O HTML inclui um ListView que foi criado para ser usado com o modelo. Depois de copiar o HTML, defina os itemDataSource do controle ListView em suas fontes de dados de aplicativo e atualize os atributos data-win-bind do modelo para que eles funcionem com seus dados.
Para que o modelo funcione corretamente, atribua a classe win-selectionstylefilled ao seu ListView.
HTML
<!-- Item template -->
<div id="textAlbumTrackTemplate"
data-win-control="WinJS.Binding.Template">
<div class="textAlbumTrack">
<h2 class="textAlbumTrackNumber"
data-win-bind="innerText: index">
</h2>
<h2 class="textAlbumTrackTitle"
data-win-bind="innerText: text">
</h2>
</div>
</div>
<!-- ListView -->
<div id="textAlbumTrack"
class="win-selectionstylefilled"
style="position: relative; left: -1px; top: 131px; border: none"
data-win-control="WinJS.UI.ListView"
data-win-options="{ itemDataSource: list.dataSource,
itemTemplate: select('#textAlbumTrackTemplate'),
layout: { type: WinJS.UI.GridLayout } }">
</div>
CSS
/* overall list dimensions */
#textAlbumTrack {
width: 1366px;
height: 538px;
}
/*-------------------------------------------------------------------------------------------*/
/* text-track - used for Media player album tracks */
/*-------------------------------------------------------------------------------------------*/
/* 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;
}
/* style the focus visual for edge-to-edge items */
#textAlbumTrack .win-focusedoutline {
width: calc(100% - 4px);
height: calc(100% - 4px);
left: 2px;
top: 2px;
z-index: 5;
}
/* starting margin */
#textAlbumTrack .win-horizontal.win-viewport .win-surface {
margin: 0px 100px;
}
#textAlbumTrack .win-horizontal.win-viewport .win-container {
margin: 0px 10px;
}
/* hide the hover outline for edge-to-edge items */
#textAlbumTrack .win-container:hover {
outline: none;
}
/* individual item dimensions */
.textAlbumTrack {
display: -ms-flexbox;
width: 280px;
height: 36px;
padding: 2px 10px;
overflow: hidden;
}
/* text line 1 col 1*/
.textAlbumTrack .textAlbumTrackNumber {
width: 42px;
white-space: nowrap;
}
/* text line 1 col 2*/
.textAlbumTrack .textAlbumTrackTitle {
-ms-flex: 1;
white-space: nowrap;
}