Controlling the StatusBar (SystemTray) in a Universal App

One of the problems of using Universal Apps is that some components only exist in one platform and not in another. One such example is the StatusBar (formally known as SystemTray) for Windows Phone 8.1. For example, to change the colour of the StatusBar you have to use code rather than xaml. This makes life a bit awkward when you want to use a shared page. So to avoid this issue I’ve created a User Control (ChromeController.xaml) that exists in both platforms;

image

The ChromeController is just dropped into the shared page like any other control, except this one doesn’t have any visuals (I could have used a real control, but I’m being lazy).

User Control

<UserControl
    x:Class="UniApp.ChromeController"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    />

Snippet from shared page;

<Grid>
            <local:ChromeController Background="Pink" Opacity="0.6" />

For the Windows 8.1 variant the code does absolutely nothing, although in the long term it could easily control win81 only assets. However, for the Windows Phone 8.1 it reuses the elements Background and Opacity settings and sets the StatusBar to the same values.

    public sealed partial class ChromeController : UserControl
    {
        public ChromeController()
        {
            this.InitializeComponent();

            this.Loaded += ChromeController_Loaded;
     
        }

        void ChromeController_Loaded(object sender, RoutedEventArgs e)
        {            
            var solidColorBrush = this.Background as SolidColorBrush;
            if (solidColorBrush != null)
            {
                var color = solidColorBrush.Color;
                var statusBar = StatusBar.GetForCurrentView();
                statusBar.BackgroundOpacity = this.Opacity;
                statusBar.BackgroundColor = color;
            }
        }
    }

Here’s the result.

image

4 thoughts on “Controlling the StatusBar (SystemTray) in a Universal App

  1. enough2000 April 17, 2014 / 8:03 am

    Cool stuff, of course to make it running in the Shared node, you need to hide the StatusBar handling in a preprocessing block

    void ChromeControl_Loaded(object sender, RoutedEventArgs e)
    {
    #if WINDOWS_PHONE_APP
    var solidColorBrush = this.Background as SolidColorBrush;
    if (solidColorBrush != null)
    {
    var color = solidColorBrush.Color;
    var statusBar = Windows.UI.ViewManagement.StatusBar.GetForCurrentView();
    statusBar.BackgroundOpacity = this.Opacity;
    statusBar.BackgroundColor = color;
    }
    #endif
    }

    • pauliom April 17, 2014 / 4:31 pm

      No, you don’t need the directive. You have the User Control duplicated in both projects, in the win8 one it would make changes to whatever specific chrome you wanted

  2. Roc November 2, 2015 / 7:39 am

    How status bar be hidden on Windows 10 Mobile?

    • pauliom November 4, 2015 / 6:31 pm

      It’s a bit different, you must have included the mobile extensions and then you can use; Windows.UI.ViewManagement.StatusBar.HideAsync()

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 )

Facebook photo

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

Connecting to %s