In this article we are gong to see how to reuse the application bar effectively in multiple pages. Application bar is specific to particular page which we design while designing the page, but we have option to use it across the pages to have some unique navigation flow or also to make code reusable to avoid junk of repeated code in each and every page. To get more information on the application bar I would suggest to read this article which gives clear idea on how to use the application bar effectively (Article). So in this article we will take a step further on using the application bar unique across the different pages with a single code base by making the application bar publicly available across all the pages of the application.      [more]

Let us see the steps on how to achieve this task in our Windows Phone application development. Open Visual Studio 2012 IDE and create a new Windows Phone project with a valid project name as shown in the screen below. 

Clicking on OK will create the project and the solution with the list of default files and folders that are required to run the application. It will take some time to create these files based on your system configuration, so once everything is ready we can see the Visual Studio IDE with the project as shown in the screen below.

Normally we will add the application bar code directly in the Mainpage.xaml if we want to trigger the application bar from the xaml code or we will write our dynamic code in the code behind to trigger the application bar. Since in this tutorial we are going to make the application bar reusable across the pages we have few steps to be done. Open App.xaml file from the list of available files in the solution explorer, this file is use to apply all the global settings with respect to the application. Open the file and add the Application bar code in the Application.resource element as shown in the code below.

XAML Code:

<shell:ApplicationBar x:Key="GlobalAppBar" IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbarImg1.png" Text="Close" Click="Close_Click" />
            <shell:ApplicationBarIconButton IconUri="/Images/appbarImg2.png" Text="Open" Click="Open_Click" />
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="About" Click="Menu1_Click" />
                <shell:ApplicationBarMenuItem Text="News" Click="Menu2_Click" />
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>

Now the application bar can be instantiated across the pages, so where we need to provide the action. As usual place the event action in the code behind of the App.xaml.cs file as shown in the code below.

C# Code:

private void Close_Click(object sender, EventArgs e)
{
    MessageBox.Show("Clicked Close Button");
}

private void Open_Click(object sender, EventArgs e)
{
    MessageBox.Show("Clicked Open Button");
}

private void Menu1_Click(object sender, EventArgs e)
{
    MessageBox.Show("Clicked Menu1");
}

private void Menu2_Click(object sender, EventArgs e)
{
    MessageBox.Show("Clicked Menu2");
}

Now run the application and we can see the application bar will not be available to the Mainpage.xaml page. We need to tell the page to use the application bar, so we need to add the below code in the xaml page which tells the application to load the application bar in the Mainpage.xaml load as shown in the screen below.

XAML Code:

[code:c#]

ApplicationBar = "{StaticResource GlobalAppBar}"

Now we are done with our configuration, just run the application by pressing F5 directly from the keyboard or we can use the Build and execute the project option from the tool bar to run the application. Once the Build is successful we can see the Windows Phone emulator with the application and the expected outputs as shown in the screens below.