WinJS AppBar 按钮在隐藏时闪烁答案

【问题标题】：WinJS AppBar button flash on HideWinJS AppBar 按钮在隐藏时闪烁
【发布时间】：2012-10-24 14:36:57
【问题描述】：

我的应用程序在屏幕底部有一个 WinJS AppBar 控件。我使用.showOnlyCommands(buttonsToShowArray) 在ListView itemSelectionChanged 事件上显示和隐藏按钮。

我现在遇到的问题是，当我每次拨打.showOnlyCommands 时，要隐藏（或者您可能会说“替换”）的按钮都会在屏幕顶部闪烁。

我尝试使用 Microsoft 示例应用，但没有发生这种情况。我尝试使用.showCommands + .hideCommands 方法，这是相同的行为。请注意，这在 Win8 的 Release Preview 版本之前并未发生。

我不知道发生了什么。有什么想法吗？

编辑：我做了进一步调查，问题发生在hideCommands。假设我在应用栏上显示了 3 个按钮。我打电话给hideCommands 隐藏所有 3 个按钮。 3个按钮的图标会在appbar上消失，然后堆积在屏幕的左上角，然后消失。（即屏幕一角会闪烁 3 个堆叠的按钮）。

【问题讨论】：

标签： windows-8 winjs appbar

【解决方案1】：

当 AppBar 处于“显示”过程中时，您可能会调用 showOnlyCommands。我发现在 beforeshow 或 aftershow 处理程序中调用这些方法时会发生这种情况。来自Animating your UI 的这句话阐明了原因：

使用淡入和淡出动画来显示或隐藏瞬态 UI 或控件。一个示例是在应用栏中，由于用户交互，新控件可能会出现在其中。

示例应用在显示应用栏之前显示/隐藏按钮。在调用 showOnlyCommands 之前，您可能会在应用栏上调用 show。

【讨论】：

非常感谢！我认为这正是我的情况。我现在正在度假，所以我无法自己测试它。但是，一旦我有机会实施它（在 2 周内），我会将其标记为正确答案！非常感谢！
嘿@ChrisHerring，我正在尝试您的建议。如果我们没有在beforeShow 上调用showOnlyCommand，您如何设置右键单击时显示哪些按钮？
您的回答确实帮助我进行了调查，但仍然没有解决我的问题。当我在 appbar 启动时调用 showOnlyCommands 时，问题仍然存在。当 appbar 上的按钮需要更改时，我调用 showOnlyCommands 而不是隐藏和显示 appbar，但仍然会出现 flash
如果您在 AppBar 启动时调用 showOnlyCommands，那么您将看到 flash，这是我提供的 doco 链接中提到的预期行为。您希望在 AppBar 隐藏时进行更改以避免闪烁。尽量不要使用 beforeshow 事件，当您的应用程序发生某些事情时更改按钮，例如首次加载页面时。然后，当调用 AppBar 时，按钮已经正确设置。
所以在开始菜单上，更新按钮不会导致闪烁。我知道 Windows 在“开始”菜单上做了很多应用程序不支持的事情，这是其中之一吗？

【解决方案2】：

解决这个问题的临时方法是：

在调用showOnlyCommands 或HideCommands 之前将按钮设置为不可见。

这是我现在使用的代码：

/* 
 * @param {WinJS.UI.AppBar} appbar winControl
 * @param {Array} array of appbar buttons to be shown
 */
function showOnlyCommands(appbarControl, buttonsToShow) {
    var toShow = {};
    for (var i = 0; i < buttonsToShow.length; i++) {
        toShow[buttonsToShow[i].id] = true;
    }
    for (var i = 0; i < visibleButtonsList.length; i++) {
        var id = visibleButtonsList[i].id;
        if (!toShow[id]) {
            // set the display property of the buttons to be hidden to "none"               
            var button = document.getElementById(id);
            if (button) {
                button.style.display = 'none';
            }
        }
    }
    // update the visible buttons list
    visibleButtonsList = buttonsToShow;
    // Note that we don't need to set the "display" property back for the buttons, 
    // because WinJS.UI.AppBar.showOnlyCommands would set it back internally
    appbarControl.showOnlyCommands(buttonsToShow);
}

【讨论】：