Can i style individual items in a listview grid?

Question

I see the use case of Contoso Food trucks and the hub page haves the layout diferent from the templates.

One of the 'Near Me' items is big and the rest of the three or four elements have other sizes..

How can i change the size of a specific item(win-item) without affecting the others ? Can i do it in CSS or i have to dig in the javascript properties?

Thank u

Answer 1

You can use the template's data-win-bind to give each item a different style based on the data in the list.  For example you can change the background color of individual items.  

var data = [{color:"red"}, {color:"green"}, {color:"blue"}];
var dataList = new WinJS.Binding.List(data);
var listView = document.querySelector("#listView");

WinJS.UI.setOptions(listView, {
	itemDataSource: dataList.dataSource,
	itemTemplate: document.querySelector(".itemTemplate"),
	layout: new WinJS.UI.GridLayout()
});

<div class="itemTemplate" data-win-control="WinJS.Binding.Template">
	<div class="item" data-win-bind="style.backgroundColor : color">
		<!-- rest of the template -->
	</div>
</div>
<div id="listView" data-win-control="WinJS.UI.ListView"></div>  

I believe this can be extended to control just about anything you can do with css for individual items.

---

-Jeff

Answer 2

You could get even finer control with a custom render function:

http://msdn.microsoft.com/en-us/library/windows/apps/Hh781224.aspx

-Jeff

---

Jeff Sanders (MSFT)