locked
Switch ListView Layout

    Question

  • Hello

    I want to switch the listview layout from GridLayout to ListLayout when my application viewState is snapped.

    I can detect when this happens but i can't find how i can switch the layout from my ListView. I use the code below witch doesn't work.

     

            appView.getForCurrentView().addEventListener('viewstatechanged', function (eventArgs) {
                var viewStates = Windows.UI.ViewManagement.ApplicationViewState;


                if (eventArgs.viewState == viewStates.snapped) {
                    var list = new WinJS.UI.ListLayout();
                    var lv = new WinJS.UI.ListView(document.getElementById('productFamily'));
                    lv.layout.type = list;


                }
                else if (eventArgs.viewState == viewStates.fullScreenLandscape) {
                    var list = new WinJS.UI.GridLayout();
                    var lv = new WinJS.UI.ListView(document.getElementById('productFamily'));
                    lv.layout.type = list;
                }
            });

    regards

    Dieter

    Wednesday, March 28, 2012 6:46 AM

Answers

  • Is "productFamily" a DIV?

    If you have specified this 'productFamily' data-win-control to WinJS.UIListView. You could get the control by its winControl property:

    var lv = document.getElementById('productFamily').winControl;

    then set the lv.layout property:

    lv.layout = list; // not the type.
    

    Sincerely,

    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us

    Wednesday, March 28, 2012 8:25 AM
  • You don't set lv.layout.type. Just set lv.layout:

    So I made a couple of improvements  to your code. First, I suspect that you already had "productFamily" as a ListView control, and I see no reason to create it anew just because of a viewstatechange. It's perfectly acceptable to change the layout of a ListView without having to completely recreate it. So instead of "newing" up a ListView, I'm getting the existing ListView (line 2).

    The other thing I changed was I used the ternary operator to set the lv.layout (on line 4); ternary operators are great for simple boolean conditions.

    Anyway, here it is:

    appView.getForCurrentView().addEventListener('viewstatechanged', function (eventArgs) {
        var lv = document.getElementById('productFamily').winControl;
        var viewStates = Windows.UI.ViewManagement.ApplicationViewState;
        lv.layout = (eventArgs.viewState == viewStates.snapped) ?
            new WinJS.UI.ListLayout() :
            new WinJS.UI.GridLayout();
    });


    Wednesday, March 28, 2012 5:13 PM

All replies

  • Is "productFamily" a DIV?

    If you have specified this 'productFamily' data-win-control to WinJS.UIListView. You could get the control by its winControl property:

    var lv = document.getElementById('productFamily').winControl;

    then set the lv.layout property:

    lv.layout = list; // not the type.
    

    Sincerely,

    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us

    Wednesday, March 28, 2012 8:25 AM
  • You don't set lv.layout.type. Just set lv.layout:

    So I made a couple of improvements  to your code. First, I suspect that you already had "productFamily" as a ListView control, and I see no reason to create it anew just because of a viewstatechange. It's perfectly acceptable to change the layout of a ListView without having to completely recreate it. So instead of "newing" up a ListView, I'm getting the existing ListView (line 2).

    The other thing I changed was I used the ternary operator to set the lv.layout (on line 4); ternary operators are great for simple boolean conditions.

    Anyway, here it is:

    appView.getForCurrentView().addEventListener('viewstatechanged', function (eventArgs) {
        var lv = document.getElementById('productFamily').winControl;
        var viewStates = Windows.UI.ViewManagement.ApplicationViewState;
        lv.layout = (eventArgs.viewState == viewStates.snapped) ?
            new WinJS.UI.ListLayout() :
            new WinJS.UI.GridLayout();
    });


    Wednesday, March 28, 2012 5:13 PM
  • thx , this works fine

    regards

    Dieter

    Wednesday, March 28, 2012 5:44 PM