Windows Phone 7: Global Application Bar

My first article on application bar Part 10 - Windows Phone 7- ApplicationBar talk about how to create application bat in Windows Phone 7. My second article on application bar talks about how to create dynamic application bar Part 53 - Windows Phone 7 - Dynamic ApplicationBar

In this article I will talk about global application bar which can be used in muliple pages of application.  Let's see what is global applicatio bar.

Step 1: Create an application bar in MainPage.xaml which contains two buttons and menu bar.

<phone:PhoneApplicationPage.ApplicationBar>
   <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
      <shell:ApplicationBarIconButton IconUri="/Images/add.png" Text="add" />
      <shell:ApplicationBarIconButton IconUri="/Images/minus.png" Text="minus" />
      <shell:ApplicationBar.MenuItems>
         <shell:ApplicationBarMenuItem Text="MenuItem 1" />
         <shell:ApplicationBarMenuItem Text="MenuItem 2" />
      </shell:ApplicationBar.MenuItems>
   </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

Step 2: Now add another page in the project and name it SecondPage.xaml

Step 3: Add a button in the MainPage.xaml to navigate to SeconPage.xaml.

<Button Content="Show next Page" Height="70" HorizontalAlignment="Center" Margin="6,0,0,0" Name="btnNextPage" VerticalAlignment="Top" Width="420" Click="btnNextPage_Click" />

Step 4: In the code behind of MainPage.xaml, put below code to navigate to SecondPage.xaml.

private void btnNextPage_Click(object sender, RoutedEventArgs e)
{
   this.NavigationService.Navigate(new Uri("/SecondPage.xaml", UriKind.Relative));
}

Step 5: Now run the application, you will see application bar in MainPage.xaml like shown below.

Step 6: Now click on Show next page to show SecondPage.xaml, now you will notice that Application Bar is not present.

Step 7: Now we will modify the code so that same application bar appears in all the pages. Remove application bar code from MainPage.xaml and put it inside Application.Resources in App.xaml. I have added click events for the ApplicationBarIconButton and ApplicationBarMenuItem. The only difference in the ApplicationBar of MainPage.xaml and App.xaml is the x:Key which is present in App.xaml

<Application.Resources>
   <shell:ApplicationBar x:Key="GlobalAppBar" IsVisible="True" IsMenuEnabled="True">
      <shell:ApplicationBarIconButton IconUri="/Images/add.png" Text="add" Click="add_Click" />
      <shell:ApplicationBarIconButton IconUri="/Images/minus.png" Text="minus" Click="minus_Click" />
      <shell:ApplicationBar.MenuItems>
         <shell:ApplicationBarMenuItem Text="MenuItem 1" Click="MenuItem1_Click" />
         <shell:ApplicationBarMenuItem Text="MenuItem 2" Click="MenuItem2_Click" />
      </shell:ApplicationBar.MenuItems>
   </shell:ApplicationBar>
</Application.Resources>

Step 8: Put the events of ApplicationBarIconButton and ApplicationBarMenuItem in the code behind of App.xaml.cs.

private void add_Click(object sender, EventArgs e)
{
   MessageBox.Show("Add works!");
}

private void minus_Click(object sender, EventArgs e)
{
   MessageBox.Show("Minus works!");
}

private void MenuItem1_Click(object sender, EventArgs e)
{
   MessageBox.Show("Menu item 1 works!");
}

private void MenuItem2_Click(object sender, EventArgs e)
{
   MessageBox.Show("Menu item 2 works!");
}

Step 9: Add ApplicationBar = "{StaticResource GlobalAppBar}" inside phone:PhoneApplicationPage of MainPage.xaml and SecondPage.xaml.

Step 10: Now run the application and you will notice application bar is present in MainPage.xaml as well as SecondPage.xaml.

This ends the article of reusing application bar across all pages of app