Working With The Application Bar: Windows Phone Apps Development Tutorial – Part 22

In the last part of our Windows Phone 7.5 Mango App development series, we saw how to navigate between the XAML pages while in this tutorial we shall have a look at the Application Bar.

The Application Bar is similar to a menu. It has icons at the very top that just peek over the bottom and an ellipsis button which when clicked shows a number of textual menu options. We can use these options to perform some operation on the current XAML page or navigate the user to a whole new area of our application. The nice thing about the application bar is that it stays mostly hidden and does not interfere with the basic user interface of the application.

Let’s go ahead and work with a live example.

Create a new Windows Phone 7.5 project with a unique name; something like “ApplicationBarDemo”. Next we right-click the project name in the Solution Explorer window and select Add from the menu. Select New Folder from the sub menu and name the new folder created as “Icons”. The Icons folder will store icons that will be displayed in the application bar. Now navigate to “C:\Program Files\Microsoft SDKs\Windows Phone\v7.0\Icons\dark” and drag and drop the icons (plus and minus sign) in the Icons folder of your project so that they now become a part of your project. Change the Build Action property of each of the icons from Resource to Content.

Application_Bar

Visual Studio provides us with a basic framework of the Application bar in the XAML code for each page. Navigate to the bottom of the XAML code in the design window to locate the code for Application Bar. Edit the XAML code so that it resembles the following

<ApplicationBar>

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

        ApplicationBarIconButton IconUri=”/Images/appbar.minus.rest.png” Text=”Remove” Click=”ApplicationBarIconButton_Click”/>

        ApplicationBarIconButton IconUri=”/Images/appbar.new.rest.png” Text=”Add” Click=”ApplicationBarIconButton_Click_1″/>

        ApplicationBarIconButton IconUri=”/Images/appbar.minus.rest.png” Text=”Remove” Click=”ApplicationBarIconButton_Click”/>

        ApplicationBarIconButton IconUri=”/Images/appbar.new.rest.png” Text=”Add” Click=”ApplicationBarIconButton_Click_1″/>

     <shell:ApplicationBar.MenuItems>

        ApplicationBarMenuItem Text=”Menu 1″ Click=”ApplicationBarMenuItem_Click”/>

        ApplicationBarMenuItem Text=”Menu 2″ Click=”ApplicationBarMenuItem_Click_1″/>

        ApplicationBarMenuItem Text=”Menu 3″ Click=”ApplicationBarMenuItem_Click”/>

        ApplicationBarMenuItem Text=”Menu 4″ Click=”ApplicationBarMenuItem_Click_1″/>

        ApplicationBarMenuItem Text=”Menu 5″ Click=”ApplicationBarMenuItem_Click”/>

        ApplicationBarMenuItem Text=”Menu 6″ Click=”ApplicationBarMenuItem_Click_1″/>

        ApplicationBarMenuItem Text=”Menu 7″ Click=”ApplicationBarMenuItem_Click”/>

        ApplicationBarMenuItem Text=”Menu 8″ Click=”ApplicationBarMenuItem_Click_1″/>

        ApplicationBarMenuItem Text=”Menu 9″ Click=”ApplicationBarMenuItem_Click”/>

        ApplicationBarMenuItem Text=”Menu 10″ Click=”ApplicationBarMenuItem_Click_1″/>

        ApplicationBarMenuItem Text=”Menu 11″ Click=”ApplicationBarMenuItem_Click”/>

      ApplicationBarMenuItem Text=”Menu 12″ Click=”ApplicationBarMenuItem_Click_1″/>

   </shell:ApplicationBar.MenuItems>

  </shell:ApplicationBar>

</phone:PhoneApplicationPage.ApplicationBar> 

The Application bar can hold four icon buttons at the max and an unlimited number of textual Menu Items.

Let’s have a look at the XAML code for the application bar icons code

ApplicationBarIconButton IconUri=”/Images/appbar.minus.rest.png” Text=”Remove” Click=”ApplicationBarIconButton_Click”/>

Each application bar icon button contains a number of properties. The IconUri property is used to set uri for the icon. The text property sets the miniature text to be displayed below the icon. The click event helps us define the functionality to be executed when the icon is clicked.

Similarly the Application Bar Menu Item contains a number of properties and events. We won’t go into that details as this tutorial is for beginners, you can find out more about it on MSDN website. Now lets see how to use canvas as a dialog.

Posted by on , in Category Phone with Tags
Gadget freak, Apple lover, Windows Phone lover; well that’s me! I have been in this wonderful field of freelance writing for quite some time and looking forward to developing more illuminating content related to gadgets and technology, as I go along.

One Comment

  1. Npareek139

    i want to add fifth button on application bar.. help me.

Leave a Reply

Your email address will not be published. Required fields are marked *


9 + 2 =