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.

 

imageimage

 

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.

 

image

 

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).

image

 

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:

 

image

 

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

 

image

 

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.

 

imageimage

 

 

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:

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.


8 comments

  1. Thanks for sharing it Kunal. I tried to do it on my own and noticed that the next that I entered for Menu items, displaying in lower case. I can't place them as upper case or a mixed one. Am I missing something or is it a intended behavior? What is the reason behind it?

    ReplyDelete
  2. Good post ..

    I do see the advantage of using Expression Blend here ..

    The Designer support for ApplicationBar is much better in Expression Blend than Visual Studio :)

    ReplyDelete
  3. Thank you!

    Learned allot from it!

    ReplyDelete
  4. Here are new Metro-style application bar icons for Windows Phone and
    Windows 8: www.iconsforwindows8.com;

    ReplyDelete
  5. Hi Kunal I wanted to add 5 buttons into the applicationbar so it says too many list into the applicationbar so is there any workaround to achieve this functionality and I dont want to add the applicationmenubar item.

    thank you.!

    ReplyDelete
  6. Hi Jadav,

    Did you check out the Design Guidelines for Application Bar? I hope that will help you to understand it.

    ReplyDelete
  7. Excellent, the Tutorial set at just the right level. Many thanks...

    ReplyDelete


 
© 2008-2014 Kunal-Chowdhury.com | Designed by Kunal Chowdhury
Back to top