Hiding the Status Bar in Windows Phone 8.1 apps. Or Not.

  • Article

I've been working on a Universal app that runs on Windows Phone 8.1 and Windows 8.1, and I have to admit it's going remarkably smoothly. I could get used to writing apps this way!

One place I was temporarily stuck (until the kind folks who write the Windows Phone SDK docs came to my aid) was how to hide the Status Bar (nee the System Tray).

After watching this excellent Build 2014 video which touches on the "chrome" of a Windows Phone app, I wasn't sure if hiding the Status Bar completely was an option, but it turns out it definitely is... BUT you might want to reconsider before you do it. Here's why: It's clear that users like seeing the time, signal strength and so forth on their phones. Who knew, right? :-) and so hiding it might not be the best user experience.

Instead, you might want to consider using the space behind the Status Bar to display more of your app.

Here's what I mean:

The image on the left has a standard Status Bar. This is fine, but it may not be the look you are going for - and especially if your app supports landscape orientation you might find the little indicators actually get in the way.

However, the image on the right demonstrates how the app's "application space" can be expanded to interact with the Status Bar in order to display more content (in this case, a background image). It looks a lot more integrated, and if the device is rotated, it still works nicely. You do need to be careful about the potential colors shown behind the status indicators of course, and where your content might go so as not to interfere with anything, but you have to admit the overall effect is nice, right?

Code

If you want to make use of the Status Bar part of the screen, use this code in the MainPage() constructor (or whatever page you are displaying):

ApplicationView.GetForCurrentView().

          SetDesiredBoundsMode(ApplicationViewBoundsMode.UseCoreWindow);

If you still want to hide the Status Bar, use this code:

await Windows.UI.ViewManagement.

          StatusBar.GetForCurrentView().HideAsync();

 

 

And that's it!