Modello con immagini e testo (elenco file) (HTML)
[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]
Definisce un elemento che rappresenta un file: un'icona, il nome, una data e le dimensioni. Questo modello è destinato a essere usato con un ListView con un layout griglia. Per ulteriori modelli, vedi Modelli di elementi per layout griglia e Modelli di elementi per layout elenco.
Per usare il modello
Per usare il modello, copia il codice HTML e gli stili CSS nel tuo progetto. Il codice HTML include un elemento ListView progettato per l'uso con questo modello. Dopo aver copiato il codice HTML, imposta la proprietà itemDataSource del controllo ListView sull'origine dati dell'app e aggiorna gli attributi data-win-bind del modello in modo che funzionino con i dati.
Perché il modello funzioni correttamente, assegna la classe win-selectionstylefilled al controllo ListView.
HTML
<!-- Item template -->
<div id="imageTextListFileTemplate"
data-win-control="WinJS.Binding.Template">
<div class="imageTextListFile">
<img class="imageTextListFileImage" data-win-bind="src: icon"/>
<div class="imageTextListFileTextArea">
<h3 class="imageTextListFileTextName"
data-win-bind="innerText: textName">
</h3>
<h6 class="imageTextListFileTextDate"
data-win-bind="innerText: textDate">
</h6>
<h6 class="imageTextListFileTextSize"
data-win-bind="innerText: textSize">
</h6>
</div>
</div>
</div>
<!-- ListView -->
<div id="imageTextListFile"
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('#imageTextListFileTemplate'),
layout: { type: WinJS.UI.GridLayout } }">
</div>
CSS
/* overall list dimensions */
#imageTextListFile {
width: 1366px;
height: 578px;
}
/*-------------------------------------------------------------------------------------------*/
/* imageText-listFile - used in Picker list */
/*-------------------------------------------------------------------------------------------*/
/* 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;
}
/*starting margin */
#imageTextListFile .win-horizontal.win-viewport .win-surface {
margin: 0px 100px;
}
#imageTextListFile .win-horizontal.win-viewport .win-container {
margin: 5px 10px;
}
/*individual item dimensions */
.imageTextListFile {
display: -ms-grid;
width: 290px;
height: 60px;
overflow: hidden;
padding: 5px;
}
/* image */
.imageTextListFile img.imageTextListFileImage {
-ms-grid-column: 1;
margin: 5px;
width: 40px;
height: 40px;
}
.imageTextListFile .imageTextListFileTextArea {
-ms-grid-column: 2;
margin: 0px 5px 0px 5px;
}
/* text line 1 */
.imageTextListFile .imageTextListFileTextArea .imageTextListFileTextName {
width: 230px;
white-space: nowrap;
}
/* text line 2 */
.imageTextListFile .imageTextListFileTextArea .imageTextListFileTextDate {
width: 230px;
overflow: hidden;
}
/* text line 3 */
.imageTextListFile .imageTextListFileTextArea .imageTextListFileTextSize {
width: 230px;
overflow: hidden;
}