Nico Vermeir

Nico Vermeir

Hi, My name is Nico, I’m a Windows Development MVP living in Belgium. I’m currently employed as a Technical Consultant at Realdolmen, one of Belgium’s leading IT single source providers.

I'm also founding member and board member of the Belgian Modern App Developer Network, a user group focussed on modern application development. If you're in Belgium feel free to drop by if we're doing an event. http://www.madn.be

don’t forget the system tray in your wp8 app

The system tray in Windows Phone 8 is the small bar at the top where the clock, signal strength, connectivity icons, etc. reside. In most apps I’ve used developers tend to do one of two things there:

  • leave it
  • hide it

An example here is Microsoft’s Facebook app (yes, even the first party apps do this), take a look

This is a pretty decent looking app (yes it violates a bunch of “Modern UI” guidelines but it does look decent). However, the black system tray at the top of the screen breaks the experience. It feels like the app lies on top of the homescreen, while this is actually true it’s a better user experience to suck the user completely into the application.

Another option for the Facebook app would be to hide the system tray, this won’t break the experience for the user on the visual side.

But this solution has another downside, the Facebook app needs an active internet connection to work, suppose the app throws an error saying that your internet connection is down, what’s your first reaction? You check the signal strength and / or wifi connectivity icon, and where do those live? In the system tray that is hidden now, so the user needs to exit the app to check the system tray (same goes for checking the time).

Only hide the system tray when your app absolutely requires it, like a game that needs all the screen estate it can get.

So let’s try a third solution, something a lot of Windows Phone developers tend to forget or don’t know is possible, we can style the system tray. This is what the Facebook app could look like

By simply giving the system tray the same color as the header bar of the app we’ve give the app a little extra while still having a visible system tray.

I used this approach in my Traffic Chat app

Same story in this app, it looks much more like a part of the OS instead of “just an app”.

Let’s do it!

It’s actually very easy to get this done.

In your Windows Phone application, navigate to the App.xaml page. In that page there should be an Application.Resources tag. As you might (should) know, we can define application wide styles here, if we don’t provide a key to a style it applies to all controls of the specified type throughout the app. Sounds easy enough, let’s do it.

Code Snippet
  1. <Style TargetType="phone:PhoneApplicationPage">
  2.     <Setter Property="shell:SystemTray.BackgroundColor" Value="Red" />
  3.     <Setter Property="shell:SystemTray.ForegroundColor" Value="Green" />
  4. </Style>

The style has a target type of PhoneApplicationPage, the class that is used by all pages in a Windows Phone app. We set the backgroundcolor to Red and the Foregroundcolor to Green, this will look very pretty right? Glimlach

If we run the app now you’ll see that nothing has changed. A downside of this is that not providing a key doesn’t work for the PhoneApplicationPage, so we’ll need to name the style and apply it to every page in the application.

Change the above code to this (add a key, name it whatever you want)

Code Snippet
  1. <Style x:Key="DefaultPageStyle" TargetType="phone:PhoneApplicationPage">
  2.     <Setter Property="shell:SystemTray.BackgroundColor" Value="Red" />
  3.     <Setter Property="shell:SystemTray.ForegroundColor" Value="Green" />
  4. </Style>

And on every page that you want to style the systemtray, apply the style (line 15 in this code block).

Code Snippet
  1. <phone:PhoneApplicationPage
  2.     x:Class="PhoneApp1.MainPage"
  3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  5.     xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
  6.     xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
  7.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  8.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  9.     mc:Ignorable="d"
  10.     FontFamily="{StaticResource PhoneFontFamilyNormal}"
  11.     FontSize="{StaticResource PhoneFontSizeNormal}"
  12.     Foreground="{StaticResource PhoneForegroundBrush}"
  13.     SupportedOrientations="Portrait" Orientation="Portrait"
  14.     shell:SystemTray.IsVisible="True"
  15.     Style="{StaticResource DefaultPageStyle}">

If we run the app now we’ll get a “beautiful” styled system tray.

 

Conclusion

Styling the system tray is something that is often overlooked. Spend some time on this, it’ll make your app look even better without annoying your users with a hidden system tray. It’s easy to do and doesn’t take a lot of time.

Download the Green/Red system tray app from my SkyDrive

This is an imported post. It was imported from my old blog using an automated tool and may contain formatting errors and/or broken images.

Leave a Comment