locked
How to get the MSN's grouped listview style

    Question

  • 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"
        data-win-options="{
            itemDataSource:ListViewDemos.products.dataSource,
            itemTemplate:select('#productTemplate'),
            groupDataSource:ListViewDemos.products.groups.dataSource,
            groupHeaderTemplate:select('#productGroupHeaderTemplate'),
            layout: {type: WinJS.UI.GridLayout}
        }">
    </div>

    Tuesday, June 05, 2012 8:34 AM

Answers

  • 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


    Jeff Sanders (MSFT)

    Wednesday, June 06, 2012 11:50 AM
    Moderator

All replies