Search code examples
windows-10win-universal-appwinjs

Windows 10 Universal App - WinJS SplitViewCommand

I'm trying to use WinJS SplitView in my Windows Universal App. I created new project and added code from this example: http://try.buildwinjs.com/

So my HTML looks like that:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>App1</title>

    <!-- WinJS references -->
    <link href="WinJS/css/ui-dark.css" rel="stylesheet" />
    <script src="WinJS/js/base.js"></script>
    <script src="WinJS/js/ui.js"></script>

    <!-- App1 references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body class="win-type-body">
    <div id="app">
        <div class="splitView" data-win-control="WinJS.UI.SplitView">
            <!-- Pane area -->
            <div>
                <div class="header">
                    <button class="win-splitviewpanetoggle"
                            data-win-control="WinJS.UI.SplitViewPaneToggle"
                            data-win-options="{ splitView: select('.splitView') }"></button>
                    <div class="title"><h3 class="win-h3">SplitView Pane Area</h3></div>
                </div>

                <div class="nav-commands">
                    <div data-win-control="WinJS.UI.SplitViewCommand" data-win-options="{ label: 'Home', icon: 'home'}"></div>
                    <div data-win-control="WinJS.UI.SplitViewCommand" data-win-options="{ label: 'Favorite', icon: 'favorite'}"></div>
                    <div data-win-control="WinJS.UI.SplitViewCommand" data-win-options="{ label: 'Settings', icon: 'settings'}"></div>
                </div>
            </div>

            <!-- Content area -->
            <div class="contenttext"><h2 class="win-h2">SplitView Content Area</h2> </div>
        </div>
    </div>

</body>
</html>

When running the app almost everything works good. The only problem is with menu items (SplitViewCommand). They are not displayed.

When checking HTML WinJS.UI.SplitView and WinJS.UI.SplitViewPaneToggle is processed correctly but WinJS.UI.SplitViewCommand is not processed. It looks like app doesn't know what WinJS.UI.SplitViewCommand is.

Solution

  • Check your version of WinJS library in base.js file. WinJS.UI.SplitView is avaliable in WinJS 4.0 and above, but support for WinJS.UI.SplitViewCommand object starts from WinJS 4.2.