How to mimic the application bar of the game hub and to avoid the splash screen bug

,

With the release of the Mango update, having a minimized application bar with an application using the panorama control is now part of the Metro experience. The best example is the games hub. The minimized application bar uses the Opacity property as you can see in the following picture.

Opacity

To mimic the application bar of the game hub, follow these 2 steps:

1- Add the following XAML code where the panorama control resides to add the application bar.

  <phone:PhoneApplicationPage.ApplicationBar> <shell:ApplicationBar BackgroundColor="DarkGray" ForegroundColor="Black" IsVisible="False" IsMenuEnabled="True" Mode="Minimized" Opacity="0.60" StateChanged="ApplicationBarStateChanged"> <shell:ApplicationBar.MenuItems> <shell:ApplicationBarMenuItem Text="MenuItem 1" /> <shell:ApplicationBarMenuItem Text="MenuItem 2" /> </shell:ApplicationBar.MenuItems> </shell:ApplicationBar> </phone:PhoneApplicationPage.ApplicationBar>

You’ll have this result:

ApplicationBarOpacity

2- In the page with the application bar, add the event handler ApplicationBarStateChanged.

private void ApplicationBarStateChanged(object sender, ApplicationBarStateChangedEventArgs applicationBarStateChangedEventArgs)
{
    ApplicationBar applicationBar = sender as ApplicationBar;

    if (applicationBar != null)
    {
        applicationBar.Opacity = applicationBarStateChangedEventArgs.IsMenuVisible ? 1 : 0.60;
    }
}

The application bar will use a solid color (i.e. no opacity) when it will be expanded. It’s easier to read like this:

ApplicationBarNoOpacity

When I implemented this behaviour in one of my applications, I discovered that the application bar was appearing while the splash screen was shown. It’s very subtle, but it feels like a bug. I saw this bug on some other applications in the Marketplace. Here is a screenshot with the splash screen with the application bar.

SplashScreenBug

To correct this bug, it’s very easy:

1- Make the application bar hidden by default in the XAML code. It’s already included in the first step at the top (IsVisible=”False”).

2- In the page of the application bar, add the event handler Loaded of the page, then add ApplicationBar.IsVisible = true.

private void MainPageLoaded(object sender, RoutedEventArgs e)
{
    if (!App.ViewModel.IsDataLoaded)
    {
        App.ViewModel.LoadData();
    }

    ApplicationBar.IsVisible = true;
}

If you are using the BindableApplicationBar of the Phone7.FX project, I highly suggest reading the perfect solution of Mark Monster that uses a Behavior.

Download Sample project