Layout and the Windows Phone navigation bar
Collapse the table of content
Expand the table of content

Layout and the Windows Phone navigation bar (HTML)

[This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation]

What is a navigation bar?

The Windows Phone 8.1 chassis specification supports phones that do not have capacitive “steering” buttons (Back, Start and Search). Instead, the phone is capable of rendering a surface with "soft" steering buttons at the lower edge of the screen. This surface is called the navigation bar—or nav bar—and the user of the phone can control whether it is shown (by swiping up) or hidden (by tapping the chevron). For practical purposes, the height of the nav bar can be considered to be about 1/16 the height of the screen, and this topic explains how to adapt the layout of your app to a nav bar. An example of a nav bar is shown below.

Windows Phone screen showing navigation bar

Windows Phone Store apps

The way in which your Windows Phone Store app reacts to the nav bar being shown or hidden depends on the desired bounds mode set on the application view currently being shown. You can set the desired bounds mode on an application view by calling setDesiredBoundsMode with a value of applicationViewBoundsMode.

If you set the desired bounds mode to useVisible then your application view will resize—and layout will occur—whenever the nav bar (or the status bar, or the app bar) is shown or hidden. If instead you set the desired bounds mode to useCoreWindow then your application view will not resize and it will not lay out. Instead the nav bar (or the status bar, or the app bar)—when shown—will overlay the view and will occlude part of it.

Whether you configure your application view to resize or not, whenever the nav bar (or the status bar, or the app bar) is shown or hidden, the visibleBoundsChanged event will be raised and the value of visibleBounds will contain the bounds of the non-occluded portion of the screen in view pixels. You can compare this value to bounds, which is the full size of the application view in view pixels.

Full-screen apps

An app can set suppressSystemOverlays to true at any time to declare that it wants the full screen. When it does this, the nav bar will hide (as will other overlays). In this state, if the user subsequently navigates to an app (or an application view in the same app) that has suppressSystemOverlays set to false, then the nav bar will become visible once again. Or a game, for example, could set suppressSystemOverlays to true while the game is playing, but when the game is paused, set it to false, and the nav bar will re-appear. And, suppressSystemOverlays is set to true by default for all games (that is, all apps in the Store's Games category).

Note that suppressSystemOverlays only has this effect on the nav bar if Settings > Navigation Bar > Auto Hide is set on the phone.



© 2017 Microsoft