[UWP][XAML] How Do I Show StatusBar / SystemTray?

Question

How do we show StatusBar / SystemTray in our Windows 10 UWP apps?

Windows Phone 8 had this option...

<phone:PhoneApplicationPage
    shell:SystemTray.IsVisible="True">
</phone:PhoneApplicationPage>

...as well as this...

Microsoft.Phone.Shell.SystemTray.SetIsVisible(this, true);

So, how does it work with Windows 10?

This is the most, that I've found...

        private void ShowStatusBar()
        {
            // turn on SystemTray for mobile
            var statusbar = "Windows.UI.ViewManagement.StatusBar";
            if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent(statusbar))
            {
                Windows.UI.ViewManagement.StatusBar.GetForCurrentView().ShowAsync();
            }
        }

What would the next steps (or the right ones) be?
JJ

Answer 1

you'll have to write code that runs on only on a mobile device. To do that, open the Reference Manager dialog box, and then choose either the Microsoft Desktop Extension SDK for Universal App Platform or the Microsoft Mobile Extension SDK for Universal App Platform.

https://msdn.microsoft.com/en-us/library/windows/apps/Dn609832.aspx

Answer 2

Hi

Is that what your looking for ?

 if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.Phone.UI.Input.HardwareButtons"))
{
    StatusBar statusBar = StatusBar.GetForCurrentView();
}

Regards,

Answer 3

Ok...
I, finally, have something that works.
Maybe my original code did work, but the icons were rendering white on a transparent background (or something).

using System;

namespace Windows10
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();

            // show the StatusBar
            ShowStatusBar();
        }

        // show the StatusBar
        private async void ShowStatusBar()
        {
            // turn on SystemTray for mobile
            // don't forget to add a Reference to Windows Mobile Extensions For The UWP
            if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.UI.ViewManagement.StatusBar"))
            {
                var statusbar = Windows.UI.ViewManagement.StatusBar.GetForCurrentView();
                await statusbar.ShowAsync();
                statusbar.BackgroundColor = Windows.UI.Colors.Green;
                statusbar.BackgroundOpacity = 1;
                statusbar.ForegroundColor = Windows.UI.Colors.Red;
            }
        }
    }
}

This sets the background color to green and the foreground color to red (unlikely to be missed).
This proves that the code does work.
Now, to change it to actually match my app.
Hehehe...
JJ

Answer 4

My testing is becoming rather tiresome...

Regardless of what settings I try, it refuses to "remove" the StatusBar background.
I set BackgroundOpacity to 0 and BackgroundColor to Transparent and BackgroundOpacity to 1, but neither option show the app's background through.

At the moment, I'm stuck with White BackgroundColor and Black ForegroundColor.
While it works, I want a full-bleed background image.

For posterity's sake, my Windows Phone 8 app used the Panorama control.
My UWP app is using the Hub control.
Maybe there is some odd Hub issue?
JJ

Answer 5

I found that I can Hub.Margin = new Thickness(0, -24, 0, 0); and get the background image to go underneath the StatusBar, but that seems to be a hokey way of doing it.
When the phone is switched to landscape, the margins are no longer appropriate.

There must be an easier way to accomplish this simple task.
It was done with two lines of XAML, before.
JJ

Answer 6

BTW...
In testing, I found that the StatusBar was always being shown.
I didn't have to invoke .ShowAsync().
The problem was that it was BackgroundColor = White and ForegroundColor = White.
I guess those are the default settings (not sure why, though).
JJ

Answer 7

If I .HideAsync(), the Hub control fills the whole screen.
It seems, to me, like a "gotcha" kind of thing.
JJ

Answer 8

I opened a new thread about overlaying StatusBar, as to not take this thread off-topic.
JJ

Answer 9

BTW...
In testing, I found that the StatusBar was always being shown.
I didn't have to invoke .ShowAsync().
The problem was that it was BackgroundColor = White and ForegroundColor = White.
I guess those are the default settings (not sure why, though).
JJ

Transparent BackgroundColor seems to be working, now.

		// show the StatusBar
		private async void ShowStatusBar()
		{
			// if the device even has a status bar
			if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.UI.ViewManagement.StatusBar"))
			{
				// you don't want to type this over and over
				var statusbar = Windows.UI.ViewManagement.StatusBar.GetForCurrentView();
				// shows the StatusBar (alternatively HideAsync() hides it)
				await statusbar.ShowAsync();
				statusbar.BackgroundColor = Windows.UI.Colors.Transparent;
				//statusbar.BackgroundOpacity = 1;
				//statusbar.ForegroundColor = Windows.UI.Colors.Black;
			}
		}

I tested it with the light and dark system themes.
Both showed StutusBar's background as the system color and foreground as the opposite (exactly as it should).
I'm using Windows 10 Mobile [phone]).
JJ