Windows Phone 7 (Mango) Tutorial - 4 - Application Bar

Application Bar is a tiny toolbar for your page to do some specific operation. Using this, you can easily add a toolbar for your application pages. It is a combination of 1-4 icon buttons and/or a collection of menu items.

In my previous post, we already discussed about the class. Today we will discuss more on this topic. We will also create a small demo application to showcase the use of ApplicationBar. Read to know more and don't forget to share your feedback.

Index - Windows Phone 7 (Mango) Tutorial

Flash back to Application Bar

Application Bar is a set of icon buttons and/or menu items, which provides easy access to application's most common tasks. It resides at the bottom of the phone screen. It can contain a row of 1-4 icon buttons for common tasks, a set of menu items to provide user easy access to the other specific actions. These menu items are displayed in a list just below the row of icon buttons. Generally menu items are not visible at the initial stage. There is a ellipsis at the right ride of the icon panel, clicking on it actually slides up the menu panel from the underneath of the icons panel.

Remember that, a MenuItem can't have any Sub menu item. The application bar has already a built-in animation that is displayed when the menu is shown or hidden. Once you rotate your phone and set a different orientation, your application bar automatically adjusts itself and maximizes the space for the page content.

Adding images for the Icon buttons

It's not a difficult job for a developer to include images in project but here you have to configure something for your images to display. Let us take the previous example of our Hello World application. In the project, we will create a folder called "images" to put all the require images in the same directory. Now add some PNG icon images in that directory.

I am using some images from the SDK samples. You can find them here: "%ProgramFiles%\Microsoft SDKs\Windows Phone\v7.x\Icons\dark", replace 'x' with proper version number.

If we just add the images, our application bar will not display the right images there. To set them properly, right click on the images and go to the properties panel. Now from the "Build Action" dropdown chose "Content" instead of "Resource" (as shown in the below screenshot).

Now save and build your project. This small step will add those images as content of your XAP file.

Playing with the XAML

Once you chose your icons and configured them properly as Content of XAP, it's time for us to modify the XAML page to display the Application bar. Open your MainPage.xaml and as discussed earlier, find the below commented code:

Uncomment the code and specify proper image path and text for your application bar's Icon button. For reference, check the below code snippet:

We will also add some text menu items there. Let's label them as "Cut", "Copy" and "Paste". Oh yes, you can label them as you want Have a look into the above code snippet for reference.

Let's build the project and run the application inside the Phone Emulator. You will now see the application bar at the end of the phone page. Click any blank space in the row or click the ellipsis to bring up the menu panel. Check the in-built animation there.

Now a question may come. How can we add some event to the icon buttons or the menu items? There is a click event associated with each one of them. You can use that and add your click implementation. Let's add one for you. Find the complete code snippet here:

<!--Sample code showing usage of ApplicationBar-->

<phone:PhoneApplicationPage.ApplicationBar>

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

        <shell:ApplicationBarIconButton IconUri="/images/search.png" Text="Search"

                                        Click="IconBarButton_Click"/>

        <shell:ApplicationBarIconButton IconUri="/images/save.png" Text="Save"/>

        <shell:ApplicationBarIconButton IconUri="/images/refresh.png" Text="Refresh"/>

        <shell:ApplicationBar.MenuItems>

            <shell:ApplicationBarMenuItem Text="Cut"

                                          Click="MenuItem_Click"/>

            <shell:ApplicationBarMenuItem Text="Copy"/>

            <shell:ApplicationBarMenuItem Text="Paste"/>

        </shell:ApplicationBar.MenuItems>

    </shell:ApplicationBar>

</phone:PhoneApplicationPage.ApplicationBar>

Once you register the click event and implement the event, you will be able to see some action on click.

Download Source Code

You can download the complete source code of the demo project from here:

• Application Bar Demo Source Code - 23 KB

Hope, this tutorial was helpful for you to understand the use of Application Bar, as well as the implementation part. Don't forget to ask your queries. Any feedback and suggestions are always appreciable.