How to use different app bars in a single Pivot control 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 change the Application Bar when the user swipes the pivot “pages.” Since pivot “pages” are actually a single control on a single page, different pivot “pages” use the same Application Bar automatically. Usually this convenient behavior is what you want; however, if not, you can capture the selection changed event to change the Application Bar when the user swipes the pivot “pages.”

For the purposes of this example, you create two global Application Bars by using XAML in App.xaml. In your applications, you can also create global Application Bars by using only code in the App.xaml code-behind file, or local Application Bars in the code-behind file of your pivot page. All of these methods of creating the Application Bars work with the technique for changing them in the Pivot control. For more information, see App bar for Windows Phone.

To create different Application Bars

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 two Application Bars, AppBar1 and AppBar2. AppBar1 has one button and one menu item, and AppBar2 has two of each. Note that AppBar1 and AppBar2 share one button and one menu item in common, but they could be entirely distinct.

   <Application.Resources>
   
       <shell:ApplicationBar x:Key="AppBar1" IsVisible="True" IsMenuEnabled="True">
           <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1" Click="Button1_Click" />
           <shell:ApplicationBar.MenuItems>
               <shell:ApplicationBarMenuItem Text="MenuItem 1" Click="MenuItem1_Click" />
           </shell:ApplicationBar.MenuItems>
       </shell:ApplicationBar>
   
       <shell:ApplicationBar x:Key="AppBar2" 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. Note that if the different Application Bars share button or menu items, they share the event handlers also.

   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 different Application Bars in a single Pivot control

1. Open the code-behind file for your Pivot page in the editor.

2. At the top of the code, add the following statement.

   using Microsoft.Phone.Shell;
   

   Imports Microsoft.Phone.Shell
   

3. Add the following code to the page class, after the constructor. This code handles the selection changed event and selects the different Application Bars depending on the new pivot item selected. You can add more cases if you have more pivot items, and you can allow cases to fall through if multiple pivot items share one Application Bar, while other pivot items share a different Application Bar.

   private void Pivot_SelectionChanged(object sender, SelectionChangedEventArgs e)
   {
       switch (((Pivot)sender).SelectedIndex)
           {
               case 0:
                   ApplicationBar = ((ApplicationBar)Application.Current.Resources["AppBar1"]);
                   break;
   
               case 1:
                   ApplicationBar = ((ApplicationBar)Application.Current.Resources["AppBar2"]);
                   break;
       }
   }
   

   Private Sub Pivot1_SelectionChanged(sender As System.Object , e As System.Windows.Controls.SelectionChangedEventArgs) Handles Pivot1.SelectionChanged
   
       Select Case CType(sender, Pivot).SelectedIndex
   
           Case 0
               ApplicationBar = CType(Application.Current.Resources("AppBar1"), ApplicationBar)
   
           Case 1
               ApplicationBar = CType(Application.Current.Resources("AppBar2"), ApplicationBar)
   
       End Select
   End Sub
   

See Also

Other Resources

App bar icon buttons for Windows Phone

Code Samples for Windows Phone