UWP App Development: Styling the Mobile Status Bar

(If you’re new to Windows 10 and the Universal Windows Platform, go here.)

With Windows 10 and Universal Windows Apps, a lot has changed for developers, particularly if you’re coming from the phone side of things. Some changes are awesome! Others will take some getting used to. Dealing with the Status Bar probably falls under the latter category.

If you’re not familiar: The Status Bar is the UI at the top of your screen on Windows Phone:

Mobile Status Bar

In Windows Phone 8.1 app development, dealing with the Status Bar was pretty simple. You could show it, or hide it, or change it’s appearance slightly. The first-party Bing apps (News, Money, etc…) took advantage of these capabilities in some interesting ways. (You can read about how they did it here.)

Customized Mobile Status Bar

The Status Bar is alive and well in Windows 10 Mobile, but the way it interacts with an app is a little different. By default, the Status Bar will inherit it’s background color from the background of the top-most XAML page of a running app, while it gets it’s foreground color from the OS theme setting. This can be confusing, and make it easy to get into some weird states. As an experiment, try setting your Page Background to “White”, and your app’s RequestedTheme to “Dark”:

In MainPage.xaml:

<Page
   ...
   Background="White">
   <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
   </Grid>
</Page>

In App.xaml:

<Application
   ...
   RequestedTheme="Dark">
</Application>

This will result in what appears to be a white bar at the top of the screen. What’s really happening is that the Status Bar is inheriting a hard-coded white background color from the Page background, and it’s also using white for it’s foreground color since the RequestedTheme is “Dark”. So, you’ll need to make sure that there’s not a mismatch between your page background and your theme. This will be particularly important if you’re respecting the user-selected theme color in your app.

To summarize:

  • Setting the RequestedTheme property in App.xaml to Dark will make the Status Bar foreground color White.
  • Setting the RequestedTheme property in App.xaml to Light will make the Status Bar foreground color Black.
  • Setting the Background property of Page in MainPage.xaml will also change the background color of the Status bar.

If you don’t want to mess with the above methods, you can still override background, foreground, and other properties of the Status Bar in the code behind. To do so, you’ll need to add the Mobile Extension SDK:

  1. In Solution Explorer, under your Solution, Right-click References and click Add Reference.
  2. Under Windows Universal > Extensions, add Microsoft Mobile Extension SDK.

With that in place, you can access the StatusBar from your code behind. Add the following code to the OnLaunched event in App.xaml.cs:
if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.Phone.UI.Input.HardwareButtons"))
{
var statusBar = Windows.UI.ViewManagement.StatusBar.GetForCurrentView();
statusBar.BackgroundColor = Windows.UI.Colors.Green;
statusBar.BackgroundOpacity = 1;
}

Notice the if statement here. Since UWP apps are universal to all Windows devices, we need a way to first check that the device indeed has a Status Bar. Otherwise, the app will crash. There are various ways to do this, but I’ve chosen to check for the presence of hardware buttons, which tells me the device is a phone.

Aside from that caveat, all we’ve done is simply changed the background color to green, but there’s a lot more you can do if you feel like getting creative with the status bar.

UPDATE:
It’s come to my attention (from @dgaust on Twitter) that it’s possible to check for the presence of the StatusBar itself. This seems much cleaner than checking for hardware buttons, but I’ll leave the above code snippet for posterity.


if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.UI.ViewManagement.StatusBar"))
{
//do something
}

Advertisements

12 thoughts on “UWP App Development: Styling the Mobile Status Bar”

  1. A mistake in your update: there is not the “Phone” in the namespace you search for : “Windows.UI.ViewManagement.StatusBar” and not “Windows.Phone.UI.ViewManagement.StatusBar”.
    Maybe the API changed since your post… 😉

    if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent(“Windows.UI.ViewManagement.StatusBar”))
    { //do something }

  2. I have been using this method for styling my status bar, but there is an issue with it. The statusbar’s background color will flicker when you hold down the back button and switch to another app. It will flicker again when you come back to your app. To get around this issue, I set my main page’s background property to my desired color.

    This worked in my case because I am using hamburger menu navigation. I have a title bar across the top and a Frame for page content beneath that. I can set the Frame’s background property to the ApplicationPageBackgroundThemeBrush (or whatever other style I want), and all my pages will be using that color in the background.

    Thanks for the write up!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s