Windows Phone Mango Panorama: Working around the minimized appbar bug

Background

Before the Mango update, Windows Phone developers were advised against using the application bar with a Panorama control. This was somewhat changed with the Mango which includes  a new minimized mode for the application bar. This mode can be accessed using the Mode-property of the application bar.

    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True" Mode="Minimized">

For example the built-in People hub uses this new mode. But if you cycle through the panorama items in the People hub, you’ll notice that there’s one panorama item where the application bar is shown in its default mode. This is a nice behavior because it draws the user’s attention  to the functionalities provided by the application bar. And this same behavior has been replicated by many 3rd part applications. But be careful with it, because in its current state, changing between the two different modes may cut some pixels from your panorama’s background.

The problem

The problem manifests itself if you meet the following conditions in you app:

• You have a page which includes the panorama
• You have an application bar
• You’re switching between the two different app bar modes (minimized / default)
• User can arrive to the panorama page so that the app bar is in default mode.

When the panorama is first drawn with the application bar in default mode, it doesn’t draw the background properly when the app bar is switched to the minimized mode.

Let’s go through some examples.

Example 1: Application starts with the application bar in minimized mode

If the app bar is in minimized mode when the app is started, everything works correctly:

Application bar minimized:

Application bar in default mode:

Example 2: Application starts with the application bar in default mode

If the app bar is in default mode when the app is started, the background loses some pixels when the app bar is minimized:

Application bar in default mode:

Application bar minimized:

As you can see, the background is cut. This happens also with the first example if the user is able to navigate forward when the application bar is in default mode. When the user navigates back, the background doesn’t draw correctly.

Workaround

Until the bug is fixed, probably the simples workaround is to set application bar’s opacity to less than 1.

        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True" Mode="Default" Opacity="0.99">
            <shell:ApplicationBarIconButton IconUri="appbar.questionmark.rest.png" Text="help"/>
        </shell:ApplicationBar>

Example 3: Application starts with the application bar in default mode and the application bar’s opacity is less than 1

If the app bar is in default mode when the app is started, and its opacity is less than 1, everything works correctly:

Application bar in default mode:

Application bar minimized: