Hiding the Application Bar during Splashscreen display and controlling its opacity

This article explains how to display the Application Bar as "semi-transparent" when minimised and how to ensure it is hidden during Splashscreen loading.

See Also

Application Bar for Windows Phone

Article Metadata

---

Code Example

Source file: Media:PanoramaApplicationBarApp.zip

---

Tested with

SDK: Windows Phone 7.1

---

Compatibility

Platform(s): Windows Phone

Device(s): All

---

Article

Keywords: ApplicationBar, Splash screen

Created: ArchieCoder (08 Sep 2012)

Last edited: hamishwillee (30 Nov 2012)

Introduction

Many Windows Phone application use a transparent minimised Application Bar - freeing up the greatest amount of screen "real estate" for content display. A great example of this is the Games Hub, which is shown below.

This article explains how to create this effect in your own applications. It also shows how to hide the Application Bar while the splashscreen is loading (behaviour which is arguably "buggy").

Readers may wish to first read Application Bar for Windows Phone for a good overview of Application Bar properties.

Creating a minimised semi-transparent Application Bar

This section shows how to define an Application that is semi-transparent in minimised view and opaque when expanded into a menu. Both states of the Application Bar are shown below.

• 

  Semi transparent minimised Application Bar

• 

  Opaque menu in expanded view

Firstly we add the Application Bar to our app XAML as shown below. Note we make the minimized application bar semi-transparent by setting its Opacity property to 0.6.

<phone:PhoneApplicationPage.ApplicationBar xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
                                           xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone">
 
    <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>

We then set the Opacity to 1 (opaque) in code when the menu is expanded (and back to 0.6 when reduced). This is done in 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;
    }
}

Hiding the Application Bar when the splashscreen is displayed

Sometimes you will see apps in the Marketplace where the Application Bar is visible over the top of the application splash screen. While this is very subtle, it feels like a bug.

Splashscreen displayed with Application bar

Preventing the Application Bar from displaying while the splashscreen is loading is 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;
   }

Downloads

Download the sample project: File:PanoramaApplicationBarApp.zip