×
Namespaces

Variants
Actions

Hiding the Application Bar during Splashscreen display and controlling its opacity

From Nokia Developer Wiki
Jump to: navigation, search

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

WP Metro Icon UI.png
SignpostIcon XAML 40.png
SignpostIcon WP7 70px.png
Article Metadata
Code ExampleTested with
SDK: Windows Phone 7.1
Compatibility
Platform(s): Windows Phone
Windows Phone 7.5
Device(s): All
Article
Keywords: ApplicationBar, Splash screen
Created: ArchieCoder (08 Sep 2012)
Last edited: hamishwillee (02 Jul 2013)

Contents

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.

Opacity thumb.jpg

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.

<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

Version Hint

Windows Phone: [[Category:Windows Phone]]
[[Category:Windows Phone 7.5]]
[[Category:Windows Phone 8]]

Nokia Asha: [[Category:Nokia Asha]]
[[Category:Nokia Asha Platform 1.0]]

Series 40: [[Category:Series 40]]
[[Category:Series 40 1st Edition]] [[Category:Series 40 2nd Edition]]
[[Category:Series 40 3rd Edition (initial release)]] [[Category:Series 40 3rd Edition FP1]] [[Category:Series 40 3rd Edition FP2]]
[[Category:Series 40 5th Edition (initial release)]] [[Category:Series 40 5th Edition FP1]]
[[Category:Series 40 6th Edition (initial release)]] [[Category:Series 40 6th Edition FP1]] [[Category:Series 40 Developer Platform 1.0]] [[Category:Series 40 Developer Platform 1.1]] [[Category:Series 40 Developer Platform 2.0]]

Symbian: [[Category:Symbian]]
[[Category:S60 1st Edition]] [[Category:S60 2nd Edition (initial release)]] [[Category:S60 2nd Edition FP1]] [[Category:S60 2nd Edition FP2]] [[Category:S60 2nd Edition FP3]]
[[Category:S60 3rd Edition (initial release)]] [[Category:S60 3rd Edition FP1]] [[Category:S60 3rd Edition FP2]]
[[Category:S60 5th Edition]]
[[Category:Symbian^3]] [[Category:Symbian Anna]] [[Category:Nokia Belle]]

This page was last modified on 2 July 2013, at 09:47.
88 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×