How to hide the application bar in a Windows Phone 8.1 (WinJS) app?

Question

I have a single AppBar declared in default.html for use throughout my application.

On some of the pages I need to show the App Bar and in some of the I need to hide the AppBar.

So far, my efforts to find the methods to hide and show the AppBar have met a dead end.

The documentation on MSDN says:

AppBar.hide method : Hides the app bar on Windows and the secondary command menu on Windows Phone.

So, that method only hides the AppBar for Windows and not for a Windows Phone project.

I have also tried giving display:none as a CSS style, to no effect.

Any help will be appreciated :)

Answer 1

AppBar.Hide hides the secondary command bar on Windows Phone, not the main AppBar. If you want the entire AppBar to go away then this isn't the right property.

The easiest way is to declare the AppBar on pages that you want to show it and to leave it out on pages that you don't want it, but you should be able to hide it by disabling the AppBar on pages that you don't want it on.

I just modified the appbar-commands.js file in the HTML AppBar control sample as follows and the appbar hides and shows as I click the hide and show buttons:

// These functions are used by the scenario to show and hide elements
function doShowItems() {
    document.getElementById('commandsAppBar').winControl.disabled = false;

    //document.getElementById('commandsAppBar').winControl.showCommands([cmdFavorite, cmdCamera]);
    document.getElementById('scenarioShowButtons').disabled = true;
    document.getElementById('scenarioHideButtons').disabled = false;
}

function doHideItems() {
    document.getElementById('commandsAppBar').winControl.disabled = true;
    //document.getElementById('commandsAppBar').winControl.hideCommands([cmdFavorite, cmdCamera]);
    document.getElementById('scenarioHideButtons').disabled = true;
    document.getElementById('scenarioShowButtons').disabled = false;
}

I also confirmed with the single-page navigation model navigating between two pages. If you aren't seeing the appbar hide and show when disabled and enabled then make sure you are calling the code to disable / enable the appbar. The PageControl's ready function may not be called when returning to a cached page.