Watch BUILD 3-108 and read my notes if you are styling the WinJS Listview

The ListView is an integral control for developing Win 8 apps with WinJS. If you are a UI developer like myself, you will be spending a lot of time building and styling ListViews. In the Deep dive on WinJS ListView talk, Mike Mastrangelo takes us on a nice tour of the ListView control and how to bend it to your will properly.

If you don’t have 45 minutes, check out the cliff notes version read below.

– There has been a considerable amount of work written in to the control to handle touch input, virtualizing items, animation, binding, grouping, layout, etc.  Its not just drawing a bunch of flowing divs.

– Once bound, items are drawn using either Binding.Template (normally, declared in HTML) or for more complex or multiple templates based on datatype a function can be used. Check out the itemTemplate page for examples.

– Item size is determined by measuring the first item in the list and then applying that size to every other item.  If you want to override the measuring, set the custom groupInfo function for the set Layout.

– To override the default appearance in CSS, for items start with .win-item and for the ListView as a whole use .win-surface. Be sure to precede those overrides with a list or page identifier so you don’t overwrite all ListViews in your app.  For more pertinent CSS classes check out the recommended class list on MSDN.

– In order to have a ListView scrollable anywhere on the page, set the ListView and parent elements to a height and width of 100%.  Set the page header to “position:fixed” so it does not affect the ListView. And set the .win-surface margin to “200px 120px 100px 120px” to maintain proper page margins.

– If you move to a grouped ListView, be sure to adjust your left margin for .win-surface or .win-item.  The grouped CSS classes add 70px to the left by default.

– Semantic Zoom control alternates between two ListViews. The first child is the zoomed in view and the second is the zoomed out view. For easy baking, setup each ListView individually first to make sure they are working and styled properly, then wrap them in a Semantic Zoom control.

Once you get through the basics of laying out and binding the ListView, checkout the following samples for more advanced topics:

Overall the control is awesome and once you get it under control, it becomes indispensable.

This entry was posted in Client Technologies, Win8Dev and tagged , , , . Bookmark the permalink.

One Response to Watch BUILD 3-108 and read my notes if you are styling the WinJS Listview

  1. Vaibhav says:

    Hey Adam, I created a simple ListView with grid layout that has static data using WinJS binding. By static I mean the json is in the script itself and not coming from a server. The json has only 6 objects each with only 3 properties. I have noticed a slight pause before the ListView animates in. It works fine on desktops but I have noticed a one or two second pause on Surface. Just wanted to find out if you have had any experience with that.

    Thanks,
    Vaibhav

Leave a Reply