CODEWITHSUNDEEP
windows-8winjsappbar
louis.luo
louis.luo

Reputation: 2971

WinJS AppBar button flash on Hide

My application has a WinJS AppBar control at the bottom of the screen. I use .showOnlyCommands(buttonsToShowArray) to show and hide buttons on ListView itemSelectionChanged event.

The problem I have right now is that when every I call .showOnlyCommands, the buttons to be hidden (or you may say "replaced") are going to flash on the top of the screen.

I tried to use the Microsoft sample app, this doesn't happen. I tried to use .showCommands + .hideCommands method, it is the same behavior. Note that this didn't happen before the Release Preview version of Win8.

I have no idea what is going on. Any idea?

EDIT: I did further investigation, the problem happens on hideCommands. Say I have 3 buttons displayed on the appbar. I call hideCommands to hide all 3 buttons. The icon of the 3 buttons would disappear on the appbar, then pile up at the top-left corner of the screen and then disappear. (i.e. there would be a flash of 3 piled up buttons at the corner of the screen).

Upvotes: 1

Views: 850

Answers (2)

louis.luo
louis.luo

Reputation: 2971

A temporary hack for this problem is:

Set the button be invisible before calling showOnlyCommands or HideCommands.

Here is the code that I use for now:

/* 
 * @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);
}

Upvotes: 0

Chris Herring
Chris Herring

Reputation: 3665

You may be invoking showOnlyCommands when the AppBar is in the process of 'showing'. I've found that when calling these methods in the beforeshow or aftershow handler that this happens. This quote from Animating your UI sheds light on why:

Use fade in and fade out animations to show or hide transient UI or controls. One example is in an app bar in which new controls can appear due to user interaction.

The sample app shows/hides the buttons before the appbar is shown. You may be calling show on the app bar before calling showOnlyCommands.

Upvotes: 1

Related Questions