SurfCube on Mango Part 2– The SystemTray

With SurfCube, you can use every single pixel on the screen for the website you are browsing. However, being a web browser, it is fairly important to have a way to check WiFi / 3G status, and you may also want to know what time it is. We wanted to show this data, but to do it in WP7 RTM / NoDo, we would have had to enable the System Tray. There are two problems with the System Tray:

• The System Tray takes up space.
• The System Tray swallows your touches coming from the top edge of the screen, thus disabling “Edge Grab”, which is the primary method for rotating the cube.

So, we thought that we would only make the System Tray visible on the top side of the cube – there is no need to rotate the cube in that direction any longer, and we can find the space. Unfortunately, turning the System Tray on or off makes the entire page smaller, meaning it will re-layout itself. This causes a visible jump and a lag.

Enter Mango

On Mango, SystemTray has a couple of new Properties – Background, Foreground and Opacity. So, if you want to have blue battery icon and clock in front of a dark gray background, you now can:

The XAML for this:

   1:  <phone:PhoneApplicationPage 

   2:      x:Class="SystemTrayDemo.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" d:DesignWidth="480" d:DesignHeight="768"

  10:      FontFamily="{StaticResource PhoneFontFamilyNormal}"

  11:      FontSize="{StaticResource PhoneFontSizeNormal}"

  12:      Foreground="{StaticResource PhoneForegroundBrush}"

  13:      SupportedOrientations="Portrait" Orientation="Portrait"

  14:      shell:SystemTray.IsVisible="True"

  15:      shell:SystemTray.BackgroundColor="LightGray"

  16:      shell:SystemTray.ForegroundColor="Blue">

  17:   

  18:      <!--LayoutRoot is the root grid where all page content is placed-->

  19:      <Grid x:Name="LayoutRoot" Background="Transparent">

  20:          <Ellipse Fill="Azure" />

  21:   

  22:   

  23:      </Grid>

  24:   

  25:   

  26:  </phone:PhoneApplicationPage>

The important part is lines 14-16.

You may notice, that the ellipse (which fills the entire available space) does not get below the SystemTray. But what happens if we change the opacity of the SystemTray?

    shell:SystemTray.Opacity="0.5"

Now, the ellipse goes below the SystemTray. This means that if the Opacity of the SystemTray is not 1 (it can be 0.999), you can turn it on and off from code, without making the available space for your application smaller and forcing another layout round. Which is exactly what SurfCube needs to show the clock, wifi signal and other info when the top face of the cube is active.

One more note about opacity: the opacity only controls the opacity of the gray background strip. The actual text and icons on the System Tray will never be semi-transparent, even if you set the ForegroundColor to have an alpha value.

Applied to SurfCube

So, how do we apply this effect to SurfCube? Easy. We already have an event handler when the active face of the cube changes, so it is just a matter of a few lines of code there (see lines 1-2 and 10):

   1:  if (e.OldFace == CubeFace.Top)

   2:      SystemTray.IsVisible = false;

   3:   

   4:  switch (e.NewFace)

   5:  {

   6:      case CubeFace.Top:

   7:          if (_currentTutorialState == TutorialState.Start)

   8:              Messenger.Default.Send(new TutorialStateMessage() { NewState = TutorialState.Step1 });

   9:          else

  10:              SystemTray.IsVisible = true;

  11:          break;

And of course, the Opacity is set in XAML, since it is the responsibility of the designer. The Opacity is set to 0, since the cube’s background color is pretty close to black and white (depending on the theme), but not exactly black or white – and we don’t want to have a hard black or white stripe on top.

So, how does it look?

(Don’t forget that the emulator does not show the clock or the WiFi icon).

Well, it looks OK, but it touches the version number text. Oh well, it was taking up too much space anyway, let’s get rid of it!

And finally, here is a video of this new SurfCube feature in action:

You may also want to look at my e-book, Windows Phone 7 for Silverlight developers!