The application bar is a menu system used in WP7. MS has built this into the API’s so that applications can maintain a consistent look and feel. This image shows what the application bar looks like when expanded.
There are a few components in play here. The icons in the circles are called Icon Buttons. In this example there are three; last, next, and favorite. WP7 limits you to only having a maximum of 4 icon buttons. If you try to add more an exception will be thrown when your application starts. Normally the text for these icons will not appear. It will only show when the menu is expanded as shown in the screen shot. As you would expect you can hook up to the click event on these icon buttons to take action when the user clicks.
The ellipsis in the upper right corner of the application bar is used to expand and collapse the application bar. As I mentioned, when expanded the text for each icon will display. In addition to that, WP7 will display any menu items you have defined. In the screen shot the text “load my favorite picture” is a menu item. The menu item also exposes the click event so you can take action when the user clicks. There is no maximum to the number of menu items you can add. WP7 will display the first few items and then you can scroll up and down to see the rest. In my experience WP7 showed about 5 items.
Adding an application bar to your application is simple. All you have to do is add XAML that looks something like this:
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True" Opacity=".5">
<shell:ApplicationBarIconButton x:Name="btnLast" IconUri="/Images/appbar.back.rest.png" Text="Last" Click="BtnLastClick"></shell:ApplicationBarIconButton>
<shell:ApplicationBarIconButton x:Name="btnNext" IconUri="/Images/appbar.next.rest.png" Text="Next" Click="BtnNextClick"></shell:ApplicationBarIconButton>
<shell:ApplicationBarIconButton x:Name="btnMarkFavorite" IconUri="/Images/appbar.favs.rest.png" Text="Favorite" Click="BtnMarkFavoriteClick"></shell:ApplicationBarIconButton>
<shell:ApplicationBar.MenuItems>
<shell:ApplicationBarMenuItem x:Name="mnuLoadFavorite" Text="Load My Favorite Picture" Click="MnuLoadFavoriteClick"></shell:ApplicationBarMenuItem>
</shell:ApplicationBar.MenuItems>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
Notice I’m setting the IsVisible and IsMenuEnabled properties to true on the ApplicationBar. I am also setting the Opacity to .5. It’s important to note that If you set the opacity to a value less than 1 then the application screen size will be the entire screen. If you set the Opacity to 1 then the application screen size will be reduced by the size of the application bar.
If you are interested in reviewing this code, you can download the sample application here.