Can I have two different App bars in a Metro App?

Question

I have two different scenario in my metro app and for each I need to use a different App bar.

Is there a way I can have two App bars and use them as required?

Answer 1

I managed to find a solution by disabling / enabling appbars accordingly

var appbar = document.getElementById('appBar');
var appbarControl = appbar.winControl;
appbarControl.disabled = true;


var appbar2 = document.getElementById('appBar2');
var appbarControl2 = appbar2.winControl;
appbarControl2.disabled = false;

Answer 2

Yes, you can declare as many app/nav bars as you want in whatever pages you want, and they’ll all be present in the DOM. That is, declaring an app bar in an element just creates elements in the DOM, and they behave like any other elements. This does mean, though, that the last one in your markup--whichever one appears last in the DOM tree--will be the one that’s topmost in the z-index by default and therefore the one to receive events.

All you need to do, then, is be sure to hide all but one of the app bars. The one that remains will appear on Win+Z/swipe up/right click and receive events.