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.
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.
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.
<shell:ApplicationBarMenuItem Text="MenuItem 1" />
<shell:ApplicationBarMenuItem Text="MenuItem 2" />
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.
Preventing the Application Bar from displaying while the splashscreen is loading is easy:
- Make the application bar hidden by default in the XAML code. It’s already included in the first step at the top (IsVisible="False").
- 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)
ApplicationBar.IsVisible = true;
Download the sample project: File:PanoramaApplicationBarApp.zip