A. HTML CSS JavaScript !!1
var listView = element.querySelector('.listView').winControl;
WinJS.UI.setOptions(listView, {
itemTemplate: element.querySelector('.listViewItemTemplate'),
itemDataSource: items.dataSource,
layout: new WinJS.UI.GridLayout({
groupInfo: {
multiSize: true,
slotWidth: 0,
slotHeight: 0,
}
}),
});
.pagecontrol2 .win-listview .win-container .win-item .item-content {
width: 150px;
height: 150px;
background-size: 150px 150px;
}
.pagecontrol2 .win-listview .win-container:nth-of-type(2) .win-item .item-content {
width: 310px;
height: 310px;
background-size: 310px 310px;
}
.pagecontrol2 .win-listview .win-container .win-item .item-content .item-label {
display: none;
}
.pagecontrol2 .win-listview .win-container:nth-of-type(2) .win-item .item-content .item-label {
display: block;
background-color: rgba(0, 0, 0, 0.5);
padding: 5px;
}
HTML ListView item templating sample