Search code examples
javascripthtmlwinjs

How to show labels on my WinJS toolbar?

I have created a toolbar and appended buttons to this imperatively (via JavaScript).

The buttons show fine, but the labels don't show. I must be missing something really simple, how do I get them to show up permanently ?

HTML:

<div id="toolbarContainer1" style="direction: rtl"></div>

JavaScript:

var dataArray = [
    new WinJS.UI.Command(null, { id: 'cmdPin', label: 'pin', section: 'primary', type: 'button', icon: 'pin', onclick: clickbuttonprintout() }),
    new WinJS.UI.Command(null, { id: 'cmdFullscreen', label: 'full screen', section: 'primary', type: 'button', icon: 'fullscreen', onclick: clickbuttonprintout() })
];

window.createImperativeToolBar = function () {
    var tb = new WinJS.UI.ToolBar(document.querySelector("#toolbarContainer1"), {
        data: new WinJS.Binding.List(dataArray)
    });
}

createImperativeToolBar ();
Solution

  • Managed to solve this myself.

    To show all labels on a certain toolbar, select the toolbar and set closedDisplayMode to full.

    var toolbar1 = document.querySelector('#toolbar1');
                toolbar1.winControl.closedDisplayMode = 'full';

    Docs : https://msdn.microsoft.com/en-us/library/windows/apps/dn996562.aspx