WinJSContrib.ListViewLayout (NuGet package)

This control is for managing the layout of WinJS.UI.ListView in a declarative way.

First, you need to add a reference to the control in your page or in default.html :
<script src="/scripts/winjscontrib/mcnext.ui.smartlistlayout.js"></script>

Then declare the control :

<div id="listlayout" data-win-control="MCNEXT.UI.SmartListLayout" data-win-options="{
    listView: select('#mylistview'),
    layouts: {
        default : { layout : WinJS.UI.GridLayout, query: '(orientation: landscape)'},
        vert : { 
            layout : WinJS.UI.GridLayout, query: '(orientation: portrait) and (min-width: 350px)', 
            options: { orientation : 'vertical' }
        snap : { layout : WinJS.UI.ListLayout, query: '(orientation: portrait) and (max-width: 350px)'},

As you probably noticed, this control has a "listView" property where you plug it on the ListView. You could then declare the different layouts you want to use, and the corresponding media queries.

This control really on window.matchMedia API, please not that you will not have the additivity you get with CSS media-queries, so you have to be a little bit more precise with your queries

Last edited Mar 17, 2014 at 5:48 PM by gleborgne, version 4