Aug 272014
 
 August 27, 2014  Posted by at 2:46 pm WinRT, WP, XAML  Add comments

I was asked the other day about the status bar and I was writing on the email I realized I might as well make it a post since it got rather long, with quite a few screen shots. Here is the write-up. Gist with code can be found here

I’m sure you are aware of the status bar, the system tray as it is also referred to. This is the top area on the device where you have information about connectivity, if location is turned on, if the phone has vibration activated, and more. In Windows Phone Silverlight we could simply hide the status bar if we wanted to in XAML by setting show to false and instantly gain more screen estate. We can still do that in Windows Phone WinRT, but we are now using the StatusBar class instead of the SystemTray class which could be accessed in XAML.

As a little recap, this is how you can use the SystemTray in Windows Phone Silverlight (including 8.1)
Progressbar windows phone

And the progressbar

Progressbar windows phone2

Code:

Progressbar windows phone3

[sourcecode language=”XML”]
<phone:PhoneApplicationPage x:Class="Temp2SL.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
SupportedOrientations="Portrait"
Orientation="Portrait"
shell:SystemTray.BackgroundColor="PapayaWhip"
shell:SystemTray.ForegroundColor="DarkGreen"
shell:SystemTray.Opacity="0.7"
shell:SystemTray.IsVisible="True">

<shell:SystemTray.ProgressIndicator>
<shell:ProgressIndicator
Text="Waiting"
IsIndeterminate="True"
IsVisible="True" />
</shell:SystemTray.ProgressIndicator>
<Grid Background="SaddleBrown" />
[/sourcecode]

In Windows Phone (WinRT) we access the StatusBar from code (or create behaviors for XAML fans).
The first thing you might want to set how the status bar is integrated with the app, either as a ‘part’ of the app or separate. The screen shot(s) illustrate this better 🙂 I’ve set the page background to slate blue and the inner grid to light blue.

Progressbar windows phone4

As for customizing the UI

Progressbar windows phone5

We can also listen for Showing and Hiding events, and we use the async methods ShowAsync() or HideAsync() depending on what we want to do

Progressbar windows phone6

Of course we have access to the progressbar, text and value as well

Progressbar windows phone7

Code

[sourcecode language=”csharp”]
ApplicationView.GetForCurrentView()
.SetDesiredBoundsMode(ApplicationViewBoundsMode.UseCoreWindow);

ApplicationView.GetForCurrentView()
.SetDesiredBoundsMode(ApplicationViewBoundsMode.UseVisible);

var sb = StatusBar.GetForCurrentView();
sb.BackgroundColor = Colors.Yellow;
sb.ForegroundColor = Colors.Brown;
sb.BackgroundOpacity = 0.4;

sb.Hiding += (sender, args) => { /* On hide event */};
sb.Showing += (sender2, args2) => { /* On show event */};
sb.ProgressIndicator.Text = "Waiting";
sb.ProgressIndicator.ShowAsync();

sb.Hiding += (sender, args) => { /* On hide event */};
sb.Showing += (sender2, args2) => { /* On show event */};
await sb.HideAsync();
[/sourcecode]

(My personal) UX Guidelines

Blending in
The status bar should preferably blend in well with the application- this might be achieved by changing the background color, making the background transparent or hide the status bar.

Custom design
However customizing a status bar in a way to replace the original one with one that uses custom icons but similar functionality is generally not recommended as the user needs a familiar environment for easy use and navigation.

Clearing clutter
Don’t let read areas be covered by the status bar- list items, text and similar should be below the status bar

When to hide
Generally you would want to hide the status bar when the application needs to display something in full screen mode without distractions. This might be video, games, photo editing, gallery type or reading apps that need every pixel of screen estate.

When to show
If the user needs to monitor the notifications in the status bar, or if the status bar isn’t in the way the status bar can be left as is or get a background that works better with the application.

Show/Hide/Show
Switching between the different states is possible and a scenario where you might want to do this is when going from smaller size video/image/game to full screen and you want to remove distractions.

Progress indicator
When the application is working while the user is waiting for a result a progress indicator can be used in the status bar. As many applications use the same control in the same place the user will know where to look and therefore you should consider doing the same.

  One Response to “Working with the StatusBar/SystemTray in WP (SL and WinRT) plus some guidelines”

  1. Thanks for the mini-tutorial Iris!
    Haven’t delved into WinPhone dev yet but this is being saved in the “required knowledge/how-to” section 🙂

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)

What is 8 + 14 ?
Please leave these two fields as-is:
IMPORTANT! To be able to proceed, you need to solve the following simple math (so we know that you are a human) :-)