How to use different app bars in a single Pivot control for Windows Phone

Applies to: Windows Phone 8 and Windows Phone Silverlight 8.1 | Windows Phone OS 7.1

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 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.

    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 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
    

Show:
© 2015 Microsoft