Hiding the Application Bar during Splashscreen display and controlling its opacity

Comments

Hamishwillee - Suggestions for improvement

Hi

Firstly, I think its good that you've highlighted this "bug", and having an article that explains how to overcome it is useful. However I think the coverage of the Application Bar is superficial, and unnecessary given there are many other useful articles. I also think that the reference to game hub isn't all that significant - since this is generic app behaviour now.

My proposal would be a fairly radical edit, with the following changes:

• Make this cover only the "bug" - replace most of the explanation of what an application bar is with a link to Application Bar for Windows Phone or the MSDN reference
• Rename to explain exactly what this does - something like "Hiding the Application Bar during Splashscreen display"
• Your images are still good.

Thoughts?

I can help make this change if you want.

Regards Hamish

ArchieCoder - Suggestions

Hello,

If you have the opportunity to do the modifications, go ahead. My first language is French, so it might be faster if you do the correction first. One of the important point in the article was to show that the opacity of the ApplicationBar needs to be at 0.6 while minimize and at 1 when open.

This bug is even present in the Facebook app!

Thank you

ArchieCoder

ArchieCoder 15:22, 13 September 2012 (EEST)

Hamishwillee - Done!

Hi ArchieCoder

I've subedited this. I didn't end up removing anything, just presented it slightly differently. Please check you're happy with the changes.

With your approval I'd like to split this into two articles "Hiding the Application Bar during Splashscreen display" and "Implementing a semi-transparent Application Bar"

Regards Hamish

PS

Your written English is better than a lot of native English speakers! In my opinion your "room for improvement" is more in terms of article structure.

hamishwillee 05:29, 14 September 2012 (EEST)

TechnoTim - Bug

There is actually another bug i found. Add an image to main page and you will see it jump when you expand the menu items.

TechnoTim 05:42, 12 April 2013 (EEST)

Log in or Join to leave comments.

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 (10 Apr 2013)

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