One of the great new little features which is part of Windows Phone 7 is the ability to create and add an application bar to your application.  This application bar can contain images, menu items or both.  And creating them is dead simple.

In this post I thought we would walk through how to setup an application bar for your phone application.  We will review how to setup a global application bar (one which can be shared across all pages) as well as a local bar, which can only be used by the page which defines the bar.

Creating a Global Application Bar

1. Go to App.xaml
2. Add a xmlns: tag to the top of your XAML.  This tag should look like xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone.Shell"
3. Inside your <Application.Resources> section of the .xaml file
       Add the following code
           <shell:ApplicationBar x:Key="GlobalAppMenuBar" Visible="True">
               <shell:ApplicationBar.MenuItems>
                   <shell:ApplicationBarMenuItem Text="About"  />
                   <shell:ApplicationBarMenuItem Text="Help"  />
                   <shell:ApplicationBarMenuItem Text="Something Important"  />
               </shell:ApplicationBar.MenuItems>

               <shell:ApplicationBar.Buttons>
                   <shell:ApplicationBarIconButton IconUri="ApplicationIcon.png" />
               </shell:ApplicationBar.Buttons>
           </shell:ApplicationBar>

       Thing to pay attention to is that 'shell:' is the alias which was created
           in the <Application> section at the top of the file.

4. To go any page in your solution, I am going to use the default page created, MainPage.xaml and view the xaml
5. In the declaration section of the xaml add the following
       ApplicationBar="{StaticResource GlobalAppMenuBar}"
       Adding the ApplicationBar entry and pointing it to the static resource we created
           in our App.xaml file will instruct this page to use this configuration of the application bar
6. Run the application and you should see something that looks like below: 
   
   

Creating a Local Application Bar

1. Create a new page within your application, or you can reuse MainPage.xaml.
2. Add the following code to your page, put this at the top of your xaml page.
       <navigation:PhoneApplicationPage.ApplicationBar>
           <shell:ApplicationBar Visible="True" x:Name="LocalApplicationBar">
               <shell:ApplicationBar.Buttons>
                   <shell:ApplicationBarIconButton IconUri="ApplicationIcon.png" />
                   <shell:ApplicationBarIconButton IconUri="ApplicationIcon.png" />
                   <shell:ApplicationBarIconButton IconUri="ApplicationIcon.png" />
                   <shell:ApplicationBarIconButton IconUri="ApplicationIcon.png" />
               </shell:ApplicationBar.Buttons>
           </shell:ApplicationBar>
       </navigation:PhoneApplicationPage.ApplicationBar>
   
   NOTE - ApplicationIcon.png is a system image which is in the root of the project and is added by the VS template
3. Run the applciation and you should see a screen which looks like below:
   
   

*** NOTE ***

When you create a local application bar you do NOT need to create the ApplicationBar=... entry in the header of the xaml. If you do you will get an error like below:

*** NOTE ***

One thing that needs to be pointed out is that you will not be able to use Commanding to handle the click events of the various menu items, you will have to implement click events in your code behind.  The reason for this is that the Application Bar control is not a native Silverlight control, but rather it is a unmanaged control which is part of the core OS for the Windows Phone.  Because of this fact currently you cannot utilize native Silverlight techniques to interact with the bar.  Maybe someday there will be at least a native wrapper around the control which will allow for commanding.

There you have it, you now know how to create a global application bar and a local one.

Happy coding.

Till next time,