How to get the MSN's grouped listview style


  • Hi all,

    I found that the MSN in windows 8 grouped the contacts list and show different group in a whole view.   I did not found the same style in the listview related samples.

    So I want to how to set this style.

    I use javascript and the following control.  thank you!

    <div data-win-control="WinJS.UI.ListView"
            layout: {type: WinJS.UI.GridLayout}

    Tuesday, June 05, 2012 8:34 AM


  • First you would need to include the headers in your datasource.  Then you could use a list view with your own render function and render this, or you could us a CSS style selector based on some attribute in the data and render the header.

    For the Listview render function,   See  this documentation:  http://msdn.microsoft.com/en-us/library/windows/apps/Hh781224.aspx

    Scenario 4 of this sample uses this technique: HTML ListView item templates sample.


    Jeff Sanders (MSFT)

    Wednesday, June 06, 2012 11:50 AM

All replies