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

July 21, 2014

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

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.

NoteNote:

Since pivot “pages” are actually a single control on a single page, different pivot “pages” use the same Application Bar automatically. For more information, see How to use different app bars in a single Pivot control 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.
    }
    

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 noteImportant Note:

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

Show:
© 2014 Microsoft