Question

我需要以编程方式向AppBarCommand添加AppBar。这曾经在Windows 8.1上运行，但它在Windows 10上不起作用。我没有收到任何错误，但是当我执行下面的代码时，我的应用程序栏是空的。有没有人知道是否可以从WinJS动态地向AppBarCommand添加AppBar？如果是这样，怎么办呢？感谢。

虽然我的问题是在更大的现有应用程序中发生的，但我从'＆＃34;空白＆＃34; WinJS模板。

default.js：

(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                var appBarDiv = document.createElement("div");
                document.body.appendChild(appBarDiv);
                var appBar = new WinJS.UI.AppBar(appBarDiv, {});
                var command = new WinJS.UI.AppBarCommand(null, { id: "commandID", type:"button", label: "Label", section: "secondary" });
                appBar.commands = [command];
            }
            args.setPromise(WinJS.UI.processAll());
        }
    };
    app.start();
})();

default.html中：

<!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">
    <p>Content goes here</p>
</body>
</html>

Answer 1

我意识到这一点，使用了data：

的WinJS.UI.AppBar属性

首先，您需要一个变量用于Binding列表：

var commandList;

创建AppBar：

 function createBar() {
    var appBarDiv = document.createElement("div");
    var appBar = new WinJS.UI.AppBar(appBarDiv, {});
    commandList = new WinJS.Binding.List([]);
    appBar.data = commandList;
    document.body.appendChild(appBarDiv);
}

创建命令的功能：

function createCommand(id, label, tooltip, icon, section) {       
    var btn = document.createElement("button");
    var command = new WinJS.UI.AppBarCommand(btn, {
        id: id,
        label: label,
        tooltip: tooltip,
        icon: icon,
        section: section,
        type: "button"
    });
    return command;
}

将命令添加到AppBar的功能：

function addCommand(id, label, tooltip, icon, section) {
    commandList.push(createCommand(id, label, tooltip, icon, section));
}

这对我有用。当然，您可以在creatBar()函数中添加命令。

修改
这是一个完整的示例，它创建10个命令并将它们添加到已经创建的AppBar中：

<强> HTML

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>TestApp</title> <link href="lib/winjs-4.0.1/css/ui-light.css" rel="stylesheet" /> <script src="lib/winjs-4.0.1/js/base.js"></script> <script src="lib/winjs-4.0.1/js/ui.js"></script> <link href="css/default.css" rel="stylesheet" /> <script src="js/main.js"></script> </head> <body class="win-type-body"> </body> </html>

<强> JS

// For an introduction to the Blank template, see the following documentation: // http://go.microsoft.com/fwlink/?LinkId=232509 (function () { "use strict"; var app = WinJS.Application; var activation = Windows.ApplicationModel.Activation; var isFirstActivation = true; var commandList; app.onactivated = function (args) { if (isFirstActivation) { args.setPromise(WinJS.UI.processAll()); } isFirstActivation = false; }; WinJS.UI.processAll().then(function () { createBar(); for (var i = 0; i < 10; i++) { addCommand("test" + i, "test" + i, "test" + i, "street", "primary"); } }); function createBar() { var appBarDiv = document.createElement("div"); var appBar = new WinJS.UI.AppBar(appBarDiv, {}); commandList = new WinJS.Binding.List([]); appBar.data = commandList; document.body.appendChild(appBarDiv); } function createCommand(id, label, tooltip, icon, section) { var btn = document.createElement("button"); var command = new WinJS.UI.AppBarCommand(btn, { id: id, label: label, tooltip: tooltip, icon: icon, section: section, type: "button" }); return command; } function addCommand(id, label, tooltip, icon, section) { commandList.push(createCommand(id, label, tooltip, icon, section)); } app.start(); })();

在WinJS中将AppBarCommand添加到AppBar

1 个答案: