How to test my app on phone with navigation bar and why it matters

How to test my app on phone with navigation bar and why it matters

Some Windows Phone, the Lumia 640 for the example, have no physical buttons, they use virtual buttons rendered at the botom of the screen, this part is named the navigation bar. It’s very important to test your app with these kind of devices, cause you can have some surprises on it, but it’s not necessary to use a real phone for that.

How to activate the navigation bar on emulators

It’s not easy to find, but Windows Phone emulators have an option to display Navigation Bar. This option is only available on 720p and 1080p emulators.

Click on the right arrow

Capture

Then go on the “sensors” tab (not so logical…)

Capture

And check the option “Software buttons”, then click on Apply. The emulator will reboot and display the new navigation bar instead of fake physical buttons:

Capture

Voilà! (Ⓒ Joe Belfiore)

Why is it important to test my app with this bar?

Let’s take an example:


<Page
Background="Orange">
<Page.BottomAppBar>
<CommandBar Opacity="0.7">
<AppBarButton Label="test" Icon="Accept"/>
</CommandBar>
</Page.BottomAppBar>
<Grid>
<StackPanel VerticalAlignment="Bottom">
<Rectangle Height="30" Fill="Red"/>
<Rectangle Height="30" Fill="Green"/>
<Rectangle Height="30" Fill="Pink"/>
<Rectangle Height="30" Fill="Yellow"/>
<Rectangle Height="30" Fill="Blue"/>
<Rectangle Height="30" Fill="Violet"/>
</StackPanel>

</Grid>
</Page>

With the following code

ApplicationView.GetForCurrentView().SetDesiredBoundsMode
         (ApplicationViewBoundsMode.UseCoreWindow);

The following code will display an Orange page with some color stripes at the bottom and with a semi-transparent application bar, here is the render on a classic device:

Capture

Nothing to say, the render is perfect (In my opinion, one of my most beautiful app!!)

But what happens on a phone with navigation bar? Here is a screenshot:

Capture

Obviously, there is a problem, the violet stripe is not visible as well as a part of the blue one.

This problem is related to ApplicationViewBoundsMode.UseCoreWindow, this command ignores all native chrome including:

  • system tray
  • application bar
  • but also navigation bar and phone call prompt.

So on our case, the page is displayed under the navigation bar, this is why a part of our page is missing

We will see how to solve it in an upcoming article

Comments are closed.