How to reuse an app bar on multiple pages for Windows Phone

[ This article is for Windows Phone 8 developers. If you’re developing for Windows 10, see the latest documentation. ]

This topic shows you how to create a global Application Bar that can be reused on multiple pages in your application. Usually you create an Application Bar on the page you want to use it on, and it applies only to that page. For the purposes of this example, you create a global Application Bar by using XAML in App.xaml. In your applications, you can also create the global Application Bar by using only code in the App.xaml code-behind file. For more information, see App bar for Windows Phone.

To create a global Application Bar that can be reused on multiple pages

1. In Solution Explorer, double-click App.xaml to open it in the designer.

2. In the Application.Resources element, add the following code. This creates an Application Bar with two buttons and two menu items. The code gives the Application Bar the key GlobalAppBar, but you can give it any key you like.

   <Application.Resources>
   
       <shell:ApplicationBar x:Key="GlobalAppBar" IsVisible="True" IsMenuEnabled="True">
           <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1" Click="Button1_Click" />
           <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2" Click="Button2_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>
   

3. In Solution Explorer, right-click App.xaml and then click View Code to open the code-behind file.

4. Inside the App class, add the following code. These are the handlers for the click events.

   private void Button1_Click(object sender, EventArgs e)
   {
       MessageBox.Show("Button 1 works!");
       //Do work for your application here.
   }
   
   private void Button2_Click(object sender, EventArgs e)
   {
       MessageBox.Show("Button 2 works!");
       //Do work for your application here.
   }
   
   private void MenuItem1_Click(object sender, EventArgs e)
   {
       MessageBox.Show("Menu item 1 works!");
       //Do work for your application here.
   }
   
   private void MenuItem2_Click(object sender, EventArgs e)
   {
       MessageBox.Show("Menu item 2 works!");
       //Do work for your application here.
   }
   

   Private Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs)
   
       MessageBox.Show("Button 1 works!")
       'Do work for your application here.
   End Sub
   
   
   Private Sub Button2_Click(ByVal sender As Object, ByVal e As EventArgs)
   
       MessageBox.Show("Button 2 works!")
       'Do work for your application here.
   End Sub
   
   
   Private Sub MenuItem1_Click(ByVal sender As Object, ByVal e As EventArgs)
   
       MessageBox.Show("Menu item 1 works!")
       'Do work for your application here.  
   End Sub
   
   
   Private Sub MenuItem2_Click(ByVal sender As Object, ByVal e As EventArgs)
   
       MessageBox.Show("Menu item 2 works!")
       'Do work for your application here.    
   End Sub
   

To use a global Application Bar on a page

1. In Solution Explorer, double-click on any page that you want to add the Application Bar to.

2. At the top of the XAML, in the start <phone:PhoneApplicationPage> tag, add the following attribute.

   ApplicationBar = "{StaticResource GlobalAppBar}"
   

Important Note:
If you gave your Application Bar a different key in the previous procedure, replace GlobalAppBar with your key.

See Also

Other Resources

App bar icon buttons for Windows Phone

Code Samples for Windows Phone