Working With Application Bar in Windows Phone 7

Introduction

In this article we are going to see how to use Application Bar effectively for a Windows Phone 7 Application development.  In this article also we will create a new application and configure the application bar to make use of it effectively. Application Bar is a set of Icons that can be configured at the bottom of the application for each page or also we can configure it for multiple pages. These buttons can be used to navigate to frequently used pages across the application which enables users to navigate quickly and easily. Application bar has some set of options along with the buttons we can configure the menu items especially for some navigation which are not that much frequently used. Application bar automatically adjusts its icons and button as the screen orientation changes as and when.

The text based menu items are displayed as a list rather from the icons been shown in the screen. To access the menu items we can directly click the ellipsis at the right corner of the application bar. The menu items are by default be taken in lower case to have a consistent user experience for the end users and developers to create the application. Now let us jump start to see the step by step process on how to add a Application Bar to a new project and configure the application bar with the icons and menu items one by one.

Steps :

Open Visual Studio 2010 and create a new Silverlight for Windows Phone 7 Application named F5debugWp7ApplicationBar as shown in the screen below.

We can now see the project is been created and ready to start with our development task. As we follow some standards, we can change the page header and some small modification so that the page looks unique. Once we are done with the changes to add the application bar go the XAML Page and we can see a commented section as shown in the screen below.

Just we need to uncomment this section to have the application bar ready with some default buttons and menu's which we can configure it as per our requirements. Once we uncomment these section we can see that we have 2 application bar icons added and 2 menu items added with the default values. Now we will change it to 3 Application bar icons and 3 Menu items. Before we start adding the code we need to have the Application bar icons ready. By default when we install the Windows Phone 7 SDK we have the icons installed to the local development machine and it will be available in the below locations.

DrivenName\Programs Files\Microsoft SDKs\Windows Phone\v7.1\Icons\dark

DrivenName\Programs Files (x86) \Microsoft SDKs\Windows Phone\v7.1\Icons\dark

We can see the list of ICONS available as shown in the screen below.

Now in the uncommitted application bar code, add the code for 3 buttons and 3 menu items as shown in the screen below. Before that add the icons that are required to use in the application bar to a new Images folder.

Now first we need to make the application icons which we added to the images folder as content, to do that go to the properties of the each image and make the Build Action as Content from Resources. Do the same for all the icons which are added to the images folder.

Once we are done with the above step, now go to the XAML code and make the changes for each button by adding the appropriate icon and the button text as shown in the below XAML code.

<shell:ApplicationBarIconButton IconUri="/Images/appbar.next.rest.png" Text="Back";

<shell:ApplicationBarIconButton IconUri="/Images/appbar.add.rest.png" Text="Add";

<shell:ApplicationBarIconButton IconUri="/Images/appbar.back.rest.png" Text="Front";

 

Now do the same for the menu items by adding the menu details as shown in the screen below.

 

<code>

    <shell:ApplicationBarMenuItem Text="Home"/>

    <shell:ApplicationBarMenuItem Text="Submit"/>

    <shell:ApplicationBarMenuItem Text="Help"/>

</code>

 

Once we are done with the above 2 code process our final application bar code will look like below.

 

<code>

    <phone:PhoneApplicationPage.ApplicationBar>

        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">

            <shell:ApplicationBarIconButton IconUri="/appbar.next.rest.png" Text="Back"/>

            <shell:ApplicationBarIconButton IconUri="/Images/appbar.add.rest.png" Text="Add"/>

            <shell:ApplicationBarIconButton IconUri="/appbar.back.rest.png" Text="Front"/>

            <shell:ApplicationBar.MenuItems>

                <shell:ApplicationBarMenuItem Text="Home"/>

                <shell:ApplicationBarMenuItem Text="Submit"/>

                <shell:ApplicationBarMenuItem Text="Help"/>

            </shell:ApplicationBar.MenuItems>

        </shell:ApplicationBar>

    </phone:PhoneApplicationPage.ApplicationBar>

</code>

 

Now we can run the application to see if the application bar is configured correctly and the icons are visible correctly. To build and execute the application just press F5 or select the build solution option from the tool box and we can see the application is loaded into the Windows Phone 7 Emulator as shown in the screen below.

Now we need to have an event handler to trigger each button event. To do that add the event handler code in the XAML and add the event triggering code to the code behind as shown in the code below.

XAML Code :

<code>

    <phone:PhoneApplicationPage.ApplicationBar>

        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">

            <shell:ApplicationBarIconButton IconUri="/Images/appbar.next.rest.png" Text="Back" Click="NextButton_Click"/>

            <shell:ApplicationBarIconButton IconUri="/Images/appbar.add.rest.png" Text="Add" Click="AddButton_Click"/>

            <shell:ApplicationBarIconButton IconUri="/Images/appbar.back.rest.png" Text="Front" Click="BackButton_Click"/>

            <shell:ApplicationBar.MenuItems>

                <shell:ApplicationBarMenuItem Text="Home"  Click="HomeMenuutton_Click"/>

                <shell:ApplicationBarMenuItem Text="Submit"  Click="SubmitMenuButton_Click"/>

                <shell:ApplicationBarMenuItem Text="Help"  Click="HelpMenuButton_Click"/>

            </shell:ApplicationBar.MenuItems>

        </shell:ApplicationBar>

    </phone:PhoneApplicationPage.ApplicationBar>

</code>

 

 C# Code : 

 

<code>private void NextButton_Click(object sender, EventArgs e)

 {

      MessageBox.Show("Next Application Bar Is Clicked!!!");

 }</code>

 private void AddButton_Click(object sender, EventArgs e)

 {

      MessageBox.Show("Add Application Bar Is Clicked!!!");

 }

 private void BackButton_Click(object sender, EventArgs e)

 {

      MessageBox.Show("Back Application Bar Is Clicked!!!");

 }

 private void HomeMenuutton_Click(object sender, EventArgs e)

 {

      MessageBox.Show("Home Menu Is Clicked!!!");

 }

 private void SubmitMenuButton_Click(object sender, EventArgs e)

 {

      MessageBox.Show("Submit Menu Is Clicked!!!");

 }

 private void HelpMenuButton_Click(object sender, EventArgs e)

 {

      MessageBox.Show("Help Menu Is Clicked!!!");

 }

 

Now we have just added a code to trigger a Message Box stating which button is clicked. Once we are done with the above code now press F5 to build and execute the application and click on the Application Bar button to see the expected output as shown in the screen below.

 

 

Conclusion :

 

So in this article we have seen how to use the Application bar and the steps to configure the application bar with the menu items.