Modelo de lista de imagem e texto (caixa de entrada) (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 em uma caixa de entrada de email. Este modelo deve ser usado com um ListView que tenha layout de lista. 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="imageTextListInboxTemplate"
data-win-control="WinJS.Binding.Template">
<div class="imageTextListInbox">
<img class="imageTextListInboxImage"
data-win-bind="src: icon"/>
<div class="imageTextListInboxTextArea">
<h2 class="imageTextListInboxTextFrom"
data-win-bind="innerText: textFrom"></h2>
<h4 class="imageTextListInboxTextSubject"
data-win-bind="innerText: textSubject"></h4>
<div class="imageTextListInboxTextPreview"
data-win-bind="innerText: textPreview"></div>
</div>
<div class="imageTextListInboxTextDate"
data-win-bind="innerText: textDate"></div>
</div>
</div>
<!-- ListView -->
<div id="imageTextListInbox"
class="win-selectionstylefilled"
style="position: relative; left: -1px; top: 129px; border: none"
data-win-control="WinJS.UI.ListView"
data-win-options="{ itemDataSource: list.dataSource,
itemTemplate: select('#imageTextListInboxTemplate'),
layout: { type: WinJS.UI.ListLayout } }">
</div>
CSS
/* overall list dimensions */
#imageTextListInbox {
margin-left: 60px;
width: 501px; /* +31 px to account for margins applied by ListView */
height: 700px;
}
/*-------------------------------------------------------------------------------------------*/
/* imageTextList-inbox - used for Mail inbox 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 */
.imageTextListInbox {
display: -ms-grid;
height: 75px;
padding: 5px;
-ms-grid-columns: 50px 1fr auto;
}
/* user tile */
.imageTextListInbox img.imageTextListInboxImage {
-ms-grid-column: 1;
margin: 5px;
width: 40px;
height: 40px;
}
.imageTextListInbox .imageTextListInboxTextArea {
-ms-grid-column: 2;
margin-top: -2px;
padding-left: 5px;
}
/* Text lines: From, Subject and Message preview */
.imageTextListInbox .imageTextListInboxTextArea div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Text line 2 col 2: Date received */
.imageTextListInbox .imageTextListInboxTextDate {
-ms-grid-column: 3;
margin: 10px;
line-height: 60px;
}