Windows Phone navigation buttons overlap with screen resolution

Question

below you'll see a screen running in Windows Phone 8.1 one 2 devices. Both are claiming to have Viewport Width and Height of 800x480 however as you can see from the image the 635's nav buttons are overlapping the game area.

I have checked various properties in GraphicsDevice.Adapter and GraphicsDevice.Viewport, but they are both the same!

The screen is running within C# UWP Monogame code. I set the PrefferedBackBufferWidth and Height to 480x800.

How can you tell if the nav buttons with take up part of the screen?

Answer 1

I will expand the answer further.

In windows phone 8.1, you have two ApplicationViewBoundsMode enum values.

• UseVisible, pages inside application will use only the visible area excluding StatusBar, application bar and Soft navigation buttons.

  

To make your app use ApplicationViewBoundsMode.UseVisible option, add the following in app.xaml.cs before `Windows.Current.Activate();

#if WINDOWS_PHONE_APP
        ApplicationView.GetForCurrentView().SetDesiredBoundsMode(ApplicationViewBoundsMode.UseVisible);
#endif

• UseCoreWindow, lay out the window's content within the region occupied by the core window (that is, including any occluded areas- including soft navigation buttons).

To make your app use ApplicationViewBoundsMode.UseCoreWindow option, add the following in app.xaml.cs before Windows.Current.Activate();

#if WINDOWS_PHONE_APP
        ApplicationView.GetForCurrentView().SetDesiredBoundsMode(ApplicationViewBoundsMode.UseCoreWindow);
#endif

In some cases, developers may want to use UserCoreWindow option to show content under app bar but as a side effect navigation soft buttons will occlude parts of your page to resolve it, follow the next solution.

You can listen for ApplicationView.GetForCurrentView().VisibleBoundsChanged in WindowsPhone and update the margin of your page.

Here is an article written by Joost van on fixing this issue (and a behavior that you can use out of the box)

Quoting the issue explanation from the above link

If the application view bound mode is set to ApplicationViewBoundsMode.UseCoreWindow in App.Xaml.cs the phone reports the whole screen size – not only the part that is normally taken by the status bar on top and the application bar at the bottom, but also the part that is used by the button bar.

And a snippet from his solution where he updates the margin of page

void KeepInViewBehaviorVisibleBoundsChanged(ApplicationView sender, object args)
{
  UpdateBottomMargin();
}

private void UpdateBottomMargin()
{
  if (WindowHeight > 0.01)
  {
    var currentMargins = AssociatedObject.Margin;

    var newMargin = new Thickness(
      currentMargins.Left, currentMargins.Top, currentMargins.Right,
      originalBottomMargin + 
        (WindowHeight - ApplicationView.GetForCurrentView().VisibleBounds.Bottom));
    AssociatedObject.Margin = newMargin;
  }
}