Show a minimized panorama application bar

The first version of WP7 design style guide, specified that the panorama should not include an application bar. In Mango, Microsoft have reconsidered, and you can find it in the hubs there.

Additionally, if you look at the application bar in the games hub there is a new way to display it: empty and minimized with just a little transparency, like this;

gameshub

I think this is brilliant for functionality you want available in the panorama but at the same time have it tucked away, and not interfering with the panorama content.

The slim menu is actually easy to accomplish and is part of the mango build. You accomplish it by setting the Mode property on the application bar to Minimized. The opacity and color can be set the same way with the Opacity and BackgroundColor properties. Just remember that the color needs to be a solid color and not a brush.

The last thing to set is an event handler for the StateChanged event to make the transparency go away when the menu is displayed. The xaml code for this looks something like this:


    
        
            
            
        
    

I removed the icon items here, but if you leave them in they will be displayed as soon as you tap and display the menu and hide again when minimized. To change the transparency I track the StateChange event and do a simple change of the Opacity property based on MenuVisibility like this:

private void OnApplicationBarStateChanged(object sender,
    ApplicationBarStateChangedEventArgs e)
{
    var appBar = sender as ApplicationBar;
    if (appBar == null) return;

    appBar.Opacity = e.IsMenuVisible ? 1 : .65;
}

The end result (although selecting orange as background is probably not a good idea to get a discreet application bar) is this:

minimized  maximized

// Håkan Reis

This Post Has 5 Comments

  1. Thank you very much, I was working on this very thing the other day when I realized I needed to have a minimal menu for a settings and logout option.

  2. I’m trying this on a Pivot page (not that it should matter) but I can’t get the event to fire at all. I have a handler wired up but it’s never executed. Any thoughts?

  3. Sweet – great tip, thanks!

  4. Thank you very much! This really helped a lot!

Leave a Reply

Close Menu